Login using Google credentials in Angular Web Application

Google account to login our application

Yikes! You should never be required to share your username, password, your credentials, to another service. There’s no guarantee that an organization will keep your credentials safe or guarantee their service won’t access more of your personal information than necessary.

We are going to implement a feature to login to an Angular web application using Google login interface. Login with Google makes it easy and safe for users to use applications. Also, application need not to be featured to manage user and credentials, saving plenty of complexities for developer and organization!

Prerequisites

  • Angular basic
  • Typescript
  • Visual Studio Code

Implementation Steps

  1. About Web Application to be used
  2. Configure Google Client ID and Secret Key
  3. Enhance Angular application with Google Login
  4. Run the Application

1. About Web Application to be used

We are going to enhance basic angular application developed in Angular version 11.1.2, published at
https://pankaj-d-sonawane.medium.com/angular-web-application-basic-8839b60862da

We will be adding a Login button to navigate user to Google Login Interface. User submits Google credentials to validate it by Google API. On successful validation at Google API, application receives a Token and other user detail, which can be utilized in our application.

To implement Google Login feature, we are using angular library:
angularx-social-login

2. Configure Google Client ID and Secret Key

a. Browse Google API Console and login with google account.
https://console.developers.google.com/projectselector2/apis/credentials?pli=1&supportedpurview=project

Google API Console

b. Click on “CREATE PROJECT”

c. Provide “Project name” and Click on “CREATE”

Google API Console — Create Project

d. Click on “CREATE CREDENTIALS” and select “OAuth client ID”

Google API Console — OAuth Client ID

e. Click on “CONFIGURE CONSENT SCREEN”

Google API Console — Configure Consent Screen

f. Select option “External” and Click on “CREATE”

Google API Console — External

g. Fill AppName, User support email, Developer contact information.
Click on “SAVE AND CONTINUE”

Google API Console — App detail
Google API Console — Developer detail

h. Continue clicking on “SAVE AND CONTINUE” for Scopes & Test users screen.
In this post, application does not restrict on any scope. Any verified valid google user will be granted access to our application.

i. Scroll down on SUMMARY page and Click on “BACK TO DASHBOARD”

j. Fill information on “Create OAuth client ID” as stated in screenshot

Google API Console — Create OAuth Client ID

k. Client Id and Secret will be generated. Make note of both keys, as these generated keys are needed to be used in application.

Google API Console — Created OAuth Client ID

3. Enhance Angular application with Google Login

We will be adding ‘Login’ button on home page.
On click of ‘Login’ button, user to be prompted with Google Login Interface to allow user to submit username and password. On successful google user validation, we will be showing username and LogOff button on navigation bar.
To handle feature LogIn, LogOff & manage user detail , we will be adding an Angular Service.

We are majorly focusing on technical coding without much concentrating on styling and look of UI.

a. Open Visual Studio Code

b. Install SocialLoginModule
Open terminal and run below command -
>> npm install angularx-social-login

Install SocialLoginModule

c. Create login service.
Open terminal and run below command.
>> ng g s service/AppLogin

Angular CLI — Create Service

A service file app-login.service.ts is created inside folder ‘service’.
Modify code in file app-login.service.ts to use SocialAuthService signIn and signOut api with google provider.

AppLoginService with Google LogIn, LogOut API

d. Project structure

Project Structure after Service addition

e. Modify HomeComponent template to provision ‘Login’ button.
*ngIf is used in template to show/hide ‘Welcome’ text on successful login.

HomeComponent template with Login feature

f. Modify HomeComponent to catch OnClick event of ‘Login’ button.
We are accessing AppLoginService service properties in HomeComponent template, so make sure in HomeComponent constructor to mention access specifier of AppLoginService as ‘public’.

HomeComponent with Login click event

g. Open app.module.ts and import GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule.
Add GoogleLoginProvider configuration in providers section of AppModule.

Make sure to keep provider name as
provide: ‘SocialAuthServiceConfig’

Mention your google client id generated in step ‘2.k’, inside ‘GoogleLoginProvider’

AppModule with GoogleLoginProvider

h. Modify AppComponent template to provision ‘LogOff’ button.

AppComponent with LogOff button

i. Modify AppComponent to catch on click event of ‘LogOff’ button.

AppComponent with LogOff event

4. Run the application

a. Use below command in terminal of Visual Studio Code
>> npm start

Run Application

b. After command runs successfully, open URL: http://localhost:4200 browser as stated in the command logs.

Application Login Page

c. Click on ‘Login’ button and submit your google credentials. On successfully validation of credentials by google, our app will show user name and LogOff button in navigation bar.

Application after Login

What next

This application can be enhanced by passing logged in user details to backend web service. The user details can be validated with Google from backend web service and then map with our application specific registered user.
I will be covering it in our next post to be published soon.
Stay tuned!

Thank you for reading. If you like this post, give a Cheer!!!
Happy Secure Coding ❤

Enthusiastic Full-Stack Developer | Java | Dot Net | Angular | CSS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store