Angular 6/7 Firebase Authentication with Material Design

▶ Check out my gear on Kit: https://kit.com/codewithsrini

Angular 6 Firebase Authentication with Material Design. Establish an authentication mechanism using Angular Firebase with help of angular fire in your project. Also, make use of Angular Material to build a toolbar and accommodate logged-in user avatar in toolbar with a dropdown to show options.

Source Code: https://github.com/codewithsrini/AngularFirebaseAuth

Angular Blog: http://www.codewithsrini.com/

Welcome to CodeWithSrini and let’s jump right in.

So, let’s fire up our angular cli and create a new app.

ng new AngularFirebaseAuth

Once the app is created, navigate to the app folder and get the visual studio code up and running.

First of all, let’s go ahead and install firebase for angular. Which should be firebase and @angular/fire

npm install --save firebase @angular/fire

Also, we have to visit firebase console to configure our application to make use of firebase, which is at https://console.firebase.google.com/?pli=1

As a result, you will have your firebase settings ready. Therefore the next step would be to visit the "firebase console" and look up at a section called “Authentication” and setup sign-in methods.

By default, the status of sign-in providers is disabled. We have to enable them in order to use it.

For example: If we have to use Google sign-in provider, then hit on that tab and give your email and save, that’s it.

The implementation may vary based on the authentication you may need. For Facebook, you may need app id and app secret.

For GitHub, Client ID and Client Secret likewise.

In this lecture, we will go ahead and make use of Google’s sign in provider for now.
So, Google enabled.

Similarly, we need to include firebase modules in the app.module.ts script.
One is AngularFireModule , the other one is AngularFireAuthModule.
And using AngularFireModule, we need to initialize our firebase using the config we got earlier, from the firebase console.

Goto app.module.ts
Add the firebase modules.

Integrated Terminal
Open up the integrated terminal in our VScode by pressing ctrl tilde.
Let’s create a login component and service for our nice little app.

$ ng g c auth/login
$ ng g s auth/login

Go back to browser and check if the app-login component works.
Goto auth/login.component.html

Now let’s go to login.component.html template and create a login button to invoke sign-in method to firebase. And add a button.
Similarly, let’s create a method called “loginGoogle()” in our login.component.ts class file.

Likewise, in the login service class file, we need to create a method to complete our login event. That’s rite, which will be just login.

First of all, to get the login working, we need to include AngularFireAuth and auth from firebase/app..

Now, let’s go to login.service.ts.

Please watch the full video for rest of the steps.
Thank You!