How to Implement Firebase Google Sign In and Phone Number Authentication in Angular in 2023

Article by: Manish Methani

Last Updated: September 23, 2021 at 10:04am IST
7 min 36 sec

Firebase provides several authentication options, including Google Sign-In and Phone Number Authentication. In this tutorial, we will show you how to implement both of these authentication methods in an Angular application using Firebase.

Prerequisites:

  • Node.js and npm installed on your machine
  • Angular CLI installed
  • A Firebase account with a project set up

You can refer the video of this topic in case you get any doubts. Make sure to subscribe the channel and press the bell icon for latest updates on posts like this.

Step 1: Create a new Angular project by running the following command in your terminal:

ng new my-firebase-app

Navigate into the project directory by running:

cd my-firebase-app

Step 2: Install Firebase dependencies Install the Firebase dependencies by running the following command:

npm install firebase @angular/fire --save

This will install Firebase and AngularFire, which is an Angular library for Firebase.

Step 3: Create a Firebase project and configure Firebase in your Angular app

  1. Go to the Firebase Console and create a new project.
  2. Click on "Add app" and select "Web".
  3. Register your app by entering a name and clicking on "Register app".
  4. Copy the Firebase configuration object that appears and add it to your Angular environment file. You can create a new environment file by running:
ng g c environments/environment

In the environment file, add the following code:

export const environment = {
    production: false,
    firebase: {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      databaseURL: "YOUR_DATABASE_URL",
      projected: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    }
  };

Replace the placeholder values with the values from your Firebase configuration object.

5. Import the environment file in your Angular app.module.ts file and initialize Firebase:

    import { NgModule } from "@angular/core";
    import {AngularFireModule} from "@angular/fire/compat";
    import { AngularFireAuthModule } from "@angular/fire/compat/auth";
    import { SignINComponent } from "./sign-in/sign-in.component";
    import { environments } from "./environments/environment";
    @NgModule({
      declarations: [
        AppComponent,
        SignINComponent,
       ],
    @NgModule({
      imports: [
        AngularFireAuthModule,
        AngularFireModule.initializeApp(environments),
        provideFirebaseApp(() => initializeApp(environments)),
    
        provideFirestore(() => getFirestore()),  ]
    })
    export class AppModule { }

Step 4: Implement Google Sign-In authentication

  1. Go to the Firebase Console and enable Google Sign-In in the Authentication tab.
  2. In your Angular component where you want to implement Google Sign In, import the AngularFireAuth module:

Lets create sign-in component using this command

ng g component sign-in

Add a sign-in component to your app-routing.module.ts file

The complete Code of the app-routing.module.ts file is here.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { SignINComponent } from "./sign-in/sign-in.component";

const routes: Routes = [ 
{ path: "", redirectTo: "sign-in", pathMatch: "full"},
{ path: "sign-in", component: SignINComponent  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 

Now we are done with the installation and initialization part of the modules. Its time to create the UI in sign-in component where we will provide the users a way to Sign in with Google or sign in using Phone number Authentication. The complete code of sign-in component is here,

Before referring to the code, make sure you have created an AuthService using this command.

ng g s AuthService

In this service file, we have implemented all the Authentication methods which we will use in our sign-in component.

Code of auth.service.ts file is

import { Injectable } from "@angular/core";
import { GoogleAuthProvider,signOut,getAuth } from "firebase/auth";
import { AngularFireAuth } from "@angular/fire/compat/auth";
import { Router } from "@angular/router";

@Injectable({
  providedIn: "root",
})
export class AuthService {
  constructor(public router: Router,
    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:any) {
    return this.afAuth
      .signInWithPopup(provider)
      .then((result) => {
      
        //Sessions
        let JsonData = {
          name: result.user?.displayName,
          email: result.user?.email
        }
        
        localStorage.setItem("data", JSON.stringify(JsonData));
       
        this.router.navigate(["dashboard"]);
        console.log("You have been successfully logged in!" + result.user?.displayName);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  signOut()
  {
    const auth = getAuth();
    localStorage.clear();
    signOut(auth).then(() => {
      // Sign-out successful.
      this.router.navigate(["login"]);
 
    }).catch((error) => {
      // An error happened.
    });
  }
}
 

Code of sign-in.component.ts file is

import { Component, Injectable, NgZone, OnInit } from "@angular/core";
import { AuthService } from "../shared/auth.service";
import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from "firebase/auth";
import { WindowService } from "../window.service";
import {FormBuilder, Validators} from "@angular/forms";
import { Router } from "@angular/router";

@Component({
selector: "app-sign-in",
templateUrl: "./sign-in.component.html",
styleUrls: ["./sign-in.component.css"]
})

export class SignINComponent {
mobileNumberString:string = "";
verifyOtpString:string = "";
winRef:any;

constructor(public authService: AuthService, windowRef: WindowService, private _formBuilder: FormBuilder, private router: Router) {
this.winRef = windowRef;
}

sendLoginOtp()
{
const auth = getAuth();
this.winRef.recaptchaVerifier = new RecaptchaVerifier("recaptcha-container", {
"size": "invisible",
}, auth);

const appVerifier = this.winRef.recaptchaVerifier;

signInWithPhoneNumber(auth, this.mobileNumberString,appVerifier)
.then((confirmationResult) => {

// SMS sent. Prompt user to type the code from the message, then sign the

// user in with confirmationResult.confirm(code).

this.winRef.confirmationResult = confirmationResult;
(document.getElementById("otpField") as HTMLElement).style.display = "inline-block";

(document.getElementById("verifyBtn") as HTMLElement).style.display = "inline-block";

}).catch((error) => {

// Error; SMS not sent
// ...
});
}

verifyOtp()
{
this.winRef.confirmationResult.confirm(this.verifyOtpString).then((result:any) => {

// User signed in successfully.
const user = result.user;
this.router.navigate(["dashboard"]);
// ...
}).catch((error:any) => {

// User could not sign in (bad verification code?)
// ...
});
}
}

Code of sign-in.component.html file is here,

<div style="background: #FFDF58; height:100vh;">
<div class="container bg-white text-center" style="border-radius:12px;position:absolute;top:60px;left:10%;padding:20px;">

<div class="row">
<div class="col-lg-12">
<img src="../../assets/codzfy_logo.png" width="60" style="padding-top: 20px;;"><br/><br/>

<h1 style="font-size: 44px;;"><b>Codzify GenZ School</b></h1>

<button style="background-color: transparent;border:none; " (click) = "authService.GoogleAuth()">

<img src="../../assets/btn_google_signin_light_normal_web@2x.png" style="width: 60%;" >
</button>

<p>or</p>

<div id="recaptcha-container"></div>
<mat-form-field appearance="outline">
<mat-label>Mobile Number</mat-label>
<input matInput placeholder="Mobile Number" [(ngModel)]="mobileNumberString" required>
</mat-form-field>

&nbsp;<br/>

<mat-form-field appearance="outline" id="otpField" >
<mat-label>Enter OTP</mat-label>
<input matInput placeholder="Enter OTP" [(ngModel)]="verifyOtpString" required>
</mat-form-field>

<br/>

<button class="btn btn-primary" (click) ="sendLoginOtp()">Send OTP</button> &nbsp;

<button class="btn btn-primary" id="verifyBtn" (click) ="verifyOtp()">Verify OTP</button>
</div>
</div>
</div>
</div>

Code of sign-component.css file is


#verifyBtn
{
display: none;
}

#otpField
{
display: none;
}

Final Output is

I hope you got a solid understanding of how to implement Google Sign-in and Phone Number Authentication in Angular.

You can refer the video of this in case you get any doubts.

Explore Codzify Courses

PREMIUM

Learn to create the Dating App using No-Code Tool FlutterFlow

Level: Advanced

Course Fees: INR 1299/-

Apply Coupon Code: UNLOCK

4 days 100% Money Back Guarantee

Explore Curriculum
PREMIUM

Flutter Mobile App Development Course

Level: Intermediate

Course Fees: INR 1299/-

4 days 100% Money Back Guarantee

Explore Curriculum
PREMIUM

The Complete Angular Course

Level: Beginners

Course Fees: INR 1299/-

4 days 100% Money Back Guarantee

Explore Curriculum
PREMIUM

Dart Programming for Absolute Beginners

Level: Beginners

Course Fees: INR 1299/-

4 days 100% Money Back Guarantee

Coming Soon
FREE

Next.js course

Level: Beginners

Course Fees: FREE

Start Watching
FREE

Fundamentals of Computer Programming Languages

Level: Beginners

Course Fees: FREE

Start Watching
FREE

Learn HTML, CSS & Bootstrap

Level: Beginners

Course Fees: FREE

Start Watching

Latest Web Stories

1

Learn how to open WhatsApp using FlutterFlow | Step by Step Guide

Test your skills with these expert-led curated
Mock Tests.

C Programming Test

Test your C Programming skills with this comprehensive mock test on C Programming.

Take Test

Flutter Test

Solve most asked Interview Questions on Flutter and Test your foundational skills in flutter.

Take Test

GATE(CSE) Operating Systems

Solve most asked GATE Questions in Operating Systems and test your Gate Score.

Take Test

HTML,CSS Test

This is a mock test designed to help you assess your knowledge and skills in HTML and CSS.

Take Test

(GATE CSE) Data Structures & Algorithms Test

Solve most asked GATE Questions in Data Structures and Algorithms and test your Gate Score.

Take Test

Download the Codzify
Mobile App


Learn Anytime, Anywhere at your own pace. Scan the QR Code with your Mobile Camera to Download the Codzify Mobile App.

Codzify Mobile App Codzify Mobile App
Codzify Logo

Terms and Conditions    Cookie Policy   Refund Policy   Adsense Disclaimer