I’m using Auth0 for the first time, integrating it into a React app. I’m getting an error at the end of the login flow that I haven’t been able to sort out.
The issue as seen from the browser:
- Click login button
- Select an option to login/create an account
- I get the same issue whether using email/password or OAuth via Google)
- Give consent to share data
- See an error page saying “Oops!, something went wrong”
- In the devtools, I can see a POST request to
<MYAPP>.us.auth0.com/u/consent?state=...
which received a 500 status code response
- In the devtools, I can see a POST request to
The issue as seen in the Auth0 dashboard logs
Excerpts of fields that might be relevant:
"error": {
"message": "Unable to issue redirect for OAuth 2.0 transaction",
"oauthError": "server_error",
"type": "oauth-authorization"
}
"scope": [
"openid",
"profile",
"email"
]
I do see the user listed on Users & Roles > Users, so the account is being created successfully. In order to run more tests, I’ve been manually deleting the user from the dashboard. if I don’t delete it, I just see the error page immediately when I click the Login button in my app, preventing me from trying another login method/account.
App configuration
Auth0 Dashboard for the Application
Application Type: Regular Web Application
Token Endpoint Authentication Method: Post
Allowed Callback URLs: http://localhost:5000
Allowed Logout URLs: http://localhost:5000
Allowed Web Origins: http://localhost:5000
I also tried specifying the Callback/Logout URLs with a trailing slash, but that had the same result.
Code excerpts
Returned by App()
(For this component, I also tried omitting redirectUri
and only specifying it in LoginButton
, but that had the same result):
<Root>
<Auth0Provider
domain={process.env.AUTH0_DOMAIN as string}
clientId={process.env.AUTH0_CLIENT_ID as string}
redirectUri={window.location.origin}
>
{/* ...the rest of my app */}
</Auth0Provider>
</Root>
LoginButton.tsx
:
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
export function LoginButton(): JSX.Element {
const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
return isAuthenticated ? (
<button
type="button"
onClick={() => logout({ returnTo: window.location.origin })}
>
Log out
</button>
) : (
<button type="button" onClick={loginWithRedirect}>
Log in
</button>
);
}
This app is run at localhost:5000
.
Question
Any idea what could be causing this login issue or how I might go about tracking it down? The error message isn’t giving me much to go on. Clearly there’s a problem with the redirect URL, but I don’t know what that problem is.