GoogleLogin and useGoogleLogin (implicit & auth-code) do NOT return matching responses

[kueiRad]

GoogleLogin returns keys including a credentials key:value pair. For our login process, we can use this credentials value with jwt.decode to get an Object containing email, first/last name, avatar image.

I'm trying to create a custom button instead of using GoogleLogin, because GoogleLogin seems to be bugged on Mobile developer mode where the right side of the iframe is overflowing and clipping. From the project readme, I have to use useGoogleLogin.

useGoogleLogin with auth-code flow returns "code", which is not jwt, and nowhere does it say what I'm supposed to do with the value of "code". useGoogleLogin with implicit flow returns "access_token", which is not jwt either.

Your code example just says to console log this code or access_token value, which is not informative. How are you supposed to use useGoogleLogin?

[deepakbytebard]

Any updates on this? as I am facing the similar issue.

[barankauf]

I am also interested in how I can use useGoogleLogin to get the same response as the default one.

[kueiRad]

no updates yet, in the mean time I did some hacky css things (overlay an image of what it looks like correctly) to keep using the GoogleLogin component, hopefully a dev responds

[Micode360]

Still no fix on this? I need this now. This is so frustrating.

[barankauf]

@kueiRad how did you handle the event propagation if the user clicks the image?

[kueiRad]

@kueiRad how did you handle the event propagation if the user clicks the image?

I wrote a javascript onclick on the image to create a click event for the GoogleLogin component

[barankauf]

@kueiRad how did you handle the event propagation if the user clicks the image?

I wrote a javascript onclick on the image to create a click event for the GoogleLogin component

Which method did you call? Is there a google login method?

[Meet-katrodiya]

Are there any updates on this? I am facing the same issue.

[roanrobersson]

Same issue here

[ChrisCates]

I was confused too, and, it seems this library is not a full end to end solution for your own custom designed buttons.

Key nuances:

1. auth-code flow requires a client secret to exchange for a decodable JWT Token
2. implicit flow does not require a client secret, but has the downside of not being able to process as a popup etc.

I still opted for the implicit flow and I've demonstrated an easy solution as follows:

React Hook Code:

  const login = useGoogleLogin({
    scope: 'openid email profile',
    prompt: 'none',
    async onSuccess(tokenResponse: TokenResponse) {
      await processGoogleSSO(tokenResponse)
    },
    onError(error) {
      toast.error(error.error_description || 'Failed to login with Google')
    },
    flow: 'implicit'
  })

Server Action:

'use server'
import type { TokenResponse } from '@react-oauth/google'

export interface GoogleUserInfo {
  sub: string
  email: string
  name: string
  picture: string
}

export default async function processGoogleSSO(tokenResponse: TokenResponse) {
  const res = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
    headers: { Authorization: `Bearer ${tokenResponse.access_token}` }
  })

  const profile = (await res.json()) as GoogleUserInfo
  console.log(profile)
  // Do logic here
}

[bryanprimus]

why do we need to call it on the server? @ChrisCates

is there a security risk if we call processGoogleSSO on the client?

[ChrisCates]

@bryanprimus, you actually shouldn't be using implicit altogether. It's a deprecated method which you can review in the latest OAuth 2.1 spec.

This library as a whole by default uses the implicit flow which is why the library can truly be a drop in authentication flow and why we use it.

The problem with implicit is that the token should never be sent client side, which is why auth-code is more secure. Having the actual fetch server side has some security benefits for XSS and CORS.

I suggest reading OAuth 2.1 spec and more specifically why implicit is removed.

Overall, I wouldn't sweat it too much and just move away from implicit once you get actual users. Chrome Extensions are the main security risk here for context.