React-admin: Allow unprotected pages outside <Authenticated>

[danejorgensen]

Please do not submit support requests or "How to" questions here. For that, go to StackOverflow.

What you were expecting:
We would like to add /registration and /forgot_password routes that are not authenticated.

What happened instead:
AdminRoutes/authProvider rejects the Promise in AUTH_GET_PERMISSIONS

Related code:

// routes/index.js
export default [
  <Route exact path="/registration" component={Registration} noLayout />,
]

// App.js
import customRoutes from './routes'

const App = () => (
  <Admin
    authProvider={authProvider}
    customRoutes={customRoutes}
    ...>
    ...
  </Admin>
)

In AdminRoutes.js, the AUTH_GET_PERMISSIONS will get rejected from the authProvider. This prevents the Admin routes from getting loaded. When you register the user and attempt to log them in, any route will generate a "Not Found" page.

As a current work around, we're setting the token and refreshing the app instead of pushing to dashboard.

function* userRegistrationSuccess(action) {
  yield put(showNotification('Registration Successful'))
  const token = action.payload.data.token || 'badtoken'
  localStorage.setItem('token', token)
  //yield put(push('/dashboard'))  // <-- "Not Found"
  window.location.href = '/'
}

export default function* sagas() {
  yield all([
    takeEvery('USER_REGISTRATION_SUCCESS', userRegistrationSuccess),
  ])
}

Environment

• Admin-on-rest version: 1.4.0/2.0.beta3
• Last version that did not exhibit the issue (if applicable):
• React version: 16.2.0
• Browser: Chrome
• Stack trace (in case of a JS error):

[fzaninotto]

Marked as enhancement. Until we implement it in core, you can still do it by not using the <Admin> component, replacing it with your own logic.

[trsteel88]

I'm having trouble adding a ForgotPassword page. How do I do this? It keeps redirecting me to the login page.

[djhi]

Hi @trsteel88, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

I invite you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!

[trsteel88]

Yeah I've seen a few comments directing that which I don't agree with @djhj. Stackoverflow has not been helpful and responses are slow. Would be good to see answers and the codebase in the one place.

In a lot of GitHub issue instances I'm sure an answer would be easier than directing someone to stackoverflow.

I think this is hindering the entry point to library. I would love to learn but I've found myself digging through the source code to learn how everything works.

I've had friends who are less experienced comment that they just can't work things out by looking at the source.

[alexmantaut]

Hi, I had the same problem, I opened this SO question (https://stackoverflow.com/q/54320260/1442457) to ask on how to implement the functionality.

I would appreciate any pointers in how to implement the forgot password functionality.

Thanks,

[devstarman]

Is there any progress on issue or suggested workaround?
I think that a lot of apps need to implement custom login, register and forgot password pages and it would be nice to have some react-admin support for that.

[yuriydobryanskyyempeek]

Looks like there is still no possibility to implement password reset functionality with react-admin

[fzaninotto]

I don't think this issue exists anymore. Custom routes aren't authenticated by default, so you can use them to implement a registration page.

I'm closing this isssue as the simple example shows custom routes that work without authentication (Go to https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple, log out, and type /#/custom in the url bar).

If you think the problem still exists, feel free to post a link to a fork of the CodeSandbox I linked showing the problem.

[notsoluckycharm]

For those who are still struggling with this, the detail is subtle. In the linked CodePen, the authorizer is still called for custom routes.

  if (type === AUTH_GET_PERMISSIONS) {
    const role = localStorage.getItem("role");
    return Promise.resolve(role);
  }

Note the always returned resolve. In the examples elsewhere in the documentation you'll find

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

Due to the reject, you'll always be bounced to the login page. So if you need unauthenticated pages, always return the role and then switch in your component on permissions.

[djhi]

Would you mind opening a pull request on our documentation to improve this? :heart_eyes:

[luisfuertes]

I have customRoutes:

  customRoutes: [
    <Route key={'forgotPassword'} exact path="/forgotPassword" component={ForgotPassword} noLayout />,
    <Route key={'resetPassword'} exact path="/resetPassword" component={ResetPassword} noLayout />
  ]

And my authProvider:

export default (type, params) => {
  console.log('authProvider type: ', type)
  console.log('authProvider params: ', params)
  if (type === AUTH_LOGIN) {
    return login(params)
  } else if (type === AUTH_LOGOUT) {
    return logout(params)
  } else if (type === AUTH_ERROR) {
    return error(params)
  } else if (type === AUTH_CHECK) {
    return check(params)
  } else if (type === AUTH_GET_PERMISSIONS) {
    const token = localStorage.getItem('token')
    const decoded = jwtDecode(token)
    const permissions = _.get(decoded, 'roles')
    //return permissions ? Promise.resolve(permissions) : Promise.reject()
    return Promise.resolve()
  }

  return Promise.resolve()
}

But always redirect to login page.... some idea?

[notsoluckycharm]

What do your regular routes / resources look like? You need at least one
resource - an empty array will always render the login page.

On Fri, Aug 2, 2019 at 4:13 AM Luis [e-mail] wrote:

I have customRoutes:

customRoutes: [
,

]

And my authProvider:

export default (type, params) => {
console.log('authProvider type: ', type)
console.log('authProvider params: ', params)
if (type === AUTH_LOGIN) {
return login(params)
} else if (type === AUTH_LOGOUT) {
return logout(params)
} else if (type === AUTH_ERROR) {
return error(params)
} else if (type === AUTH_CHECK) {
return check(params)
} else if (type === AUTH_GET_PERMISSIONS) {
const token = localStorage.getItem('token')
const decoded = jwtDecode(token)
const permissions = _.get(decoded, 'roles')
//return permissions ? Promise.resolve(permissions) : Promise.reject()
return Promise.resolve()
}

return Promise.resolve()
}

But always redirect to login page.... some idea?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/marmelab/react-admin/issues/1647?email_source=notifications&email_token=AAEUYPLDYM5OA6N7U4EJVVTQCPUBJA5CNFSM4EVG22UKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NANCI#issuecomment-517605001,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEUYPMK2MWZZ7CSICFGE6LQCPUBJANCNFSM4EVG22UA
.

[luisfuertes]

My fault. This code cause exception:

    const token = localStorage.getItem('token')
    const decoded = jwtDecode(token)
    const permissions = _.get(decoded, 'roles')

To fix:

    const token = localStorage.getItem('token')
    const decoded = token ? jwtDecode(token) : {}
    const permissions = _.get(decoded, 'roles', [])
    return Promise.resolve(permissions)