Microsoft-authentication-library-for-js: [Help wanted] Redirect flow + react-router

[ssuvorov]

Hey, I'm submitting a...

• [x] Documentation issue or request
• [x] Help wanted

Library Name

• [x] msal.js@^1.0.0
• [x] create-react-app
• [x] react-router-dom@^5.1.2

I've created a repo based on react-sample-app which uses redirection for login. But I spent a few days just trying to make it work with "react-route-dom". The main problem was to keep the user on the same URL after login redirection happens. After the page is refreshed, the router library loses the state with the previous location. As a workaround, I used localStorage. And now I'm curious, is it a better way to do so.

Repository: https://github.com/ssuvorov/MS-SSO-react-example

My flow is the following:

• Protected route checks if .getAccount() returns data. If not - the user redirects to /login.
• Login page registers a callback registerRedirectionCallback and if the .getAccount() returns nothing - auth.loginRedirect(GRAPH_REQUESTS.LOGIN) is executed.
• once the account is there it redirect the user to a previous path.
• in case API receives error code 401 I'm going to execute window.location.reload().

Questions

1. Is it possible to use auth.loginRedirect() from any path? I'd like to avoid redirection to /login. Currently, if I use login() from http://localhost:3000/protected it returns
   >AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application
2. What's the best way to stay on /protected page after redirection happens?

[tnorling]

It is possible to call loginRedirect() from any page. Please set auth.navigateToLoginRequestUrl: true in your main configuration and pass the url you would like the user to end up on as the redirectStartPage parameter passed into loginRedirect(). The reason you are getting this error is because you are not setting the auth.redirectUri parameter and it is defaulting to the page that initiated the request. Please make sure to set the auth.redirectUri to the redirectUri registered in the app portal.

[ssuvorov]

@tnorling magic! 👍Thank you a lot!
I'd wait till the token expires and check how it behaves in this case.

• is it possible to invalidate the token somehow for testing reasons? Clearing the session storage helps only with page reloading.

[tnorling]

Unfortunately, there is not. You can submit feedback here if this is something you would like to see.

Closing as this has been answered, but feel free to open a new ticket if you have any other issues