MSAL Angular auth code flow

Question

MSAL Angular auth code flow

Chekuri, Suneetha 1

We would like to get authorization code on our angular app and pass the code node server and redeem the token on node server. Is it possible to get authorization code using msal-angular? Any recommendations on how this can be achieved?

Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2022-02-23T10:01:53.237+00:00

Hi @Chekuri, Suneetha ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept the answer" and Up-Vote for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Thanks,
Shweta
Chekuri, Suneetha 1 Reputation point

2022-02-23T13:23:00.403+00:00

I have tried getting token using msal-angular and msal-browser using authorization code flow earlier itself and it worked pretty smooth.

I was requesting for help with breakdown where I can get authorization code in angular and later on node server I would redeem the token using authorization code.
I am close to getting this done, thanks for the help.
Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2022-02-24T06:00:39.22+00:00

@Chekuri, Suneetha ,

Glad you are able to resolve the issue. Could you please share the solution so that it will helps other members of the Q & A community as well who have similar question and looking for solutions.

Thanks,
Shweta

1 answer

Your answer

Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2022-02-23T10:01:53.237+00:00

Hi @Chekuri, Suneetha ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept the answer" and Up-Vote for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Thanks,
Shweta
Chekuri, Suneetha 1 Reputation point

2022-02-23T13:23:00.403+00:00

I have tried getting token using msal-angular and msal-browser using authorization code flow earlier itself and it worked pretty smooth.

I was requesting for help with breakdown where I can get authorization code in angular and later on node server I would redeem the token using authorization code.
I am close to getting this done, thanks for the help.
Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2022-02-24T06:00:39.22+00:00

@Chekuri, Suneetha ,

Glad you are able to resolve the issue. Could you please share the solution so that it will helps other members of the Q & A community as well who have similar question and looking for solutions.

Thanks,
Shweta

Answer 1

Hi @Chekuri, Suneetha ,

Thanks for reaching out.

I understand that you are trying to get access token using Authorization code flow from an angular web Application which is now supported by MSAL Angular v2 library.

The @azure/msal-angular enable authentication in Angular Web Applications without backend servers. This version of the library uses the OAuth 2.0 Authorization Code Flow with PKCE.

First you need to register the angular application MSAL.js 2.0 with auth code flow.
Select the application registered in Azure portal.
Under manage->Select Authentication-> Add platform.
Under Web Application, select the Single-page application.

Do NOT select either checkbox under Implicit grant and hybrid flows.

By configuring your redirect URI using the Single-page application tile in the Add a platform pane, your application registration is configured to support the authorization code flow with PKCE and CORS.

Configure the required application registered values to the angular application config.

Also you need to register the node server API in Azure Portal.
In the app's registration screen, select the Expose an API blade to the left to open the page where you can declare the parameters to expose this app as an Api for which client applications can obtain access token for and add those permissions in web application.

Install angular package on NPM.
npm install @azure/msal-browser @azure/msal-angular@latest

Below is the sample you can refer to get the token using authorization code flow to call the Microsoft Graph API. In the same way you can call custom protected API registered in Azure AD.

https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular-auth-code

Hope this will help.

Thanks,
Shweta

--------------------------------------------------------------------------

Please remember to "Accept Answer" if answer helped you.

Chekuri, Suneetha 1 Reputation point

2022-02-17T13:56:53.88+00:00

Hi,

I already tired the suggested auth code flow using msal-browser and msal-angular and I am getting the token, but I am looking for the authorization code which can be passed to the backend node server where the token can be redeemed.
But looks like using msal-browser everything is done behind the scenes and I am getting the token directly, just want to check if getting just the authorization code is possible.

Thanks,
Suneetha
Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2022-02-18T03:04:42.917+00:00

Hi @ ChekuriSuneetha-0794,

Unfortunately, currently getting the authorization code is not supported by msal-angular. Although, we are exposing the authorization code in our msal-node library but that can not be redeemable at server side for security reasons.

Moreover, we are retrieving access token to call backend servers to provide authorization of a specific application to access specific parts of a user's data. If access token has been exposed at server side only, then there would not be any purpose to get the access token and validate for APIs at server end.

Could you please elaborate why you are looking to redeem the token at backend server.

Thanks,
Shweta

Share via

MSAL Angular auth code flow

1 answer

Your answer