Angular 4 and Firebase Authentication: Email/Password

In our previous article we saw how to create authentication module using Google identity provider. Now we will see how to implement Email and Password authentication using Firebase.

We will use Bootstrap form to create intuitive user interface for sign-up and login using Email and Password.

Step 1:

Create signUp component.

ng generate component signUp

Step 2:

Create custom form in sign-up.component.html file.

The result of above code:

Step 3:

Add two functions for creating the user and login using Email and Password in src/app/providers/AFAuth.ts file.

Step 4:

Call createUserWithEmailAndPassword function in service from sign-up.component.ts.

Step 5:

Update routing configuration in app.module.ts to include signUp component.

Step 6:

Update Login form to have Bootstrap form.

The result of the above code.

Step 7:

Enable Email/Password component in Firebase Console.

Step 8:

Test our code. As we don't have account, we will create one by clicking Don't have account button. This will redirect to SignUp page. 

Step 9:

Check whether the account is created or not. You can do so by looking at the console logs as well as in Firebase Console.

Step 10:

Login using Email and Password.

For this we need to first update login-page.component.ts file.

Now login by clicking Login button using the credentials that you used while creating the account.

As you can see we are able to login successfully.

Hope you liked this article. If you are facing any difficulty then please drop your doubts in comments section.