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

1. Go to this url https://console.developers.google.com/apis/credentials and login with your google account.

2. Create a new project if you don't have one.

3. 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.

4. 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.

Angular Social Login library

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

1. Add SocialLoginModule

2. 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);
    });
  }
}

Check your browser console to see if you get the response from Google.

Ref

https://codinglatte.com/posts/angular/sign-in-with-google-angular/

https://levelup.gitconnected.com/sign-in-with-google-oauth-in-angular-8-e716ed7f3b2f

https://saikiran1298.medium.com/implementing-google-authentication-in-angular-and-node-js-application-31f49301673c

Client Id

https://stackoverflow.com/questions/53622075/what-prevents-another-app-from-stealing-my-google-oauth-client-id

https://stackoverflow.com/questions/22266729/google-oauth-keeping-the-client-id-secret