I'm using react-admin framework where on login the page doesn't redirect to the lists page

Question

instead it shows this on the console. Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

The redirect is not working after successful login. Sometimes it works on chrome sometimes it doesn't and on firefox it doesn't work at all. I don't understand what the problem is.

My App.js code class App extends Component {

  render() {
    return (
      <Admin 
        loginPage={LoginPage} 
        {...this.props} 
        authProvider={AuthProvider} 
        dataProvider={dataProvider} 
        dashboard={Dashboard}>
          {permissions => [
            <Resource name="client"
              options={{ label: 'Client' }}
              list={ClientList}
              show={Client}
              edit={ClientEdit}
              create={ClientCreate} />,
            <Resource name="phone" />,
            permissions === 'admin' ?
            <Resource name="user" /> : null
          ]}
      </Admin>
    );
  }
}

and my AuthProvider

if (type === AUTH_LOGIN) {
    const { username, password } = params;
    const request = new Request('http://localhost:5000/login', {
        method: 'POST',
        body: JSON.stringify({  username, password }),
        headers: new Headers({ 'Content-Type': 'application/json' })
    });
    return fetch(request)
        .then((response) => {
            if (response.status < 200 || response.status >= 300) {
                throw new Error(response.statusText);
            }
            response.json()
                .then(({ user, token }) => {
                    const decodedToken = decodeJwt(token)
                    localStorage.setItem('token', token);
                    localStorage.setItem('role', decodedToken.role);
                    return Promise.resolve();
                });
        })
}

if (type === AUTH_LOGOUT) {
    localStorage.removeItem('token');
    localStorage.removeItem('role');
    return Promise.resolve();
}

if (type === AUTH_ERROR) {
    const { status } = params
    console.log(params);
    if (status === 401 || status === 403) {
        localStorage.removeItem('token');
        localStorage.removeItem('role');
        return Promise.reject()
    }
    return Promise.resolve()
}

if (type === AUTH_CHECK) {
    return localStorage.getItem('token') ? Promise.resolve() : Promise.reject({ redirectTo: '/login' });
}

if (type === AUTH_GET_PERMISSIONS) {
    const role = localStorage.getItem('role');
    return role ? Promise.resolve(role) : Promise.reject();
}

Answer 1

I'm really late to this, so you might have figured it out. But I think what you have wrong is that you're not returning the middle nested promise.

So, return response.json() might fix it. What's happening is that it's returning a promise that doesn't return anything, but contains a promise that resolves and returns. So the outermost promise just finishes without returning.