ReAuthentication using PopUP(Auth Code Grant Flow)

Question

ReAuthentication using PopUP(Auth Code Grant Flow)

Subramanyam k 251

Hi,

This is for re-authenticating the User using a Pop-Up. Can we use the MSAL.js library with Authorization Grant Flow to serve this purpose.

If so can you please let us know the implementation steps for the same.

Thanks,
Subbu

Accepted answer

2 additional answers

Your answer

Answer 1

soumi-MSFT 11,831 Microsoft Employee Moderator

@Subramanyamk-9132, When we speak about Authorization-Code Grant flow, it goes by the steps mentioned here, OAuth protocol itself is an authorization protocol. When you are making a call to the AAD, as a response you would get the access-token (and id_token if requested for in the request).

The Authentication and Authorization go hand in hand. When you say that you are just looking for the authentication part and not an authorization, can you let me know what is the end response you are expecting for your application to work? Ideally in Authorization-Code Grant flow, you first call the /authorize endpoint to get authorization code and then you use that authorization code to get posted on the /token endpoint of AAD to get an access token. The authorization code itself is issued by AAD after authenticating the user's credentials and then asks for authorization if there are API permissions available through the consent framework. This is how that flow works.

soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-07-31T13:27:32.077+00:00

@Subramanyamk-9132, I would request you to please check the Authorization-Code Grant Flow of OAuth to understand the steps involved in it since the sample uses that same flow. For Single page applications, using msal.js only two suitable flows are available:
Implicit Grant Flow of OAuth2 - not recommended often due to caveats and security loopholes.
Authorization-Code Grant flow of OAuth2. - highly recommended as it is more secure and the capability is present only since MSAL.js version 2.xxx
soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-08-03T06:22:30.483+00:00

@Subramanyam k , Just wanted to check if the above response helped in answering your query. Do let me know if there are any more queries around this so that we can help you further.

Answer 2

@Subramanyam k , Thank you for reaching out. Yes, you can use MSAL.js V2.0 and implement Authorization-Code Grant flow and get the pop-up for the user to enter the credentials.

You can find more details here: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-auth-code#:~:text=After%20a%20successful%20sign%2Din,application%20and%20processed%20by%20msal.

Hope this helps.

Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as Answer; if the above response helped in answering your query.

Answer 3

Subramanyam k 251

Hi @soumi-MSFT ,

Thank You for the Information.

We do have any option of not getting the access token. In the above sample we are getting the access token, but my requirement is just to authenticate the user not to call any API's.

Thanks,
Subbu

soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-07-31T12:48:23.85+00:00
@Subramanyamk-9132, AAD would issue you the access-token only after getting the user authenticated. MSAL.js library helps facilitate the user authentication process with AAD.

The following section of the code would be taking the request to the /authorize endpoint of AAD to get the user authenticated:

function signIn() { myMSALObj.loginPopup(loginRequest).then(handleResponse).catch(error => { console.error(error); }); }

Do let me know if the above response of mine didn't match up with your requirement. In that case, I would like to know more about the end goal of yours, so that I can help you better. The sample that I shared, has both the authentication and authorization piece and along with the Graph API call. You can reject the rest of the parts from the sample and just go ahead with the calling the /authorization endpoint of AAD to get the pop to user to capture users credentials for getting it authenticated by AAD.
Subramanyam k 251 Reputation points

2020-07-31T13:08:27.517+00:00

Hi @soumi-MSFT,

The Sample what you have shared does both Authentication and Authorization. We are looking only for Authentication part not the authorization.

So for the above sample , do we have option to select only authentication not authorization.

Thanks,
soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-08-04T06:05:21.667+00:00

@Subramanyam k , Unfortunately, there is not as the entire thing is being handled by the MSAL.js library.. But can you please refer me to that part which you are referring to as authorization in the sample that I have shared?
Also, if you are referring to calling the API as a part of the authorization, then you can just omit that piece of code from the sample and just take the code snippet that only doing that first part of getting the auth done and issuing you the access-token. Furthermore, if you don't want the access-token also, unfortunately, there is no way. If you think the other way, once the auth is done by AAD, how would you or your application know that the authentication is done successfully by AAD, if it doesn't give you back something? AAD, does return an access-token in case of successful auth.

Share via

ReAuthentication using PopUP(Auth Code Grant Flow)

2 additional answers

Your answer