Auth0Client is undefined

Opening this topic on behalf of: @SabrinaDanielle

I’m having an issue getting started with Auth0.

I have been able to successfully login to my app, but it’s inconsistent. I often get:

TypeError: auth0Client is undefined

loginWithPopup,
  75 | handleRedirectCallback,
  76 | getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
> 77 | loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
  78 | getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
  79 | getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p),
  80 | logout: (...p) => auth0Client.logout(...p)

sometimes it’s works sometimes it doesn’t. I basically inserted pieces of the quickstart into an existing app. I also have entered the callback urls in the app settings.

Thank you for any help given!

1 Like

Can you provide us with more details @SabrinaDanielle!

  • What part of our stack are you using? (sdk / framework etc)
  • Can you send me the link to the quickstart you mentioned
  • Can you spot differences when it works and when it doesn’t?
  • Any context that you consider valuable in debugging that

@konrad.sopala Thank you for offering to help !

  • I am using the React sdk.
  • I am using the “calling-api” and “login” : GitHub - auth0-samples/auth0-react-samples: Auth0 Integration Samples for React Applications
  • When it’s not working I am seeing:
    image
    and the console logs a network error: Failed to load resource: the server responded with a status of 400 ()
    *normally it will work right after I start the dev server. I can log in once. Then, I’ll get errors and won’t be able to log in when I try again shortly after that so I’ll have to wait a few minutes. Once I authenticate the protected routes aren’t available immediately as well. I just leave the page up a few minutes and when I return they magically appear :woman_in_lotus_position:t5::woman_shrugging:t5:

and in my server.js it’s pretty much like the quick start except I have

//...bunch of imports and stuff above...

const checkJwt = jwt({
  secret: authConfig.secret,
  audience: authConfig.audience,
  issuer: `https://${authConfig.domain}/`,
  algorithm: ['HS256']
});

app.use(
  cors(),
  morgan("dev"),
  bodyParser.json(),
  helmet(),
  express.static(join(__dirname, "client/build")),
)


//...

app.use('/api', checkJwt, graphqlHTTP(req => ({
  schema: schema,
  rootValue: root,
  graphiql: true,
  context:{
    user: req.user
  },
//...
})));

//routes public/private for testing 

app.get("/public",(req, res) =>{
  res
  .status(200)
  .send("Public resource, non protected route");
});

app.get("/private", checkJwt, (req, res) =>{
  res
  .status(200)
  .send("Private route");
});

app.get("/api/external", checkJwt, (req, res) => {
  res.send({
    msg: "Your access token was successfully validated!"
  });
});


app.use((_, res) => {
  res.sendFile(join(__dirname, "client/build", "index.html"));
});

app.listen(port);
console.log(`Running a GraphQL API server at ${port}/api`);

**my client side code is pretty much a create react app with pieces of the quickstarter, I didn’t change anything in the auth-wrapper, it’s as is and my provider component looks like…

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Auth0Provider } from "./utils/react-auth0-wrapper.js";
import config from "./auth_config";

const onRedirectCallback = appState => {
    window.history.replaceState(
      {},
      document.title,
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  };

ReactDOM.render(
<Auth0Provider 
    domain={config.domain}
    client_id={config.clientId}
    audience={config.audience}
    onRedirectCallback={onRedirectCallback}
    >
  <App />
</Auth0Provider>, 
document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Sorry if it’s a lot… learning to be succinct

update: I timed it and it takes the protected routes exactly 2 minutes to appear after login.

Hey guys :slight_smile:

Was there any resolution to this? I am experiencing almost similar behaviour.

Cheers

1 Like

Hey there @ryantomaselli! We’re still debugging it. Will get back to you as soon as we have info to share!

1 Like

Okay, thanks. In my debugging it looks like the Auth0Provider constructor fires more than once.

I’ve been wrestling with this same error for a couple of days.

I can get past the error if I clear the session storage under the Application tab in the Chrome devtools and then give the page a shift + command + r refresh.

Hey @konrad.sopala did you make any headway with this issue?

Have we given up on solving this issue @konrad.sopala?

Clearing cookies fixed this for me, at least temporarily.

Hey there @jscottchapman and @ryantomaselli!

We’re never giving up on investigating the issues! :slight_smile: Sometimes we’re just too busy handling all the questions to follow-up. I’ll reping the team to see if they have something to share!

1 Like

Just confirming with others…using auth0-spa-js seems to be non starter at the moment. In my case it never works, my app just keeps reloading and triggering the same error.

Neither clearing cookies nor clearing session storage is helping in my case…

I’m wondering if I should rather use the “Auth0.js” at GitHub - auth0/auth0.js: Auth0 headless browser sdk rather than “Auth0 Single Page Application SDK” at GitHub - auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE.

It does seem to involve more redirecting though…but my deadline fast approaches.

As far as a workaround. You should be able to get it to work again if you clear the application storage and then give it a Hard Reload(in Chrome on Mac it’s Command + Shift + R while you have the devtools open)

Can confirm, auth0-spa-js is unusable for now… (at least for me)
Just followed the exact steps in the beginner guide in a freshly created angular app…

Error: "Uncaught (in promise): TypeError: this.auth0Client is undefined
login/<@http://localhost:4200/main.js:421:13

Edit: so this looks just broken. The following is just reproducable with your code snippets:
Logging in works well, even the callback is working properly and the navbar displays the log out button. However, if you switch the page or reload the application, the instance of auth0Client is lost.

Hi all,

This type of problem normally occurs because of a configuration error. We have a related FAQ item which may help here.

The auth0Client is undefined error normally occurs because the authorization server is returning an error result to you. Things to check:

  • Open the network tab in your browser’s developer tools, find the call to /authorize on https://<your tenant>.auth0.com and check the response. You may find that an HTML page is returned to you giving you hints about the problem
  • Open your Auth0 dashboard and inspect the logs. There may be something in there about a failed authorization call

We normally see this because of either the Allowed Callback URLs or Allowed Web Origin URLs are incorrect/haven’t been specified.

If the configuration for your client-side app matches that of your Auth0 application and there are no config errors, can someone please provide a small repro application that we can use to debug the issue?

3 Likes

Wow, great! Thanks for that quick reply. In my case it was the missing Origin URL…

1 Like

Sounds about right. The Allowed Web Origin URLs are used on refresh, because the SDK tries to refresh the token silently when you refresh the page/reload the app. This is opposed to the Allowed Callback URLs, which are used when your users sign in to your app through the UI.

Glad it’s sorted for you!

1 Like

I would recommend to put one of those gray hint boxes below Configure Allowed Web Origins letting people know that if they’re following along with the sample project or developing on their local machine to list localhost:{port #} in the origin setting. Similar to the box right below this section.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.