search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.64k stars 2.65k forks source link

Navigate to Previous Page without using NavigateToLoginRequestUrl to be true #2978

Closed smahajan1989 closed 3 years ago

smahajan1989 commented 3 years ago

Library

Description

As per the documentation, it has been stated that to enforce redirectStartPage parameter, one has to set NavigateToLoginRequestUrl to be true; however if I don't want to redirect to login URL, but want the capability to redirect to the page a user accessed before the login. Can I do that with the library. If yes, how?

Example: Ideal Behavior: If I navigate to "abc.com/123/232", it will go to Azure AD B2C page to login the user, subsequently will go to abc.com/123/232". In other words, maintain the state of the page Wrong Behavior: f I navigate to "abc.com/123/232", it will go to Azure AD B2C page to login the user, subsequently will go to abc.com"

Source

pkanher617 commented 3 years ago

@smahajan1989 You can definitely do this!

navigateToLoginRequestUrl is meant to do exactly what you want - navigate to the page that made the request before processing the hash. When you use the login/acquireTokenRedirect() function, the redirectUri is the first place that will get the url hash (i.e. "abc.com") - if you do not provide a value for redirectUri in the config, it will default to the current page, so you must specify this if you are on a page other than the redirectUri, otherwise auth will fail if you have not registered that url in the app configuration.

If navigateToLoginRequestUrl is set to true, when you return from a redirect and call handleRedirectPromise() the application will check which url the request came from (i.e. "abc.com/123/232"), store the hash, and then navigate to that url before processing the hash to trade for tokens. This means you must have MSAL.js running on both of those pages.

So the flow would be:

  1. navigate to "abc.com/123/232"
  2. call login/acquireTokenRedirect()
  3. navigate to the B2C page to login with the required parameters (including redirectUri, let's say "abc.com" for now)
  4. redirect to the registered uri if it matches the one sent in (3) ("abc.com") and load the page. Initialize the MSAL PublicClientApplication object and call handleRedirectPromise().
  5. handleRedirectPromise() will see that there is a loginRequestUrl cached (with value "abc.com/123/232"), store the hash, and navigate to "abc.com/123/232"
  6. "abc.com/123/232" loads and initializes the MSAL PublicClientApplication object. handleRedirectPromise() should then be called, which will see the cached hash and trade for the tokens.

One major thing to note, the URLs must be on the same domain for this to work, since they cannot access the same cache location otherwise.

You could also do this yourself by setting navigateToLoginRequestUrl to false. Then, on the page that acts as your redirectUri (AKA the place the auth service will always redirect to) you can drop a hint to yourself to navigate back to a specific page once handleRedirectPromise() resolves. As long as the pages in question are on the same domain, you shouldn't have any issues with either of these approaches.

Hope this answers your questions! Please let me know if you tried one of these options and it didn't work.

github-actions[bot] commented 3 years ago

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

smahajan1989 commented 3 years ago

Thank you pkanher617

I want to do this by setting navigateToLoginRequestUrl to false. When you indicate to drop a hint to myself to navigate back to a specific page once handleredirectpromise resolves. How would you get access to that page? Will it stored in the hash. If yes, how can i retrieve the hash.

tnorling commented 3 years ago

@smahajan1989 Can you clarify why you want to set navigateToLoginRequestUrl: false? This scenario is precisely what that flag is for. If you absolutely must do it manually, you can provide the url in the state parameter on the request which will be returned back to you in the response.

Rough example: 

handleRedirectPromise().then(response => {
if (response && response.state) {
  navigate(response.state)
}
});

const request = {
  scopes: ["openid", "profile"],
  state: "http://localhost/differentPage"
}
loginRedirect(request);
github-actions[bot] commented 3 years ago

This issue has not seen activity in 14 days. If your issue has not been resolved please leave a comment to keep this open. It will be closed in 7 days if it remains stale.

github-actions[bot] commented 3 years ago

This issue has been closed due to inactivity. If this has not been resolved please open a new issue. Thanks!