Hello, I’m trying to set up a very basic signup/login flow via Google OAuth. We have a separate flow for email/password signup we handle outside of Auth0; we only want to perform Google OAuth through Auth0 for now.
We use auth0.js on the client application to (1) authorize the user to retrieve an access token and (2) make a GET /userinfo request immediately after receiving the token from the hash parameters upon redirect. Once we retrieve the user information, we create an account on our backend outside of Auth0.
The user is able to enter the flow and the token is returned correctly, though the user profile returned from the GET /userinfo endpoint does not include a user’s phone number even though it is specified in the scope parameter.
Things I’ve tried:
- Followed all steps in https://auth0.com/docs/connections/social/google
- Verified our application through Google’s OAuth verification process to accept the
https://www.googleapis.com/auth/user.phonenumbers.readscope - Set the Client ID and Client Secret from our Google OAuth credentials in the Auth0 social connection config
- Passed the
scopeparameter in both theauth0.WebAuth({ ... })constructor and thewebAuth.authorize({ ... })call. - Used the following phone-related scopes:
phone,user.phonenumbers.read, andhttps://www.googleapis.com/auth/user.phonenumbers.read - Verified that the accounts I’m using to test have a verified phone number on their Google account.
Below is the authorization screen that appears on the first signup with a user - note that it informs the user that it will be retrieving their phone number.
Below is the response from GET /userinfo:
The Auth0 social connection configuration only requests the Basic Profile and Extended Profile attributes, with no permissions. Below is the response from testing the connection through the social connection’s config page - note that it contains neither the email nor the phone number (although I’m not sure if that’s expected or not).
Below is the code for both parts:
import auth0 from 'auth0-js';
import config from '@/config';
const webAuth = new auth0.WebAuth({
domain: config.services.auth0.domain,
clientID: config.services.auth0.clientId,
// scope: 'openid profile email phone',
});
// Redirects the user to signup via Google OAuth, then redirects to /login
async function googleOAuthSignup() {
webAuth.authorize({
redirectUri: config.services.auth0.signupRedirectUri,
connection: 'google-oauth2',
responseType: 'token',
scope: 'openid profile email phone',
}, (err) => {
console.error(err);
return false;
});
}
// Retrieves a user's Google profile info using their access token
async function getOAuthUserInfo(accessToken) {
console.log(accessToken);
return new Promise((resolve, reject) => {
webAuth.client.userInfo(accessToken, (err, user) => {
if (err) reject(user);
else resolve(user);
});
});
}
export { googleOAuthLogin, googleOAuthSignup, getOAuthUserInfo };
I’m not sure what else to try; am I missing something fundamental?
I understand its a lot of moving parts, but its rewarding at the end!