Search code examples
reactjsoauth-2.0google-my-business-api

Google Auth Access Scopes once client is logged in

I have never worked with Google Oauth2 before ... But I can say, the documentation is sketchy at best, and tutorials out there are mostly incomplete, or flat out wrong, at least the ones you come across in top search results.

I have been at this for 2 days now, and am pulling my hair out. I was able to get logged in within 5 minutes of starting this project. So great, I am logged in .. Then what? How do I access the scopes I have specified?

I have used several different libraries, including Google's official Node/React library, and I can achieve the same results from all of them .. I can get logged in, convert the jwt and see basic information:

aud : "1049xxxxxxxxxxxxxxxx.apps.googleusercontent.com"
azp : "1049xxxxxxxxxxxxxxxx.apps.googleusercontent.com"
email :"[email protected]"
email_verified : true
exp : 1665074029
family_name : "Froman"
given_name : "Abe"
iat : 1665070429
iss : "https://accounts.google.com"
jti : "cf4392xxx11b9f198812fce"
name : "Abe Froman"
nbf : 1665070129
picture : "https://lh3.googleusercontent.com/a/xxxxxxx_DQ=s96-c"
sub : "107ccccccc740"

When I read about getting an "access token" back .. I don't see one in the response above.

Using the base react-oauth/google package found HERE .. You can create a basic login button that works, just like every other package that I've worked with:

import {GoogleOAuthProvider} from '@react-oauth/google';
import {GoogleLogin} from '@react-oauth/google';
import jwt_decode from "jwt-decode";

<GoogleOAuthProvider clientId="xxxx.apps.googleusercontent.com">

    <GoogleLogin
        onSuccess={credentialResponse => {
            var decoded = jwt_decode(credentialResponse.credential);
            console.log(decoded);
        }}
        onError={() => {
            console.log('Login Failed');
        }}
    />

</GoogleOAuthProvider>

enter image description here

The question is .. Now that I am logged in .. How do I access the scopes defined in my Consent Screen? Primarily the GMB (Google My Business) management? What is the next step? It seems that "just logging in" is useful for a lot of people .. But I am using this as a way for our users to manage their GMB and align that info with our customer info in our database. How do I access the client's GMB profile from here?

Solution

  • You need to use the useGoogleLogin version of that component. You will then get a response that includes an access token that can be sent to Google APIs, rather than only an ID token, which is what you have above.