Google Authentication in Angular

Let the users sign in with their Google account to your Angular application

Social Media Registration and Login is very easy and most desirable way to register in new apps. Using existing login information from a social network provider like Facebook, Twitter, or Google, the user can sign into a third party website instead of creating a new account specifically for that website. This simplifies registrations and logins for end users.

Adding Social Login to your applications has several perks.

1. Increase in Number of registrations.
2. Email is verified.
3. Access richer user profiles.
4. Up-to-date profiles.
5. One-click return experience.

In this article, we will see how to register using Google accounts using Angular.

Angular Social Login: Social login and authentication module for Angular 9+. Supports authentication with Google, Facebook, Amazon, Microsoft, and VK out of the box. Can be extended to other providers also.

Let’s Dive In

Step 1: Get Google OAuth key

We will do some necessary and simple steps in your Google account in order to get the OAuth key and enable the login function for your app. You can use your own Google account or create a new account for this.

Go to the google development console and sign in. In the dashboard you should create new project, where you fill out name of application and few other fields.

Next, go to the credentials tab click on Create Credentials.

Next click on OAuth client ID.

Now select Application Type as “Web Application” give your desirable name.

Now add your application base path for local environment as well as for your production environment. Here we have only added localhost.

Then press “create” and copy your client id from the popup window.

Project Structure

First, create the base folder (google-authentication-project) which contains all the project-related files and directories.

$ ng new google-authentication-project

Step 2: Initialize App

Now our next step to initialize our project by running the below command in the terminal.

$ ng serve --open

Now we will install the required dependencies.

$ npm i angularx-social-login, bootstrap

Now, got to your terminal and generate two components login and dashboard.

$ ng g c login

login component

$ ng g c dashboard

dashboard component

Step 3: Setup your Code

Now our next step to initialize our project by running the below command in the terminal.

3.1 Configure app.module.ts

‘Now we set up app.module.ts . In your AppModule, import the SocialLoginModule.

3.2 Setup app-routing.module.ts

create the routing URLs for Login and Dashboard Page.

In App HTML page app.component.html

provide the <router-outlet></router-outlet>

app.component.html

3.3 Setup Login Component

Now go to login.component.ts and set up your signInGoogleHandler code.

1. First import GoogleLoginProvider and SocialAuthService from ‘angularx-social-login’

2. Now, writhe the signInGoogleHandler() funtion in login.component

Now setup the login.component.html page

3.4 Setup Dashboard Component

Now Similar to Login Component, first we will setup the dashboard.component.ts and then login.component.html

Now go to dashboard.component.ts and set up your ngOnInit() code.

Now set up the Html code for Dashboard in dashboard.component.ts file.

Our App is completed. Now we can test.

Step 3: Accessing users name and email

Step 5: Test the work

Start up the server and open the project URL on the browser.

The project URL is http://localhost:4200

Hit this URL on the browser

Click on Continue with Google

A dialog box will open, choose your desired email.

will open Choose your desired email.

Google accounts

Now you can able to get your credentials. (Here: Name, Email and Photo).

Dashboard

Now you are good to go with the registration process using your google credentials.

Conclusion

In this article, We have seen:-

1. How to
2. How to generate google client ID using Google Developers Console.
3. How to setup App Module and authenticate google user using Angular
4. How to perform Routing in Angular.
5. How to store data in your local storage.
6. How to get the data from local storage and display it on your dashboard.

You can find the code [here].

Read my other articles:

How to Host React Web App on Firebase

Why SQL is important in Data Science?

Cloud Computing revolution in aerospace and defence

If you like this article, give it a clap 👏