Login With Google In Angular
To implement Google Sign-In in an Angular application, you'll need to follow a few steps. Here's a step-by-step guide along with the code snippets:
Step 1:
Visit
Google developer console
and follow the below steps.
click on the marked button show in the image
Step 2: Create a new project by clicking on NEW PROJECT button
Step 3: Define Project name as show in the image
Step 4: Now select EXTERNAL in user type option and click Create
Step 5: Now in the next screen, you need to define the urls: this is the demo project so I have entered localhost.
Step 6: Next, click on the Create Credentials.
Step 7: Next, choose OAuth client ID from the options.
Step 8: Next, choose Web application from the application type options.
Step 9: Next, scoll down on the same page and define your URL app under the Authorized JavaScript origins options.
Step 10: Ultimately, the OAuth client popup opens on the screen, from here you can copy Your Client Id or client secret
Install the angularx-social-login plugin
npm i @abacritt/angularx-social-login
Now the actual coding part comes into the picture, write the below code in your project.
login.component.ts
import { Component, OnInit } from '@angular/core';
import { SocialAuthService, GoogleLoginProvider } from '@abacritt/angularx-social-login';
import { SocialUser } from '@abacritt/angularx-social-login';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
user: SocialUser | undefined;
GoogleLoginProvider = GoogleLoginProvider;
constructor(private readonly _authService: SocialAuthService) {}
ngOnInit() {
this._authService.authState.subscribe((user) => {
this.user = user;
});
}
signOut(): void {
this._authService.signOut();
}
refreshGoogleToken(): void {
this._authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);
}
}
login.component.html
<div class="d-flex h-100 justify-content-center align-items-center">
<div class="mx-auto app-login-box col-md-8">
<div class="modal-dialog w-100 mx-auto" *ngIf="!user">
<div class="modal-content">
<div class="modal-body">
<div class="h5 modal-title text-center">
<h4 class="mt-2">
<div>Welcome back</div>
<span>Please sign in to your account below.</span>
</h4>
</div>
<form class="">
<div class="row">
<div class="col-md-12">
<div class="position-relative mb-3">
<input name="email" id="exampleEmail" placeholder="Email here..." type="email" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="position-relative mb-3">
<input name="password" id="examplePassword" placeholder="Password here..." type="password" class="form-control">
</div>
</div>
</div>
<div class="position-relative form-check">
<input name="check" id="exampleCheck" type="checkbox" class="form-check-input">
<label for="exampleCheck" class="form-label form-check-label">Keep me logged in</label>
</div>
</form>
<div class="divider"></div>
<h6 class="mb-0">No account? <a href="javascript:void(0);" class="text-primary">Sign up now</a></h6>
</div>
<div class="modal-footer clearfix">
<div class="float-start">
<button class="btn btn-primary btn-lg">Login to Dashboard</button>
</div>
<p></p>
<div class="float-end ms-2">
<asl-google-signin-button></asl-google-signin-button>
</div>
</div>
</div>
</div>
<div class="card w-100 mx-auto" *ngIf="user">
<div class="card-body">
<div *ngIf="user" class="card text-center">
<h6 class="card-header">Social Login Demo</h6>
<div class="card-block"></div>
<div class="card-block">
<h4 class="card-title">{{ user.name }}</h4>
<p class="card-text">{{ user.email }}</p>
<p class="card-text">Logged in with {{ user.provider }}</p>
</div>
<div class="card-block">
<button class="btn btn-danger" (click)="signOut()">Sign out</button>
</div>
<div
class="card-block"
*ngIf="user.provider === GoogleLoginProvider.PROVIDER_ID"
>
<button class="btn" (click)="refreshGoogleToken()">
Refresh google token
</button>
</div>
</div>
</div>
</div>
</div>
</div>
login.component.css
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
font-size: .88rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: left;
background-color: #fff;
}
.modal-dialog {
box-shadow: 0 0.76875rem 2.4875rem rgba(52,58,64,.3), 0 1.3375rem 1.70625rem rgba(52,58,64,.3), 0 0.55rem 0.53125rem rgba(0,0,0,.05), 0 0.225rem 0.4375rem rgba(52,58,64,.3);
border-radius: 0.25rem;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-footer {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #e9ecef;
border-bottom-right-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
}
.btn {
position: relative;
transition: color .15s,background-color .15s,border-color .15s,box-shadow .15s;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 1rem;
}
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
.app-login-box h4 {
margin-bottom: 1.5rem;
font-weight: 400;
}
.app-login-box h4 div {
opacity: .6;
}
.app-login-box h4 span {
font-size: 1.1rem;
}
.btn-primary {
color: #fff;
background-color: #3f6ad8;
border-color: #3f6ad8;
}
.btn {
font-size: .8rem;
font-weight: 500;
}
h6 {
font-family: inherit;
font-weight: 400;
line-height: 1.2;
color: inherit;
}
a {
color: #3f6ad8;
text-decoration: none;
background-color: transparent;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule, } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
import { GoogleLoginProvider } from '@abacritt/angularx-social-login';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
SocialLoginModule,
BrowserAnimationsModule
],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider('106109315042-5o208ed6m94o3r1ihvd8ufghcgbat4nk.apps.googleusercontent.com'),
},
],
} as SocialAuthServiceConfig,
},
],
bootstrap: [AppComponent]
})
export class AppModule { }
Finally, the angular login with Google blog is endded; in this blog, you learned how to signin with google in angular using the Google client id. I hope you will love this step by step guide and share it with others.