Learn Google One Tap integration with Firebase and Angular

Learn how to built powerful user onboarding with Google One Tap and increase the conversion using Firebase & Angular. #angularDev #firebaseDev #googledevs #bestoffirebase #firebaseweekly

Learn Google One Tap integration with Firebase and Angular
Getting started with google one tap using angular - mobilelabs.in

User onboarding process is a channeling part, better user experience will increase user conversion rate. Designing simplified onboarding process is always is not easy.

Today, We will look into what is Google One Tap and how we can improve the user onboarding experience with Firebase in Angular project.

What is Google One Tap

One Tap is new cross-platform solution provided by the Google that enables the users to sign up with a single tap. Users can simply tap and login from any platform without traditional authenticating steps.

One Tap Automatic sign-in feature increases the registration conversion with simple user experience.

Who is using One Tap

  1. Medium
  2. Groww

How to Setup Google One Tap

Create google console project and get the Google Client ID.

Google Cloud Official steps to create new project in google cloud.

What you need

  • Google Cloud Project
  • Firebase Project
  • Starter Angular Project

Add One Tap Library

Add this in the index.html inside you angular project.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>OneTap</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</body>
</html>

Create auth.service.ts ng g s auth

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';
import { BehaviorSubject } from 'rxjs';
declare var window: any;

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user = new BehaviorSubject<any>(this.fireAuth.currentUser);
  constructor(
    private fireAuth: AngularFireAuth
  ) {
    this.init();
  }

  init(): void {
    window.onload = () => {
      window.google.accounts.id.initialize({
        client_id: environment.client_id,
        callback: (token) => {
          this.handle(token);
        }
      });
    };
    this.fireAuth.onAuthStateChanged((user) => {
      this.user.next(user);
      if (!user) {
        window.google.accounts.id.prompt();
      }
    });
  }

  handle(token): void {
    const credential = auth.GoogleAuthProvider.credential(token.credential);
    this.fireAuth.signInWithCredential(credential);
  }

  signOut(): void {
    this.fireAuth.signOut();
  }
}
environment.client_id - You should use your own client ID obtained from the previous step.

init function will initialize the google tap library and onAuthStateChanged will listen for the firebase user state change.

handle function is triggered when the user clicks on the one tap UI with Auth credentials and creates user in firebase using signInWithCredential

Arguments: { clientId, credential, select_by }
Google One Tap - Preview
Created by mobilelabs

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'one-tap';
  $user: any;
  constructor(
    private authService: AuthService
  ) { }

  ngOnInit(): void {
    this.$user = this.authService.user;
  }

  signOut(): void {
    this.authService.signOut();
  }
}
Google One Tap Integration with Angular

Supported browsers

One Tap sign-up and auto sign-in works in the following browser and platform combinations

Google one tap - supported browsers
Created by mobilelabs
As the library is security sensitive, only the latest two versions of each browser are officially supported. The client library isn't guaranteed to work on any other browser or platform.

Full source is available here

Conclusion

We have seen what is google one tap and how to integrate it with angular using firestore project.

If you enjoyed this story, please share it to help others find it!