Angular 4 and Firebase Authentication: Google Sign-in

Any user of the application would like to sign-up in less time. Users already have their social accounts like Google, Facebook, Twitter, etc. The same account can be leveraged in our application. Firebase provides a wonderful way to integrate these identity providers. In this post we will go through the implementation of Google sign-up.

If you have not checked my post on Angular 4 and Firebase Setup then I would recommend you to visit Setup post because this is in continuation to that article.

Step 1:

Create a service and give appropriate name to it. We will put all our sign-up and sign-in related methods in this service and will use it in other components. You can create a folder providers inside src/app and in providers create a file called AFAuth.ts.

As you can see in the above image, we have added two methods: loginWithGoogle to enable user to use his/her Google account for signup and logout to enable him/her to successfully logout of the application. We will use these two methods in our components that we will create in some time.

Now let us import the same service in app.module.ts file.

Step 2:

Before we can use Google login functionality we need to enable it from Firebase Console. Click on Authentication (on the side menu) and go to SIGN-IN METHOD tab and select Google. Enable it and save the changes.

Step 3:

Create Login Page component. We will use Angular CLI command to do so. This will add our loginPage component in app.module.ts file automatically.

ng generate component loginPage

Step 4:

Update login-page.component.ts file to call the loginWithGoogle method in the service. Here, we will create login method which will be called by user when he/she clicks the login button on the screen. We will also add Router now (but will configure later on) to navigate the user to home page if logged in successfully.

Step 5:

Add HTMLto loginPage component HTML.

Make sure your app.module.ts file looks like below. We have added AngularFireAuthModule and configured router by adding routes array.

Step 6:

Create HomePage component using below command and check whether the same component is added to app.module.ts file.

ng generate component homePage

We will not modify this component as of now. We will use this for just redirection.

Step 7:

Modify routing in app.module.ts file to add HomePage component.

Also add <router-outlet> to app.component.html page.

Step 8:

Enhance the application by adding some more functionality. We will consider real world scenario over here. When user visits you application he/she must see the Login page if not logged in already else Home page.

To incorporate this feature we will update our app.component.ts file as shown in below image.

The above logic is straight forward to understand. However, I would like to mention here about authentication service (afAuthservice.auth) which comes with all authentication features. For example, here is the user object returned by auth service. It contains all the details about the current logged in user. Say, we want to display the name of the user. We can use user.displayName property for it.

Step 9:

Add logout functionality.

We will add logout function in the app.component.ts file.