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=…
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.)
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:
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.
In the other article that you refer to, it looks different, there they are actually providing an argument when calling the loginWithRedirect function
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.