Angular 13 social login with google; Through this tutorial, i am going to show you how to integrate google social login or signin in angular 13 apps.
Angular 13 Google Social Login
Follow the below given steps to add google social login in angular 13 apps; as follows:
- Step 1 – Create Google Login App
- Step 2 – Create New Angular App
- Step 3 – Install Social Google Login Library
- Step 4 – Import Modules on App.Module.ts File
- Step 5 – Create Goolge Login View
- Step 6 – Add Code On App.Component ts File
- Step 7 – Start the Angular Google Login App
Step 1 – Create Google Login App
- Open the Google API Console. If you don’t have a Google account, select More options > Create account and then fill in the form to create an account.
- From the projects list, select a project or create a project.
- Open the API Library.
- Search the API Library for the Google Play Custom App Publishing API.
Step 2 – Create New Angular App
Run the following command on command prompt to install angular app:
ng new my-new-app
Step 3 – Install Social Login Library
Install NPM package called angularx-social-login and bootstrap library for implement google social login in angular 11 app. So, You can install the packages by executing the following commands on the terminal:
npm install --save bootstrap npm install --save angularx-social-login
After that, open angular.json file and update the following code into it:
"styles": [
...
"node_modules/bootstrap/dist/css/bootstrap.min.css"
...
],
"scripts": [
...
"node_modules/bootstrap/dist/js/bootstrap.min.js"
...
]
Step 4 – Import Modules on App.Module.ts File
Go to src/app directory and open app.module.ts file. And please add YOUR-GOOGLE-CLIENT-ID in following code. Then add the following lines of into app.module.ts file:
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, AuthServiceConfig } from 'angularx-social-login';
const config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("YOUR-GOOGLE-CLIENT-ID")
}
]);
export function provideConfig() {
return config;
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
SocialLoginModule
],
providers: [
{
provide: AuthServiceConfig,
useFactory: provideConfig
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5 – Create Goolge Login View
Go to src/app/app.component.html and add the following code into it:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Angular 13 Google Social Login - Laratutorials.com</title>
</head><body class="bg-light">
<div class="container">
<div class="row py-5 justify-content-center">
<div class="col-md-8">
<h1 class="text-center py-4">Angular 13 Sign In with Google - Laratutorials.com</h1>
<div *ngIf="loggedIn===false">
<div>
<button type="button" (click)="signInWithGoogle()" class="btn btn-primary">Sign In With Google</button>
</div>
</div>
<div *ngIf="loggedIn===true">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" id="firstname" [value]="user.firstName" readonly >
</div> <div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" [value]="user.lastName" readonly >
</div> <div class="form-group">
<label for="email2">Email</label>
<input type="text" class="form-control" id="email2" [value]="user.email" readonly >
</div>
<button type="button" (click)="signOut()" class="btn btn-primary">Sign Out</button> </div>
</div>
</div>
</div>
</body>
</html>
Step 6 – Add Code On App.Component ts File
Go to the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService,GoogleLoginProvider, SocialUser } from 'angularx-social-login';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
signinForm: FormGroup;
user: SocialUser;
loggedIn: boolean;
constructor(private fb: FormBuilder, private authService: AuthService) { }
ngOnInit() {
this.signinForm = this.fb.group({
email: ['', Validators.required],
password: ['', Validators.required]
}); this.authService.authState.subscribe((user) => {
this.user = user;
this.loggedIn = (user != null);
console.log(this.user);
});
}
signInWithGoogle(): void {
this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
}
signOut(): void {
this.authService.signOut();
}
}
Step 7 – Start the Angular Google Login App
Run the following command on command prompt to start angular google social login app:
ng serve
Be First to Comment