How To Get Google User Profile Info Using Access Token From OAuth? - reactjs

Question

I am using ReactJS on the frontend: I successfully retrieved the access token from Google's Oauth service, but it doesn't give me any profile information for the 'current user'.
I tried using the /userInfo endpoint, ?access_token={my_access_token} query str, and some other solutions but I keep getting weird errors.
Currently I have:
const { access_token, refresh_token } = res.data; // now I have valid access_token
let userInfo = await axios.get("https://www.googleapis.com/oauth2/v3/userinfo",
{
headers: {
Authorization: `Bearer ${access_token}`
}
}); // ERROR WHEN MAKING THIS CALL.
My specific 401 error is as follows:
If there are better ways of getting user info (such as first/last name, email, etc. some sort of unique ID) please let me know.

Answer 1

You shouldnt rely on the user info endpoint to get user profile informaiton. As long as you are requesting the profile scope from the user, or even email. you should go though the People api. This will give you access to all of the users profile data.
GET https://people.googleapis.com/v1/people/me?personFields=names HTTP/1.1
Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json
response
{
"resourceName": "people/117dd2004755326722775346",
"etag": "%EgUBAi43PRoEAQIFBddyIMR3BzQkR2cnI1ZGc9",
"names": [
{
"metadata": {
"primary": true,
"source": {
"type": "PROFILE",
"id": "117200155326727753146"
}
},
"displayName": "Linda Lawton",
"familyName": "Lawton",
"givenName": "Linda",
"displayNameLastFirst": "Lawton, Linda",
"unstructuredName": "Linda Lawton"
},
{
"metadata": {
"source": {
"type": "CONTACT",
"id": "3faa96eb0118baa4be"
}
},
"displayName": "Linda Lawton",
"familyName": "Lawton",
"givenName": "Linda",
"displayNameLastFirst": "Lawton, Linda",
"unstructuredName": "Linda Lawton"
}
]
}