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?