react-google-login icon indicating copy to clipboard operation
react-google-login copied to clipboard

Login with offline=true and responseType=code doesn't have access to the current user name\email

Open rabashani opened this issue 6 years ago • 7 comments

Trying to run this code, results in succes and retrieve of the authorization token though, i can't access the user.

`

successResponse = response => {

    console.log('success:', response)
    console.log('hello Loola User: ', response.profileObj.name)
}

        

<GoogleLogin clientId={config.googleOAuthClientID} scope= 'profile email https://www.googleapis.com/auth/youtube' buttonText="Login" prompt="consent select_account" onSuccess={this.successResponse} onFailure={this.errorResponse} onRequest={this.loadingResponse} approvalPrompt="force" offline={true} uxMode="redirect" //redirectUri= // responseType="id_token permission code" responseType="code" isSignedIn={true} /> `

This is the error I am getting as response.profileObj.name is not defined yet.

image

What is the right way to get the current user, after a successful login? (btw, it will work after a refresh to the page, though, it doesn't sounds like the right solution.)

rabashani avatar Jan 04 '18 18:01 rabashani

There are two different relevant Oauth2 flows here: Implicit Flow and Server-Side Flow. Google covers both in this guide (although they don't clearly map them as two different paths).

When you're requesting authorization for implicit flow/client-side/SPA/native app, etc, google doesn't give you the refresh token. That's for good reason: They never expire. If your device or browser are compromised with a refresh_token, you just handed your account account away. If the same happens with an an access_token it is probably fine because they only live for 60 minutes.

If you plan on using the refresh token, you'll get back the code as you see above. That has to be sent to your backend server where your server then goes through the steps in the above page in the guide to get it unencrypted. At that point you'll have an access_token, refresh_token, id_token, possibly a domain (hd) for G-suite accounts, and some possibly more, depending on the scopes you requested.

Note: approvalPrompt="force" is key here as well. If you don't add that, you'll only get a refresh_token from the very first request from that user for authorization. force ensures a refresh token comes back with every request.

Also use the google oauth developer playground to validate this and see exactly how they're doing it

JonFranchi avatar Jan 05 '18 07:01 JonFranchi

So, no way to get the Authorization Code AND the name, profile pic, etc when the onSuccess callback?

dyegolara avatar Mar 06 '18 02:03 dyegolara

Bump @dyegolara question.

Xawier avatar Aug 20 '19 12:08 Xawier

@dyegolara did you get the solution for getting profile info?

ayushnawani avatar Sep 09 '19 17:09 ayushnawani

@ayushnawani, long time but it might help someone else. I finally solve the problem by using the exchange code on server side to get token, refresh token and token id. Thanks to the token id I can get some profile information: 1/ post https://oauth2.googleapis.com/token 2/ get https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=${r.id_token}

My nodejs code looks like:

requestPromise
      .post("https://oauth2.googleapis.com/token", {
        formData: {
          code: exchangeCode,
          redirect_uri: uri,
          client_id: googleId,
          client_secret: googleSecret,
          scope: "https://mail.google.com/",
          grant_type: "authorization_code"
        }
      })
      .then(r => {
        r = JSON.parse(r);
        return requestPromise
          .get(
            `https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=${r.id_token}`
          )
          .then(r2 => {
            console.log(JSON.parse(r2); // will display some profile data
          });
      })

JeffGreat avatar Mar 04 '20 21:03 JeffGreat

I solved this problem by using the authorization code in the back end to get access and refresh token ,it also includes an id token (base64 encoded token) which can be decoded to get info like email,name and picture

asadrazashah avatar Jun 29 '20 12:06 asadrazashah

For those who expiriencing such problem - there is hack to access gapi library directly and access user info from it

window.gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile()

st1ng avatar Jun 14 '21 12:06 st1ng