Trying to understand the react implementation of auth0 SPA SDK, getting error

rasmus1 · March 5, 2020, 10:04am

Hello, I have been following this guide: https://auth0.com/blog/authenticating-your-first-react-app/ , it is from 2019 so I thought it would be a good candidate for a new implementation.

I am encountering an error when calling the loginWithRedirect function from the login button. First I want to mention that it seems pretty good most of the way, the client id is correct, the redirect url is correct and accepted by auth zero, I even end up at the right https://app-name.eu.auth0.com/login?state=xxxxx and I can tell it is the right one as the background color is styled with our custom color… But here I am getting an error:

It looks to me like the login page is trying to parse the url which seem really messed up, like the entire click event from the login button is encoded into the url.

When looking at the code I am not exactly sure that I understand this:
loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),

For debugging experiment I have tried to replace the …p argument in the final call with ‘hello world’
loginWithRedirect: (...p) => auth0Client.loginWithRedirect('hello world'),
which does seem to have impact on the generated url but still throwing JSON error

Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
at login?0=h&1=e&2=l&3=l&4=o&5= &6=w&7=o&8=r&9=l&10=d&state=…

Any ideas what I am doing wrong here ?

mathiasconradt · March 7, 2020, 7:46pm

For debugging experiment I have tried to replace the …p argument in the final call with ‘hello world’

I’m not a React dev, but the loginWithRedirect should either be called empty or with options in json format (not a string).

See the API reference

https://auth0.github.io/auth0-spa-js/classes/auth0client.html#loginwithredirect
https://auth0.github.io/auth0-spa-js/interfaces/redirectloginoptions.html

So, for example, loginWithRedirect({ui_locales: 'fr'})

Does the basic React Quickstart from Auth0 React SDK Quickstarts: Login work for you without errors?
(Hard to say where your error in your screenshot is coming from without seeing the code.)

rasmus1 · March 9, 2020, 8:46am

Well, that would explain a lot. But I really don’t see that mentioned anywhere in the article. Also the final code example in the git repo is not passing any options:

github.com

auth0-blog/react-auth0-spa-sdk-ga/blob/master/src/contexts/auth0-context.js#L59


      
          	};
          
          	render() {
          		const { auth0Client, isLoading, isAuthenticated, user } = this.state;
          		const { children } = this.props;
          
          		const configObject = {
          			isLoading,
          			isAuthenticated,
          			user,
          			loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
          			getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
          			getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
          			logout: (...p) => auth0Client.logout(...p)
          		};
          
          		return <Auth0Context.Provider value={configObject}>{children}</Auth0Context.Provider>;
          	}
          }

We have directly passed the auth0Client method for loginWithRedirect() straight to child components. We are also passing any arguments to it using (...p) .

Child component being a button in this example, which when clicked calls the function with the click event, not some options as far as I can tell.

github.com

auth0-blog/react-auth0-spa-sdk-ga/blob/master/src/App.js#L19


      
          return (
            <>
              <Header />
          
              <div className="hero is-info is-fullheight">
                <div className="hero-body">
                  <div className="container has-text-centered">
                    {!isLoading && !user && (
                      <>
                        <h1>Click Below!</h1>
                        <button onClick={loginWithRedirect} className="button is-danger">
                          Login
                      </button>
                      </>
                    )}
                    
                    {!isLoading && user && (
                      <>
                        <h1>You are logged in!</h1>
                        <p>Hello {user.name}</p>

In the other article that you refer to, it looks different, there they are actually providing an argument when calling the loginWithRedirect function

await loginWithRedirect({
    appState: { targetUrl: path }
});

rasmus1 · March 9, 2020, 2:06pm

So… Now I spend another hour trying out the other implementation. It seems to be giving me same kind of error, when I reach the login page hosten on: https://appdomain.eu.auth0.com/login?state=xxxxxxxxx53cURmMGNmeHBxUzFta2ZoSHBNU0pibTlVTqN0aWTZIElpUTgxUTA0eDZHbXc4ZFVhdzdEYSxxxxx5dzhfcGNBo2NpZNkgcmhHUlZESVdYQ0owMUdRY0RWWEdRQk85dXY1MUFRWWM&client=rhGRVDIWXCJ0xxxxxxxQBO9uv51AQYc&protocol=oauth2&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fact%2F&scope=openid%20profile%20email&response_type=code&response_mode=query&nonce=qulexT1uesVQTkzqrtfsT5c3E9PSCNPxTL46L0UmiP_&code_challenge=xxxxx5MYslJzOs8PvsioAjWImbESHhLjpvQ78&code_challenge_method=S256&auth0Client=eyJuYW1lIjtc3BhLWpzIiwasdawetgidmVyc2lvbiI6IjEuNi40In0%3D

The background color is correctly set. but the login dialog doesn’t load and there the console prints an error:
Screenshot 2020-03-09 at 15.04.24

aaleksandruk · March 14, 2020, 1:03am

I am also working on this implementation with Redux. I am still trying to get my ConnectedRouter (connected-react-router) working. Currently my redirect does not correctly return. There is an explanation why the redirect is failing on https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md. I am not sure if that will help you or not.