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

Question

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.

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.

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

Possible duplicate of [How to redirect to some other route after successful authentication in react-admin](https://stackoverflow.com/questions/52060397/how-to-redirect-to-some-other-route-after-successful-authentication-in-react-adm) — Michail Michailidis, Feb 09 '19 at 07:42

score 1 · Answer 1 · answered Sep 17 '18 at 03:29

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

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 (

        );
    }
};

score 1 · Answer 2 · answered Jan 29 '19 at 14:01

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" />);
        }
    }
}

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

2 Answers2