Google Sign-in with Angular Front End

Here is Google sign-in official website:

https://developers.google.com/identity/sign-in/web/sign-in

However, I found Angular Social Login library will be easier to use:

https://www.npmjs.com/package/angularx-social-login

Implementation

Get credentials on Google developers console

Go to this url https://console.developers.google.com/apis/credentials and login with your google account.
Create a new project if you don't have one.
You need to register OAuth consent form screen
1. Under App information section, put your apps basic info.
2. Under App domain section, put http://localhost:4200/ as your application home domain.
3. Under Authorized domains, leave it as blank
4. On Scopes tab, choose the information you request users to authorize for your app.
5. On Test users tab, you can only test with test user for 100 times if you have sensitive scope logins, and put your testing google account here.
6. On summary tab, you can review the information.
Once you have the OAuth consent form, you can create Credentials now
1. Select OAuth clientID
2. Select Web application as Application type
3. Under Authorized JavaScript origins, put http://localhost:4200/
4. Under Authorized redirect URIs, put http://localhost:4200/
5. Once completed, it will pop up Your Client ID and Your Client Secret which will be used in your angular app.

It's simple to follow the steps on the official web site.

https://www.npmjs.com/package/angularx-social-login

Settings in app.module.ts file

Add SocialLoginModule
Add your app client ID in the providers

import {GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule} from 'angularx-social-login';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    SocialLoginModule
  ],
  providers: [
    ...,
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'your app client ID'
            )
          }
        ]
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add a login button at your html

    <button 
      mat-button 
      *ngIf="!loggedIn"
      color="warn" 
      (click)="signInWithGoogle()">Login</button>
    <span *ngIf="loggedIn">
      {{user.name}}
    </span>

At your type script file, call google api with angularx-social-login

import {GoogleLoginProvider, SocialAuthService, SocialUser} from 'angularx-social-login';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  user: SocialUser;
  loggedIn: boolean;

  constructor(private authService: SocialAuthService) { }

  signInWithGoogle(): void {
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }

  ngOnInit(): void {
    this.authService.authState.subscribe((user) => {
      this.user = user;
      console.log(user);
      this.loggedIn = (user != null);
    });
  }
}