How to redirect to some other route after successful authentication in react-admin?

Using react-admin.

I have the same question as this one, because the answer didn't work neither to me nor to the person who asked (see the comments). After the major release update, is there another option to redirect to a custom page after the successful login?

The code:

Inside my custom authProvider, when checking authentication, I am trying to redirect to a custom page:

if (type === AUTH_CHECK) {
...
if (localStorage.getItem("pageID")) {
return Promise.resolve() // goes to Dashboard
else
return Promise.resolve( redirectTo: '/pages' ); // needs to go to a custom page



However, the Promise.resolve( redirectTo: '/pages' ) simply does not work.

Promise.resolve( redirectTo: '/pages' )

If I use Promise.reject( redirectTo: '/pages' ) indeed, it tries to redirect to pages, however, as the AUTH_CHECK is failing, it returns to login and stay in loop.

Promise.reject( redirectTo: '/pages' )

pages

AUTH_CHECK

I also tried put this code inside the AUTH_LOGIN, but it does not work as well.

2 Answers
2

Currently userLogin action doesn't handle redirect path url that is the reason you are not getting redirected.
There are two ways you can achieve this. Custom login page or Custom dashboard compoenent

userLogin

Custom login page

import React, Component from 'react';
import connect from 'react-redux';
import userLogin from 'react-admin';

class MyLoginPage extends Component
submit = (e) =>
e.preventDefault();
// gather your data/credentials here
const credentials = ;

// Dispatch the userLogin action (injected by connect)
if (localStorage.getItem("pageID"))
this.props.userLogin(credentials, "/pages");
else
this.props.userLogin(credentials);



render()
return (
<form onSubmit=this.submit>
...
</form>
);

;

export default connect(undefined, userLogin )(MyLoginPage);


Custom DashBoard

import React, Component from 'react';
import push from 'react-router-redux';


export class MyDashBoard extends Component
componentDidMount()
if (localStorage.getItem("pageID"))
push("/pages");



render()
return (

);

;


I couldn't make it work based on other answer (https://stackoverflow.com/a/52360387/986160) so I did like that for react-admin 2.6.2:

https://stackoverflow.com/a/54422728/986160

import React, Component from 'react';
import Redirect from 'react-router';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';

export default class Dashboard extends Component

render()
if (localStorage.getItem("user_role") !== "special_role")
return <Card>
<CardHeader title="Welcome to Dashboard" />
<CardContent></CardContent>
</Card>

else
return (<Redirect to="/route/to/redirect" />);





Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy