Before you get started, you must add the FirebaseTS library to your project. Follow this tutorial to learn how to add FirebaseTS.
Firebase Authentication: Signing In with Email & Password and 3rd Party Providers
Signing into Firebase with email and password and 3rd party providers using the FirebaseTS Package.
Also, make sure to enable the email and password sign in method for the Firebase project.
In this tutorial, we will be using the signInWith() method from the FirebaseTSAuth class to sign in.
Here is the definition of the method:
public signInWith(params: {
provider?: "Google" | "Yahoo" |
"Facebook" | "Apple" |
"Github" | "Twitter" |
"Microsoft",
email?: string,
password?: string,
onComplete?: (firebase.auth.UserCredential) => void,
onFail?: (error: any) => void
}): Promise<firebase.auth.UserCredential>;
Setup
1. Import the FirebaseTSAuth class.
import { FirebaseTSAuth } from 'firebasets/firebasetsAuth/firebaseTSAuth';
2. Instantiate an FirebaseTSAuth object.
private auth: FirebaseTSAuth;
constructor(){
this.auth = new FirebaseTSAuth();
}
Signing in with Email and Password
To sign in with Email and Password, call the signInWith() method and populate the email and password properties.
this.auth.signInWith(
{
email: "codeible@codeible.com",
password: "*******"
}
);
Signing in with 3rd Party Providers
To sign in with 3rd party providers, call the signInWith() method and use the provider property.
this.auth.signInWith(
{
provider: "Google"
}
);
The list of providers current supported are:
"Google" | "Yahoo" | "Facebook" | "Apple" | "Github" | "Twitter" | "Microsoft"
Handling code on complete or fail
Sometimes, you may want to execute some code afterwards. Add the onComplete and onFail callback functions.
this.auth.signInWith(
{
provider: "Google",
onComplete: (uc) => {
alert("Signed in!");
},
onFail: (err) => {
alert("Failed to Sign in...");
}
}
);
We can also use then() and catch() as well since the signInWith() method is a promise.
this.auth.signInWith(
{
provider: "Google"
}
)
.then( uc => { ... } )
.catch( err => { ... } );
