JWT instead of access_token?

[Rec0iL99]

I want to create my own custom Google login button and the design given by Google when using the GoogleLogin component does look too good for me to use.

Is it possible to get a JWT instead of the access_token when using useGoogleLogin hook, like when using the GoogleLogin component?

Thanks!

[MomenSherif]

Hello @Rec0iL99,

Yup you can, we can use custom buttons with useGoogleLogin in two ways

Token flow

which will return you an access_token to talk to google APIs providing it in Authorization header in requests. unfortunately, google will not return JWT has user info, but you can still send a request to google to fetch user info
GET: https://openidconnect.googleapis.com/v1/userinfo don't forget to provide the access_token in Authorization header.

Code flow

which will return you an authorization code that you will give to your backend to exchange it with an access token (JWT) which will include user info, refresh token, and other stuff.

[MomenSherif]

tell me if it didn't work with you, I would appreciate helping you.

If it worked :D, you can close the issue whenever you finish.

[Rec0iL99]

Correct me if I'm wrong...there's no way to get a JWT from Google when using the useGoogleLogin hook?

[MomenSherif]

in code flow yes you can, all you need to exchange code to get access_token, refresh_token and id_token (id_token is the JWT that has all info about the user)

Client

const googleLogin = useGoogleLogin({
  onSuccess: async ({ code }) => {
    const tokens = await axios.post('http://localhost:3001/auth/google', {  // http://localhost:3001/auth/google backend that will exchange the code
      code,
    });

    console.log(tokens);
  },
  flow: 'auth-code',
});

Backend (using express)

require('dotenv').config();
const express = require('express');
const {
  OAuth2Client,
} = require('google-auth-library');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(express.json());

const oAuth2Client = new OAuth2Client(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  'postmessage',
);


app.post('/auth/google', async (req, res) => {
  const { tokens } = await oAuth2Client.getToken(req.body.code); // exchange code for tokens
  console.log(tokens);
  
  res.json(tokens);
});

app.listen(3001, () => console.log(`server is running`));

[MomenSherif]

in token flow, you can't get JWT but also you don't need to get it to get user profile info.
Google gives you access_token to talk with their APIs

const googleLogin = useGoogleLogin({
  onSuccess: async ({ access_token }) => {
    const userInfo = await axios.get(
      'https://www.googleapis.com/oauth2/v3/userinfo',
      { headers: { Authorization: `Bearer ${access_token}` } },
    );

    console.log(userInfo);
  },
});

** userinfo response **

{
    "sub": "xxxxxxxxx",
    "name": "Mo'men Sherif",
    "given_name": "Mo'men",
    "family_name": "Sherif",
    "picture": "xxxxxxx",
    "email": "xxxxxxxxxx@gmail.com",
    "email_verified": true,
    "locale": "ar"
}

[Rec0iL99]

@MomenSherif I was away for a few days and couldn't respond in time to your reply. The token flow fits my needs perfectly and the code you gave works 🎉.

Thanks!

[thang-39]

Thank you @MomenSherif , it runs 🗡️

[ctindel]

@MomenSherif Any chance you can show a full react app using the component that works properly with the express backend you've supplied above? It's not clear to me why you're using the useGoogleLogin function instead of the GoogleLogin component, or if that won't work how to integrate the useGoogleLogin() inside a react app. Just trying to piece it all together and there don't seem to be any full working examples. Thanks!

Or maybe I can ask it another way, how do I get the "code" using the GoogleLogin component instead of the useGoogleLogin function? I can't use the useGoogleLogin hook in my react app because its a component and not a function.

[MomenSherif]

You can use theGoogleLogin button to integrate with backend but you will not get access token or refresh token

If you want to only get user info yea you can do that and your backend can verify the id token against google which you obtain from GoogleLogin
If you are using node, google api package has verifyToken method which do that

Or you can find the corresponding example for your backend in Google's Docs

[ctindel]

@MomenSherif Yeah all I want to do is actually authenticate the user, I don't think I need an access token or a refresh token for that right? Just validating that the JWT is actually from google and meant for my clientId should be good enough.

Why is the functionality different between the GoogleLogin component and the useGoogleLogin function? Is there any reason they can't both offer both methods?

[MomenSherif]

It's what google response with

I just abstracted the logic to be React friendly and easy to use

They provide the login button for simple authentication only no authorization allowed

[ctindel]

@MomenSherif is there a way to use this GoogleLogin button and the google passport library in express in the backend?