React-Native Expo app Auth0 login, AuthSession - authURL fails

Question

I'm trying to setup my login to my react native Expo app using AuthSession.

I keep getting this error: ValidationError: child "authUrl" fails because ["authUrl" must be a valid uri]".

The weird thing is, if I console log the URI that is getting passed, copy it, and paste it into a browser, it works! (pulls up the Auth0 login screen as expected).

Why am I getting this error when trying to call it from my Expo client app?

Here's my code:

 function toQueryString(params) {
  return '?' + Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}

class SignInScreen extends React.Component {

logIn = async () => {
  const redirectUrl = AuthSession.getRedirectUrl();
  console.log(`Redirect URL: ${redirectUrl}`);

  // Structure the auth parameters and URL
  const queryParams = toQueryString({
    client_id: auth0ClientId,
    redirect_uri: redirectUrl,
    response_type: 'id_token', // id_token will return a JWT token
    scope: 'openid profile', // retrieve the user's profile
    nonce: 'nonce', // ideally, this will be a random value
  });
  const authUrl = `${auth0Domain}/authorize` + queryParams;

  // Perform the authentication
  const response = await AuthSession.startAsync({ authUrl });
  console.log('Authentication response', response);

  if (response.type === 'success') {
    this.handleResponse(response.params);
  }
};

handleResponse = (response) => {
  if (response.error) {
    Alert('Authentication error', response.error_description || 'something went wrong');
    return;
  }

 console.log(response.id_token)
};

Answer 1

I figured this out soon after posting it. Here's what I did to get it to work.

I was using :

 const auth0Domain = 'myapp.auth0.com'

I should have been using:

const auth0Domain = 'https://myapp.auth0.com'

UPDATE in addition, be sure to add a scheme to your app.json directly under 'expo', the scheme should be your slug name all lower case, don't forget it has to be all lower case. Also, don't forget that this new app.json cannot be updated OTA and must be submitted to the app store. If you try to use this Auth0 without the updated app.json that includes the scheme, then you will get a safari error saying something like 'safari can't open this page because it's an invalid url' or something like that. When you see this remember this is not a problem with your redirect URL (assuming you're using the boilerplate AuthSession.getRedirectURL() method, and you put that same redirect url into your callback in Auth0 settings). If you did those two things then you are seeing this error because you have not updated your scheme on the app store or test flight build.