Is there a way for me to access the user's gender and birthday following their login using their Google account details?

Question

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

I have successfully implemented a Google sign-in button in my Angular application following the example provided in Display the Sign In With Google button:

<div id="g_id_onload"
   class="mt-3"
   data-client_id="XXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com"
   data-login_uri="http://localhost:1337/login/google"
   data-auto_prompt="false">
</div>
<div class="g_id_signin"
   data-width="250"
   data-type="standard"
   data-size="large"
   data-theme="outline"
   data-text="continue_with"
   data-shape="rectangular"
   data-logo_alignment="center">
</div>

Upon user sign-in, I validate and decode the JWT token supplied by Google on my Express server using jsonwebtoken:

app.post('/login/google', express.urlencoded(), async(request, response, next) => {
    try {
        console.log(`${request.method} ${request.url} was called.`);
        let token: string = request.body.credential;
        let body: Response = await fetch('https://www.googleapis.com/oauth2/v1/certs', { method: 'GET', headers: { Accept: 'application/json' }});
        let json: any = await body.json();
        let certificates: string[] = Object.keys(json).map(key => json[key]);
        let decoded: any;
        let lastError: any;
        certificates.every(certificate => {
            try {
                decoded = jwt.verify(token, certificate, { algorithms: ['RS256'], ignoreExpiration: false });
            }
            catch (error) { 
                lastError = error;
            }
            return !decoded;
        });
        if (!decoded)
            throw lastError;
    }
    catch (error) {
        next(error);
    }
});

However, I'm facing an issue where the decoded token does not include the user's gender or birthday information. How can I retrieve this data?

I recently attempted to manually add the scopes

https://www.googleapis.com/auth/user.birthday.read

and

https://www.googleapis.com/auth/user.gender.read

to my application's OAuth Consent Screen at , but the prompts for these additional data fields were not shown when running the application. I also revoked permissions for my application from my Google account at accounts.google.com and hoped that it would trigger the prompt for these extra data. However, I'm unsure of the correct approach to obtain this additional information since there seems to be limited documentation available on how to achieve this. Additionally, the Gender and Birthday information in my test account is set as Private in . Is there a way to access these private scopes somehow?

To clarify, despite adding the scopes, the sign-in only displays the standard confirmation prompt:

Confirm you want to sign in to [Application Name] with [User's Name].

To create your account, Google will share your name, email address, and profile picture with [Application Name].

I also experimented with https://developers.google.com/oauthplayground/ by inputting the scopes

https://www.googleapis.com/auth/userinfo.email,https://www.googleapis.com/auth/userinfo.profile,https://www.googleapis.com/auth/user.birthday.read,https://www.googleapis.com/auth/user.gender.read

, authorizing them, and accessing the People API endpoint to fetch the required data. Although the endpoint functions correctly, I am uncertain about the authorization parameters needed for this endpoint based on the data received from the POST request to my Express server. I also enabled the People API from Enabled APIs & services.

javascript typescript express oauth jwt

Answer 1

Answer №1

When using the signin feature, it returns an id token which contains limited claims and does not include gender information.

To access the full user profile info, you need to utilize the people api as mentioned.

You can try out a working example and generate a sample for yourself using the try me link.

<script src="https://apis.google.com/js/api.js"></script>
<script>
  // JavaScript code for interacting with Google People API

  function authenticate() {
    // Code for authentication
  }

  function loadClient() {
    // Code for loading client
  }

  function execute() {
    // Code for executing API call
  }

  // Load necessary library and initialize API client
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
  });
</script>
<button onclick="authenticate().then(loadClient)">Authorize and Load</button>
<button onclick="execute()">Execute</button>

If your implementation uses Oauth2 instead of open id connect (signin), you will need an access token for the above code to work. Ensure that your signin process provides an access token to feed into the code snippet above to avoid reauthorization.

I have not seen anyone successfully integrate the new signin system with the old oauth2 system yet. If you manage to do so, please share your findings.

Html

An access_token is required to call this API. Note that a Google access token is different from a JWT or id_token.

GET https://people.googleapis.com/v1/people/me?personFields=genders&key=[YOUR_API_KEY] HTTP/1.1

Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json

Answer 2

When using the signin feature, it returns an id token which contains limited claims and does not include gender information.

To access the full user profile info, you need to utilize the people api as mentioned.

You can try out a working example and generate a sample for yourself using the try me link.

<script src="https://apis.google.com/js/api.js"></script>
<script>
  // JavaScript code for interacting with Google People API

  function authenticate() {
    // Code for authentication
  }

  function loadClient() {
    // Code for loading client
  }

  function execute() {
    // Code for executing API call
  }

  // Load necessary library and initialize API client
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
  });
</script>
<button onclick="authenticate().then(loadClient)">Authorize and Load</button>
<button onclick="execute()">Execute</button>

If your implementation uses Oauth2 instead of open id connect (signin), you will need an access token for the above code to work. Ensure that your signin process provides an access token to feed into the code snippet above to avoid reauthorization.

I have not seen anyone successfully integrate the new signin system with the old oauth2 system yet. If you manage to do so, please share your findings.

Html

An access_token is required to call this API. Note that a Google access token is different from a JWT or id_token.

GET https://people.googleapis.com/v1/people/me?personFields=genders&key=[YOUR_API_KEY] HTTP/1.1

Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json

Answer 3

Answer №2

After following the instructions in this helpful guide, I was able to successfully get things up and running.

Instead of using the Google sign-in button due to limitations on extended scopes like birthday and gender, I turned to the OAuth API which supports these features. To create my own Google sign-in button, I utilized the googleapis package.

The process involved a few key steps:

Utilize the googleapis package to generate a URI that prompts users to consent to accessing gender and birthday information.

For instance:

app.get('/login/google/uri', async(request, response, next) => {
    try {
        // code snippet here
    }
    catch (error) {
        // error handling
    }
});

Ensure that your redirect URI (e.g.,
```
http://localhost:4200/login/google/redirect
```
) is added as an authorized redirect URI under your OAuth 2.0 Client ID Credentials in the Google Cloud Console.
Upon redirection by Google to your specified URI, extract the code parameter from the URL and exchange it for an access token.

Here's an example:

// code snippet here

Use the obtained access token when making requests to the People API and include it in the Authorization header as a bearer token.

This can be done as shown in this curl request format:

// curl command here

You should receive a response containing user details such as genders and birthdays.

In addition, here is a more API-friendly approach using the googleapis package:

First, generate the URI and direct the user accordingly:

// code snippet here

Secondly, after receiving the user's code post-sign-in, parse it and use it to retrieve extra user data like birthdays, genders, and emails:

// server-side POST method snippet goes here

The fetched data should now be available in the output.

Answer 4

After following the instructions in this helpful guide, I was able to successfully get things up and running.

Instead of using the Google sign-in button due to limitations on extended scopes like birthday and gender, I turned to the OAuth API which supports these features. To create my own Google sign-in button, I utilized the googleapis package.

The process involved a few key steps:

Utilize the googleapis package to generate a URI that prompts users to consent to accessing gender and birthday information.

For instance:

app.get('/login/google/uri', async(request, response, next) => {
    try {
        // code snippet here
    }
    catch (error) {
        // error handling
    }
});

Ensure that your redirect URI (e.g.,
```
http://localhost:4200/login/google/redirect
```
) is added as an authorized redirect URI under your OAuth 2.0 Client ID Credentials in the Google Cloud Console.
Upon redirection by Google to your specified URI, extract the code parameter from the URL and exchange it for an access token.

Here's an example:

// code snippet here

Use the obtained access token when making requests to the People API and include it in the Authorization header as a bearer token.

This can be done as shown in this curl request format:

// curl command here

You should receive a response containing user details such as genders and birthdays.

In addition, here is a more API-friendly approach using the googleapis package:

First, generate the URI and direct the user accordingly:

// code snippet here

Secondly, after receiving the user's code post-sign-in, parse it and use it to retrieve extra user data like birthdays, genders, and emails:

// server-side POST method snippet goes here

The fetched data should now be available in the output.

Answer 5

Answer №3

If you're working with NestJS using typescript, here's a solution that worked for me

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
  constructor(configService: ConfigService) {
    super({
      clientID: configService.get('GOOGLE_CLIENT_ID'),
      clientSecret: configService.get('GOOGLE_SECRET'),
      callbackURL: configService.get('GOOGLE_REDIRECT_URL'),
      scope: [
        'https://www.googleapis.com/auth/userinfo.profile',
        'https://www.googleapis.com/auth/userinfo.email',
        'https://www.googleapis.com/auth/plus.login',
        'https://www.googleapis.com/auth/user.birthday.read',
        'https://www.googleapis.com/auth/user.phonenumbers.read',
        'https://www.googleapis.com/auth/user.gender.read',
      ],
    });
  }

  async validate(
    accessToken: string,
    refreshToken: string,
    profile: any,
    done: VerifyCallback,
  ): Promise<any> {
    const { name, emails, photos, sub, birthday, phoneNumber, gender } =
      profile;
    const user = {
      sub,
      email: emails[0].value,
      firstName: name.givenName,
      lastName: name.familyName,
      picture: photos[0].value,
      dob: birthday,
      phoneNumber,
      gender,
      refreshToken,
      accessToken,
    };

    done(null, user);
  }
}

Next step is to include your GoogleStrategy in your provider setup. And remember to set your keys in the .env file.

Answer 6

If you're working with NestJS using typescript, here's a solution that worked for me

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
  constructor(configService: ConfigService) {
    super({
      clientID: configService.get('GOOGLE_CLIENT_ID'),
      clientSecret: configService.get('GOOGLE_SECRET'),
      callbackURL: configService.get('GOOGLE_REDIRECT_URL'),
      scope: [
        'https://www.googleapis.com/auth/userinfo.profile',
        'https://www.googleapis.com/auth/userinfo.email',
        'https://www.googleapis.com/auth/plus.login',
        'https://www.googleapis.com/auth/user.birthday.read',
        'https://www.googleapis.com/auth/user.phonenumbers.read',
        'https://www.googleapis.com/auth/user.gender.read',
      ],
    });
  }

  async validate(
    accessToken: string,
    refreshToken: string,
    profile: any,
    done: VerifyCallback,
  ): Promise<any> {
    const { name, emails, photos, sub, birthday, phoneNumber, gender } =
      profile;
    const user = {
      sub,
      email: emails[0].value,
      firstName: name.givenName,
      lastName: name.familyName,
      picture: photos[0].value,
      dob: birthday,
      phoneNumber,
      gender,
      refreshToken,
      accessToken,
    };

    done(null, user);
  }
}

Next step is to include your GoogleStrategy in your provider setup. And remember to set your keys in the .env file.

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

Answer №1

Html

Answer №2

Answer №3

Similar questions

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

React higher order component (HOC) DOM attributes are causing the error message 'Unknown event handler property' to be triggered

Creating a private variable in Javascript is possible by using getter and setter functions to manage access to the

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

The integration of Laravel (Homestead) Sanctum is malfunctioning when combined with a standalone Vue application

Detecting the presence of a file on a local PC using JavaScript

Building a dropdown menu component in react native

Passing the value of each table row using Ajax

What is the best way to initiate a saga for an API request while another call is currently in progress?

Customize hoverIntent to support touch events on mobile devices

Next.js triggers the onClick event before routing to the href link

Pass data from controller using Ajax in CodeIgniter

Tips for triggering an error using promise.all in the absence of any returned data?

Creating an object type that includes boolean values, ensuring that at least one of them is true

Error message stating 'compression is not defined' encountered while attempting to deploy a Node.js application on Heroku

Issue with Backbone Event Dropping Functionality

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

Endless Scroll Feature in Javascript

Stay dry - Invoke the class method if there is no instance available, otherwise execute the instance method

Guide on utilizing automatic intellisense in a standard TextArea within a web application