error message and redirect on checkAuth reject does not work

[tuskcode]

What you were expecting: I expect that when checkAuth rejected promise, dashboard display error message and redirect to login page (like in the official example 😐)

What happened instead: nothing: i see the "unaccessible" url and the dashboard navbar, with the rest of the page blank. In the console i can see "~~ checkAuth", but nothing else happens

Steps to reproduce:

yarn create react-app test-admin
cd test-admin/
yarn add react-admin ra-data-json-server prop-types

Related code: app.js

import logo from './logo.svg';
import './App.css';
import { Admin, Resource } from 'react-admin';
import authProvider from './authProvider';
// import dataProvider from './dataProvider';

function App() {
  return (
    <div className="App">
      <Admin
        authProvider={authProvider}
        // dataProvider={dataProvider}
      >
        <Resource
          name="jobs"
        />
      </Admin>
    </div>
  );
}

export default App;

authProvider.js

import { AuthProvider } from "react-admin";
import sdk from "./app-lib/sdk/sdk.service";

const authProvider: AuthProvider = {
    // called when the user attempts to log in
    login: ({ username, password }) => {
        console.log('~~ auth: login')
        return new Promise((res, rej) => {
            sdk.authenticate({
                email: username,
                password,
                remember: true,
            }).then((response) => {
                console.log(response)
                const { access_token } = response.results;
                sdk.setAuthorization(access_token as string);
                localStorage.setItem('access_token', access_token);
                return res('');
            }).catch(e => rej('Wrong username or password'))
        })
    },
    // called when the user clicks on the logout button
    logout: () => {
        console.log('~~ auth: logout')
        return new Promise((res, rej) => {
            localStorage.removeItem('access_token');
            return res('');
        })
    },
    // called when the API returns an error
    checkError: ({ status }) => {
        console.log('~~ auth: checkError')
        return new Promise((res, rej) => {
            if (status === 401 || status === 403) {
                localStorage.removeItem('access_token');
                return rej('Si è verificato un errore');
            }
            return res();
        });
    },
    // called when the user navigates to a new location, to check for authentication
    checkAuth: () => {
        console.log('~~ auth: checkAuth')
        return Promise.reject({redirectTo: '/#/login'})

        // TODO: check if access_token is valid with sdk.getMe()
        // const access_token = localStorage.getItem('access_token');
        // if (access_token) {
        //     return new Promise((res, rej) => {
        //         sdk.getMe()
        //             .then(() => res())
        //             .catch(e => rej('User not logged in'))
        //     })
        // } else {
        //     Promise.reject()
        // }

        // return localStorage.getItem('access_token')
        //     ? Promise.resolve()
        //     : Promise.reject('User not logged in');
    },
    // called when the user navigates to a new location, to check for permissions / roles
    getPermissions: () => {
        console.log('~~ auth: getPermissions')
        return Promise.resolve()
    },
};

export default authProvider;

Environment

• React-admin version: 3.19 but also 4.2
• Last version that did not exhibit the issue (if applicable): none
• React version: 18.2
• Browser: chrome
• Stack trace (in case of a JS error): none

[djhi]

Thanks for reporting this. Please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

[tuskcode]

Thanks for reporting this. Please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

I had some problems with CodeSandBox, so I created a github repo: https://github.com/tuskcode/react-admin-test

Go to http://localhost:3000/, you'll be redirected to http://localhost:3000/#/users. If you open che console you can see that first of all getPermission was triggered, after checkAuth, and then you can see a log "token not set. I want to be redirected to /#/login", so promise is rejected, but the url stay the same

[tuskcode]

I just saw that codesandbox manages to start every github project, so you can see the problem here: https://codesandbox.io/s/github/tuskcode/react-admin-test

(sorry closed by mistake)

[WiXSL]

Your code example cannot work. dataProvider is the only required prop of Admin component, and you don't have it set or even have a dataProvider in your test example.

[fzaninotto]

I can't run the CodeSandbox now, but I think you shouldn't include the # in the redirectTo:

{redirectTo: '/login'}

should work

[slax57]

No news for some time, closing.