In this tutorial you will learn about the Angular 11 Google OAuth Social Login Example Tutorial and its application with practical example.
In this Angular 11 Google OAuth Social Login Example Tutorial I will show you how to create Google social login in angular. In this tutorial you will learn to build fully functional google login using Google OAuth Client ID or Google API in angular application. In this example we will be using angularx-social-login library to implement google login in angular.
Angular 11 Google OAuth Social Login Example Tutorial
In this step by step tutorial I will demonstrate you to build Google OAuth Social Login in angular application. Please follow the instruction given below:
- Step 1: Create Angular Project
- Step 2: Get OAuth Client ID
- Step 3: Install Angular Social Login Library
- Step 4: Implement Google OAuth Signin
- Step 5: Test Login with Google.
Create Angular Project
First of all we need to make sure to have Angular CLI installed on your system:
|
1 |
npm install -g @angular/cli |
Now, we need to create a fresh angular project, Create the angular application using the below command
|
1 |
ng new login-with-angular-demo |
Now, switch to the project directory:
|
1 |
cd login-with-angular-demo |
Next, we will install Bootstrap package in our project. Now run the following command to install bootstrap package:
|
1 |
npm install bootstrap |
Add the Bootstrap main CSS in the styles array as shown here:
|
1 2 3 4 |
"styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css" ] |
Create Google App
In this step we will obtain the client id to create the signin with google in angular.
- Step 1: Visti the Google Developer Console and follow the suggested process:
- Step 2: On the google developer console, click on the “create project” button to create auth API.
- Step 3: On the New Project screen, you need provide the project name along with any required information. Click on the CREATE button.
- Step 4: Now, go to the OAuth consent screen, choose the External option. This will help you choose to configure and register Google auth API for specific users.
- Step 5: Now, you need to provide application home page url, application privacy policy link, application terms of service link, or other mandatory details.
- Step 6: After that, a form will be appear. Please select Web application from application type options. Once you have select Web application option, then one form will appear on web page. Here you have to define Name and you have also define Authorized redirect URIs field and lastly click on Create button.
- Step 7: Lastly, OAuth client screen will appear, from here you can get your Client ID and your client secret key.
Install Angularx Social Login Package
Now, open the console then run following command to install the angularx-social-login package.
|
1 |
npm i angularx-social-login |
Next you need to set the google client id inside the GoogleLoginProvider() method.
Open and add the given code in app.module.ts file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ReactiveFormsModule } from '@angular/forms'; import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login'; import { GoogleLoginProvider } from 'angularx-social-login'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, ReactiveFormsModule, SocialLoginModule ], providers: [ { provide: 'SocialAuthServiceConfig', useValue: { autoLogin: false, providers: [ { id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider( 'Google-Client-ID' ) } ] } as SocialAuthServiceConfig, } ], bootstrap: [AppComponent] }) export class AppModule { } |
Implement Google OAuth Signin in Angular
Open and update below code in app.component.html file:
