Google OneTap in Angular Universal

Question

I'd like to implement Google OneTap in my Angular Universal app (that uses SSR). I'm using Angular 11, and the following script was working before converting the app to Angular Universal:

initGoogleOneTap() {
  const domain = window.location.hostname;
  google.accounts.id.initialize({
    client_id: environment.GOOGLE_OAUTH_CLIENT_KEY,
    cancel_on_tap_outside: false,
    auto_select: true,
    state_cookie_domain: domain,
    callback: (response: any) => {
      this.oneTapLogIn(response.credential)
        .catch( (error) => {
          console.error('Error logging in with Google One Tap: ', error);
        });
    },
  });

  google.accounts.id.prompt( (notification: any) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}

I am using declare var google: any at the top of the script.

The error I am getting is: ERROR ReferenceError: google is not defined

Answer 1

First, load client library by putting this in your index.html

<script src="https://accounts.google.com/gsi/client" async defer></script>

Then, implement your component like this

declare var window: any;

ngOnInit() {
  window.google.accounts.id.initialize({
    client_id: 'YOUR CLIENT ID',
    callback: this.handleGgOneTap.bind(this)
  });
  window.google.accounts.id.prompt();
}

handleGgOneTap(resp) {
  console.log('handleGgOneTap ', resp);
}