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,

Agretha

Same question here. I don't think it's currently possible with react-admin. But I'd love to be wrong about that. – Faints

I think I found a way, based on a github comment... Let me know what you think about it – Agretha

Hah, that's me on github. Discovered the example did that after I posted here. Glad you've found some success with it. – Faints

Ha, I imagined it could be you. It sent me on the right path... Thanks man – Agretha

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.

Agretha

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.

Blackpoll

Answer 3

I'm also using a solution like this.

But I can't use notify when adding noLayout.

Do you have using notify with

<Route exact path="/forgotPassword" component={ForgotPassword} noLayout/>

Hydrometallurgy

I found in <Login> component source. I need to add <Notification /> in forgot password page – Hydrometallurgy