Auth0 Home Blog Docs

React-native web auth errors in browser pop-up

react-native
react-native-auth0

#1
  • SDK: react-native-auth0
  • Version: v1.2.2
  • Node: v9.11.1

When using react-native-auth0, attempting web auth fails with an error page with the following text:

Looks like something went wrong!

There could be a misconfiguration in the system or a service outage. We track these errors automatically, but if the problem persists feel free to contact us with this tracking id: 778fa4e9f4c7e5db2bc0.
Please try again.

This was working correctly several weeks ago when I initially set it up, but now fails.

Code:

import DeviceInfo from 'react-native-device-info';
import Config from 'react-native-config'

import Auth0 from 'react-native-auth0';

const auth0 = new Auth0({
  domain: Config.AUTH0_DOMAIN,
  clientId: Config.AUTH0_CLIENT_ID,
});

export const authorize = () => {
  return auth0
    .webAuth
    .authorize({
      scope: 'openid profile email offline_access',
      audience: Config.AUTH0_AUDIENCE,
      device: DeviceInfo.getDeviceId(),
    })
    .then(({ accessToken, idToken, refreshToken, expiresIn, tokenType }) => {
      return { accessToken, idToken, refreshToken, expiresIn, tokenType };
    })
};

I’ve confirmed my config values appear to be setup correctly. There is no stack trace or error output locally. Any ideas as to what I can check that might be wrong?


#2

can you check your tenant logs to see what is the actual error? https://manage.auth0.com/#/logs


#3

Hi Luis,

I am not showing any logs on that page. I made sure to try and login again in case they might only be for a recent time period.

Jacob


#4

can you inspect the browser error with dev tools or something else? Can you also try to add a catch method to see if you can see the error?

.then(({ accessToken, idToken, refreshToken, expiresIn, tokenType }) => {
      return { accessToken, idToken, refreshToken, expiresIn, tokenType };
    })
.catch(error => console.log(error))

#6

Catch provides the following error when I back out, but otherwise nothing else.

console.error: {“error_description”:“User cancelled the Auth”,“error”:“a0.session.user_cancelled”}
error
YellowBox.js:69:16

Auth0.js:22:32
tryCallOne
core.js:37:14

core.js:123:25

JSTimers.js:295:23
_callTimer
JSTimers.js:152:6
_callImmediatesPass
JSTimers.js:200:17
callImmediates
JSTimers.js:464:11
__callImmediates
MessageQueue.js:327:4

MessageQueue.js:145:6
__guardSafe
MessageQueue.js:314:6
flushedQueue
MessageQueue.js:144:17
invokeCallbackAndReturnFlushedQueue
MessageQueue.js:140:11

Looking through debug steps for pop-out browsers from apps to see if I can connect my local dev tools n Chrome.


#7

Appears to be 400ing

I’ve blacked out info that might be sensitive. Please let me know if there’s anything else I can get you.

Also noticed I was passing an unknown device, although looking at the docs that doesn’t appear to be a valid parameter. Removing it still results in the 400.

For anyone else hitting this issue that wants to debug the WebView that pops up for webAuth.authorize, see instructions here


#8

Can you please inspect the response and see what the actual error is? a0.session.user_cancelled is a mapped error from react native


#9

<html>
  <head>
    <meta charset="utf-8">
    <link href="https://cdn.auth0.com/styleguide/latest/index.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.auth0.com/backend-templates/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Invalid Request &amp;middot; Auth0</title>
  </head>
  <body>
    <div class="unhandled-error-cont">
      <div class="error-header">
        <span class="error-icon">
          <span class="error-face">
            <span class="error-face-eye left-eye eye-blink"></span>
            <span class="error-face-eye right-eye eye-blink"></span>
            <span class="error-mouth"></span>
          </span>
        </span>
        <h3 class="error-title">Looks like something went wrong!</h3>
      </div>
      <div class="error-body">
        <p class="error-message">
          There could be a misconfiguration in the system or a service outage. We track these errors automatically, but if the problem persists feel free to <a href="https://auth0.com/support" target="_new">contact us</a> with this tracking id: <b>d747be7d7e477deb5dd9</b>.<br/>Please try again.
        </p>
      </div>
      <div class="error-footer">
        <a href="https://auth0.com/docs" target="_new" class="footer-icon-cont read-docs">
          <span class="footer-icon"></span>
          <p class="footer-icon-text">Read the docs</p>
        </a>
        <a href="https://auth0.com/support" target="_new" class="footer-icon-cont contact-support">
          <span class="footer-icon"></span>
          <p class="footer-icon-text">Contact Support</p>
        </a>
        <a href="http://status.auth0.com" target="_new" class="footer-icon-cont service-status">
          <span class="footer-icon"></span>
          <p class="footer-icon-text">Service Status</p>
        </a>
        <span class="auth0-logo-cont">
          <a href="https://auth0.com" target="_new">
            <img class="auth0-logo" src="https://cdn.auth0.com/backend-templates/imgs/auth0-shield-grey.svg" alt="Auth0 logo">
          </a>
        </span>
      </div>
    </div>
  </body>
</html>

See a few posts above for an example of the data react-native-auth0 is sending in. I am unsure what part of the request is mis-formatted/invalid.


#10

can you dm me your tenant so I can take a quick look?


#11

Our internal error message says:

The client with id: “R5WiP[…redacted…]S73H” was not found.

I can see the client in your applications listing. Can you try that again and let me know if the problem is still happening? If it is, send me the new tracking id string in the error page so I can contact the backend team and figure it out what’s happening


#12

Still happening, new tracking id is 6625cf097f5933f83f10


#13

I’ll answer you in a DM


#14

There was an error in the configuration, the tenant name was wrong :grimacing:


#15

Issue resolved, I misspelled part of my AUTH0_DOMAIN which caused the web auth page request to fail.

Thanks @luis.rudge for the help troubleshooting!