Search code examples
angularoauth-2.0google-signingoogle-api-js-client

how to allow all users to do a sign in with google account


so i created an angular project in which i have button google sign in . the problem is that i must allow the user to connect by adding he's address email in Google API Console so my question is how can i allow the access to all user and know if the user has signed up before or not !! the following code is

<button (click)="signIn()" *ngIf="user == null">GOOGLE SIGNIN</button>
<button (click)="signOut()" *ngIf="user != null"> GOOGLE SIGNOUT</button>
<div *ngIf="user !=null">
  <div> Full Name: {{user.getBasicProfile().getName()}} </div>
  <div> Given Name: {{user.getBasicProfile().getGivenName()}} </div>
  <div> Family Name: {{user.getBasicProfile().getFamilyName()}} </div>
  <!-- <div> Image URL:{{user.getBasicProfile().getImageUrl()}} </div> -->
  <img src={{user.getBasicProfile().getImageUrl()}}>
  <div> Email: {{user.getBasicProfile().getEmail()}} </div>

so in app.component.html i get the information of the user i want to add also an information if it's a new user or not how can do it


Solution

  • To implement sign in with google in Angular you have to follow given steps:

    1. Create a google app in google cloud console platform and generate a client id.

    2. Create a new angular application.

    3. Implement login with google using google OAuth 2.0 protocol.

    You can read my article on Codingvila Angular 14 Login with Google using OAuth 2.0 where I explained everything step by step with example.

    You can also download the sample example for your practice.