Angular 15 Firebase Login with Google Tutorial
I am going to explain how to create Firebase Google login Auth system in Angular. Firebase provides various features for the user authentication system. To create firebase auth service with Google you must know how to use this powerful real-time database.
You can easily implement Angular Firebase Google login auth service to let your users to authenticate with Google API with Angular app. I will be using Angular CLI AND AngularFire2 library from the node package manager (NPM).
Step: 1 – Install Angular App
ng new angularfirebaseproject
Your basic project will be set up after that enter into the project folder by using the following command.
cd angularfirebaseproject
Next, to remove strict type warnings or error make sure to set “strict”: false under compilerOptions property in tsconfig.json file.
Step: 2 – Setup AngularFire2 Library in Angular
Now setup Firebase (AngularFire2 library) in your Angular project.
npm install firebase @angular/fire --save
Once you are done setting up this library, make the connection between your Firebase account and your Angular app.
Go to src/environments/environment.ts
file in your project’s environments folder. Then add firebase configuration in environment file as given below.
export const environment = {
production: false,
firebase: {
apiKey: "xxxxxxxx-xxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxx",
storageBucket: "xxxxxxxx",
messagingSenderId: "xxxxxx",
appId: "xxxxx",
measurementId: "xxxxxxxxxxxxxxxx"
}
};
Step: 3 – Enable Google Auth Provider Service in Firebase Account
Go to your Firebase account and click on Authenticate button on the sidebar navigation menu then click in front of the Google link.
Enter your Project name and project support email token then click on the save button. This method will activate your Google auth provider service from Firebase backend.
Step: 4 – Create Auth Service and Sign in component
Create auth.service.ts
core file which will hold our main logic.
ng generate service auth
Create Sign in the template
ng generate component signin
Step: 5 – Generate Main Auth Service
Go to your auth.service.ts
template.
import { Injectable } from '@angular/core';
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
@Injectable({
providedIn: 'root',
})
export class AuthService {
constructor(
public afAuth: AngularFireAuth // Inject Firebase auth service
) {}
// Sign in with Google
GoogleAuth() {
return this.AuthLogin(new GoogleAuthProvider());
}
// Auth logic to run auth providers
AuthLogin(provider) {
return this.afAuth
.signInWithPopup(provider)
.then((result) => {
console.log('You have been successfully logged in!');
})
.catch((error) => {
console.log(error);
});
}
}
Go to your signin.component.ts
template.
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css'],
})
export class SignInComponent implements OnInit {
constructor(public authService: AuthService) {}
ngOnInit() {}
}
Step: 6 – Implement Google Login Auth Provider Service in Angular HTML Template
Integrate Google login service in signin.component.html
template.
<div class="formGroup">
<button type="button" (click)="authService.GoogleAuth()">
Log in with Google
</button>
</div>
Here is the final reference of app module class, you may add the given code in the the app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { SignInComponent } from './signin/signin.component';
@NgModule({
declarations: [AppComponent, SignInComponent],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
],
providers: [AuthService],
bootstrap: [AppComponent],
})
export class AppModule {}
Make sure to evoke the auth components by adding the given tags in app.component.ts file.
<app-signin></app-signin>
We are ready to view the application on the browser.
ng serve --open
Read more: Complete Angular Firebase Authentication Tutorial
You can download the full code of this tutorial from GitHub.