`isLoading` is stuck at `true` after upgrading from 1.6.0 to 1.7.0

[dreamawakening]

Describe the problem

In this line:

const { isAuthenticated, isLoading, loginWithRedirect, logout, error } = useAuth0();

isLoading is stuck as true. error is also null, there is no context for why it's not working.

This exact same code works perfectly fine with 1.6.0, but after upgrading to 1.7.0 it doesn't. It stalls and never finishes loading.

What was the expected behavior?

It should finish loading, then either login the user or return an error because something went wrong.

Reproduction

Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent.
Note: If clear, reproducable steps or the smallest sample app demonstrating misbehavior cannot be provided, we may not be able to follow up on this bug report.

• set up a Next.js app (version 11.1.0)
• `yarn add @auth0/auth0-react@1.7.0
• Add the following component:

import React from "react";
import { Auth0Provider as BaseAuth0Provider, Auth0ProviderOptions } from "@auth0/auth0-react";

export interface Props extends Auth0ProviderOptions {
  children: React.ReactNode;
}

const Auth0Provider = ({ children, ...props }: Props): React.ReactElement => {
  const options: Auth0ProviderOptions = {
    ...props,
    redirectUri: typeof window !== "undefined" ? window.location.origin : undefined,
    cacheLocation: "localstorage",
  };
  return <BaseAuth0Provider {...options}>{children}</BaseAuth0Provider>;
};

export default Auth0Provider;

• Inside the child of the Auth0Provider, add the following code:

import React, { useEffect } from "react";
import { useAuth0, Auth0ContextInterface } from "@auth0/auth0-react";

interface RenderProp {
  logout: Auth0ContextInterface["logout"];
}

export interface Props {
  children: { ({ logout }: RenderProp): React.ReactNode };
}

const AuthenticationWrapper = ({ children }: Props): React.ReactElement => {
  const { isAuthenticated, isLoading, loginWithRedirect, logout, error } = useAuth0();

  useEffect(() => {
    if (!isLoading && !isAuthenticated && !error) {
      loginWithRedirect({ appState: { returnTo: "/" } });
    }
  }, [isLoading, isAuthenticated, loginWithRedirect, error]);

  return (
    <>
      {isLoading ? (
        <div>Loading</div>
      ) : (
        isAuthenticated && (
          <>
            {children({
              logout: () =>
                logout({ returnTo: typeof window !== "undefined" && window.location.origin }),
            })}
          </>
        )
      )}
    </>
  );
};

export default AuthenticationWrapper;

Environment

Please provide the following:

• Version of auth0-react used: 1.7.0
• Which browsers have you tested in? Brave, Firefox
• Which framework are you using, if applicable (Angular, React, etc): React/Next.js
• Other modules/plugins/libraries that might be involved: N.A

[adamjmcgrath]

Hi @dspacejs - thanks for raising this

I can't reproduce your issue given the code you've shared with me (see https://github.com/adamjmcgrath/auth0-react-277)

It looks like you may have a configuration error, could you try checking your logs in your Auth0 dashboard for any failed login events?

Failing that, can you provide a running example that demonstrates the problem which includes your domain and clientId?

[adamjmcgrath]

@dspacejs - closing due to innactivity

Feel free to ping me with the required info if you'd like me to reopen

[dreamawakening]

@adamjmcgrath sorry I didn't get around to responding.

I've just triggered the error again, I will let you know when someone on my team retrieves it from the Auth0 dashboard.

[dreamawakening]

@adamjmcgrath there was no errors in the error log. I'll have to try and reproduce this.

[dreamawakening]

@adamjmcgrath I've had trouble reproducing this exact problem I was having.

However, I encountered a new error which may potentially be related to it (because it only happens in 1.7.0, and not 1.6.0):

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

Here is my Code Sandbox so you can see: https://codesandbox.io/s/spring-haze-nl5yi?file=/package.json

[nikolaVlad]

Any luck?

[raRaRa]

Same issue here, happens from time to time, isLoading is stuck as true, no matter if I clear local storage & cookies.

Context: Seems like my NextJS app was stuck in some weird state (dev), where the context object wasn't properly loaded or something. Restarting dev server seems to have fixed it for me.