500 error & "Unable to issue redirect for OAuth 2.0 transaction" - using "@auth0/auth0-react" on localhost

[noahbrenner]

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

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.

[dan.woda]

Hi @noahbrenner,

Your error suggests the app is not auth server isn’t able to issue a redirect URI. Can you try our quickstart sample app and see if you are getting the same error?

Auth0 React SDK Quickstarts: Login

[noahbrenner]

Thanks @dan.woda! I tried out the quickstart sample (and updated my application settings to accept localhost:3000 for callbacks).

The redirect did work with the demo project, so I’ll try to track down what I did differently in mine.

On a separate note: Though the redirect worked, the sample app then rendered a page that only shows the text “Oops… Unauthorized”, which means that useAuth0() on line 22 of src/App.js is returning an error object with a message of “Unauthorized”. That’s a separate problem, though, so I’ll see what I can do to address the redirect weirdness in my own app and report back.

[noahbrenner]

I found what was causing the redirect issue! I had passed loginWithRedirect directly to the onClick handler, so it was being passed an event object as a parameter:

@noahbrenner

<button type="button" onClick={loginWithRedirect}>

The solution was to make sure the function is called with no parameters (or only with params I specify) by calling it inside a wrapper function:

<button type="button" onClick={() => loginWithRedirect()}>

[dan.woda]

Great! Glad you found a solution. If you are still dealing with the unauthorized error we can work through that. Looking at the logs in the auth0 dashboard is usually helpful for those errors.

Let me know,
Dan

[noahbrenner]

@dan.woda I’d love some help figuring out the “Unauthorized” error. I was planning on making a new post for that since it’s a different issue, but I’d be happy to get your help with it on this thread.

At this point, the redirect is working, but when I get back to my app, I’m getting isAuthenticated: false (after isLoading is updated to be false).

Logs

Here’s what I see in my Auth0 Dashboard logs for my most recent login attempt. I’m not getting any clues from it, but I’m interested in your take on it:

{
  "date": "2020-12-12T03:16:08.738Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "[REDACTED]",
  "client_name": null,
  "ip": "[REDACTED]",
  "user_agent": "Firefox 83.0.0 / Ubuntu 0.0.0",
  "details": {
    "code": "*************oug"
  },
  "hostname": "[REDACTED]",
  "user_id": "",
  "user_name": "",
  "log_id": "[BIG_LONG_NUMBER]",
  "_id": "[THE_SAME_BIG_LONG_NUMBER]",
  "isMobile": false
}

Frontend AJAX request

In my browser devtools, after being redirected back to my app, I see a POST request to https://[MYAPP].us.auth0.com/oauth/token, sending this JSON object:

{
  "redirect_uri": "http://localhost:5000",
  "client_id": "[REDACTED]",
  "code_verifier": "[REDACTED]",
  "grant_type": "authorization_code",
  "code": "[REDACTED]"
}

The response has a 401 status and the following JSON object:

{
  "error": "access_denied",
  "error_description": "Unauthorized"
}

I also noticed that the function I provided for the onRedirectCallback prop on Auth0Provider is never called. The relevant code snippet looks like this:

const handleAuthRedirect = (appState?: AppState) => {
  console.log({ appState }); // If this prints, this callback was called
  navigate(appState?.returnTo ?? window.location.origin, { replace: true });
};
                                                                             
return (
  <Root>
    <Auth0Provider onRedirectCallback={handleAuthRedirect} {/* other props */}>
      {/* rest of the app /*}
    </Auth0Provider>
  </Root>
);

---

I first wondered if I needed to add a value for audience and/or scope in the Auth0Provider props, but none of my experiments for that worked. Also, the quickstart docs make no mention of setting audience, though they demonstrate the ability to get isAuthenticated: true and to display user data.

Any thoughts on what to try next?

[dan.woda]

This suggests to me that there is a misconfiguration in your application’s settings in Auth0. Unauthorized can mean that the client id is incorrect, the applicaiton is using a grant it is not registered for, or something similar. Can you DM me your tenant name and client ID so I can take a look?

[noahbrenner]

Yeah, I’ll send those to you now.

[dan.woda]

Looks like you are using the default app, registered as a regular web app. You need a SPA.

Try creating a new app and select SPA on application type.

[noahbrenner]

Ah, got it! Thanks so much!

I had misunderstood the Application vs. Tenant distinction in the dashboard — I initially chose “regular web app” so that I could use the Auth0 API from both my static frontend and my backend API server. Instead, it looks like I just need to create a separate Application for each or them, but attached to the same Tenant so that they can both access the same user data from Auth0 and so the frontend can authenticate with the API server using the Auth0 API. Is that correct?

[dan.woda]

That all sounds right to me!