# 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** &#x20;
   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](https://developers.google.com/identity/protocols/oauth2/scopes?authuser=5), 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/>&#x20;
   4. Under Authorized redirect URIs, put <http://localhost:4200/>&#x20;
   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

```javascript
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

```markup
    <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

```javascript
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.

![](/files/-MUUIZLOggvBkehvXkqi)

## 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://owen31302.gitbook.io/github-education/util/google-sign-in-with-angular-front-end.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.