CODEWITHSUNDEEP
reactjsreduxreact-admin
Woodchuck
Woodchuck

Reputation: 4414

How to re-route a React-Admin url

I'm trying to configure the login page for my React-Admin app. I'm using authProvider and LoginPage components, as per the documentation and my login process is generally working.

I have the app running locally on port 3000. But when I go to http://localhost:3000, I'm automatically redirected to http://localhost:3000/#/login.

What specifically is driving that redirection? I don't specify that .../#/login url within the app itself.

I'm using an old version of React-Admin (2.9), which I understand uses Redux. Is that redirection to .../#/login a function of Redux? Or of React-Admin itself?

My understanding is I can maybe use HashHistory or BrowserHistory to prevent the # - but not sure if that's compatible with React-Admin.

The actual issue I'm having is that once I deploy the app to my domain, the login process behaves differently compared to when I run on localhost - which is making pre-deployment testing difficult.

That is, http://localhost:3000 and http://localhost:3000/#/login both allow me to login successfully. But when I deploy to my domain, http://www.example.com allows me to login, while http://www.example.com/#/login does not.

Any idea why this would be? And can I configure a React-Admin app to not re-route to http://www.example.com/#/login?

Upvotes: 3

Views: 853

Answers (1)

MaxAlex
MaxAlex

Reputation: 3319

"If the promise is rejected, react-admin redirects by default to the /login page. You can override where to redirect the user in checkAuth(), by rejecting an object with a redirectTo property:"

React-admuin 2.9: https://marmelab.com/react-admin/doc/2.9/Authentication.html#checking-credentials-during-navigation

// in src/authProvider.js (React-admin 2.9)
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        // ...
    }
    if (type === AUTH_LOGOUT) {
        // ...
    }
    if (type === AUTH_ERROR) {
        // ...
    }
    if (type === AUTH_CHECK) {
        return localStorage.getItem('token') ? Promise.resolve() : Promise.reject({ redirectTo: '/no-access' });
    }
    return Promise.reject('Unknown method');
};

React-admin 4.3: https://marmelab.com/react-admin/AuthProviderWriting.html

// in src/authProvider.js
export default {
    login: ({ username, password }) => { /* ... */ },
    checkError: (error) => { /* ... */ },
    checkAuth: () => localStorage.getItem('auth')
        ? Promise.resolve()
        : Promise.reject({ redirectTo: '/no-access' }),
    // ...
}

Upvotes: 4

Related Questions