Search code examples
react-router-domreact-admin

Set default route after login to a CustomRoute?


How would I set a custom route as the default route in react-admin with msalAuthProvider from ra-auth-msal? It seems to default to the first Resource route I have defined, but I want it to redirect to one of my <CustomRoute>s after login.

(Apologies: I'm not really sure if this is a ra-auth-msal, react-admin or react-router question!)

My current code in authProvider.ts:

import { msalAuthProvider, MsalHttpClientParams } from "ra-auth-msal";
[...]
export const authProvider: AuthProvider = msalAuthProvider({
    msalInstance: myMSALObj
});

My react-admin App.ts is below, but this always seems to try navigating to /users by default:

import {
  Admin,
  Resource,
  CustomRoutes
} from "react-admin";
import { BrowserRouter, Route, Navigate } from "react-router-dom";
import { LoginPage } from "ra-auth-msal";

import { dataProvider } from "./dataProvider";
import { authProvider } from "./authProvider";
import { Layout } from "./Layout";
import { MyCustomComponent} from "./MyCustomComponent";
import { UserList, UserEdit, UserCreate } from "./Users";

export const App = () => {
  return (
    <BrowserRouter>
      <Admin
        layout={Layout}
        requireAuth
        dataProvider={dataProvider}
        authProvider={authProvider}
        loginPage={LoginPage}                
      >
        <CustomRoutes>
          <Route path="/mycustomroute/:id" element={<MyCustomComponent />} />
          <Route path="*" element={<Navigate to="/mycustomroute/123" replace />} />
        </CustomRoutes>               
        <Resource
          name="users"
          list={UserList}
          edit={UserEdit}
          create={UserCreate}
          recordRepresentation={(record) => record.username}
        />
      </Admin>
    </BrowserRouter>
  );
}

Solution

  • Seems this question was also posted as a GH issue, so I'll answer here as well.

    ra-auth-msal has deep linking enabled by default, which means the user will be redirected to the URL they originally requested.

    If you disable this feature, the user will be redirected to window.location.origin.

    If you would like to set a default redirect route, you will need to override the handleCallback method in the authProvider.

    This could be a feature though, so feel free to open a PR to add this feature (i.e. add a parameter to set a default redirect route).