Google Sign-in with Angular Front End

PreviousGoogle Search Console NextGoogle Sign-in with Nodejs Backend

Last updated 4 years ago

Was this helpful?

Google Sign-in with Angular Front End

Here is Google sign-in official website:

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

Implementation

Get credentials on Google developers console

Go to this url 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 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 , 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
4. Under Authorized redirect URIs, put
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.

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

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

Ref

Client Id