React Router Error: No Route Matches URL “/multipass/login” in OAuth2 Flow

Ask the Community
,
1

Hi everyone,

I’m encountering an issue with my React application (OSDK ) that uses React Router and integrates with an OAuth2 backend (Palantir Foundry). The app is throwing the following error during the authentication process:

Error: No route matches URL "/multipass/login"
    at getInternalRouterError
    at createRouter
    at createBrowserRouter
    at RouterProvider

My main.tsx code:

import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthCallback from "./AuthCallback";
import Home from "./Home";
import DriverGallery from "./DriverGallery";
import "./index.css";

const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/drivers",
      element: <DriverGallery />,
    },
    {
      path: "/auth/callback",
      element: <AuthCallback />,
    },
  ],
  { basename: import.meta.env.BASE_URL },
);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />,
);

  1. I’m using createBrowserRouter to define my routes.

  2. The OAuth2 setup includes a redirect_uri parameter (e.g., /auth/callback), but it seems like the app is also trying to access /multipass/login.

  3. The backend OAuth2 URLs (e.g., authorization endpoint, token endpoint) are configured correctly as far as I can tell.

What I’ve Tried:

• Adding a fallback route (*) to handle undefined routes.

• Checking the OAuth2 redirect_uri to ensure it points to a valid route.

• Using custom error boundaries to capture and log the error.

What I’m Looking For:

  1. How to properly handle the /multipass/login route during the OAuth2 flow.

  2. Whether this route should be explicitly defined in React Router or redirected elsewhere.

  3. Any insights on debugging OAuth2 flows with React Router.

Has anyone faced a similar issue or have recommendations for resolving this? Thanks in advance for your help!

2

When you create the auth object with something like this:
const auth = createPublicOauthClient(client_id, url, redirectUrl);
What do you have in the redirectUrl?

3

I have it as http://localhost:8080/auth/callback for dev.

4

I don’t think this is a route issue but more of a config issue.
if you look at your getting started docs you should see something like this:
Can you make sure the parameters you used are the same?

image
image2282×1234 332 KB

I am also assuming you are using a public client app not a confidential client?

1 Like
5

Yup it was a config issue, thank you for pointing that out. Helped me navigate it much faster.

1 Like