How to achive an extra custom dialog (based on server response) by login in React Admin?

Question

I want users to be able to choose a role as part of the login process. After user gives his username and password, server sends back the roles he have. How can I achieve a dialog, where user can choose a role from the list of owned roles, before the login function of authProvider ends?

The login function is a regular JavaScript function, not a React function component, so I can not call hooks from it (like useContext).

I have two guess:

1. In the LoginForm pass an async callback function to the login method (what is created by useLogin(). After server responds in the login function with the roles of the user, call this callback function with await. In this callback function, I can make the 'Choose a Role' Modal visible. I just don't see, how can I achieve that the program waits until the user hits the submit button in the 'Choose a Role' Modal, and only than return a resolved Promise. Is it possible in JS?

2. Create a 'pre-login' form, which accept the username and password, sends it to the backend, which returns the roles, show the 'Choose a Role' Modal, and call the authProvider login function only when user submits a role.

I'm really curious about your opinion and thoughts on it.

Answer 1

The login function returned by the useLogin hook accepts a second argument in addition to the credentials: redirectTo. You can provide a custom route which would display either a dedicated page for choosing the role or the login page with a sub route displaying your modal if you really want a modal.

Once the user has chosen its role, you may then redirect to the admin home page by using the useRedirect hook.