How to implement forgot password page on react-admin

Question

I have a dashboard implemented on react-admin. The authentication process was done following this tutorial.

Now I need to implement a forgot password screen, but the problem is that this screen needs to be accessible without being logged in...

I thought of 2 possible ways to implement this:

1. Ideally I would like to configure react-admin to allow unauthenticated access to a particular route. Not sure on how to do this, or if it is possible... I found this Github issue mentioning this as an enhancement, but it does not explain how to get around the issue.
2. Implement this screen separately in react and handle routing to this page separately. Not sure on how to do this on the framework either...

Can someone explain how to implement either option on the framework?

Thanks in advance,

Answer 1

Based on a comment on the Github issue, I ended up implementing a workaround based on the simple example.

The main thing I did was to add a few custom routes with the noLayout option. These custom routes do not seem to go through authentication for some reason I could not find in the documentation.

So, I redefined my App.js file:

const App = () => (
  <Admin
        loginPage={Login}
        authProvider={authProvider}
        dataProvider={dataProvider}
        i18nProvider={i18nProvider}
        title="Example Admin"
        locale="en"
        customReducers={{ tree }}
        customRoutes={[
            <Route exact path="/forgotPassword" component={ForgotPassword} noLayout/>,
            <Route exact path="/resetPassword" component={ResetPassword} noLayout/>,
        ]}
    >
        {permissions => [
            <Resource name="users" {...users} />,
        ]}
  </Admin>
);

Anyways, this is the solution I came up with, not sure if it is the right one. Please let me know if you find something better.

Answer 2

I had a similar issue and adding custom route with noLayout option still sent me to the login screen.

It turned out not to be the checkAuth part of the authProvider causing this.

The cause was getPermissions part of the authProvider

Under the condition where permissions could not be found I had: return Promise.reject();

Changing this to: return Promise.resolve([]); solved it for me.