How authorization code flow works in single page applications?

Question

Hi I am exploring some of the authentication and authorization flows with respect to azure active directory. I was using previously oath implicit flow in single page application. After spending time in reading microsoft documentation, I have understood following with respect to implicit flow.

Implicit Flow:

Single page javacript application uses implicit flow to get obtain access token from azure active directory. It directly calls token endpoint to obtain the token so this makes implicit flow less secure.

Authorization Folw in .Net Web application

Whenever we use .Net core web mvc application with authorization code flow, first call will happen in browser to authorization endpoint to get code. In browser we could see the request made to authorization end point. In request url I will pass response type as code then client id and redirect ui. Here first handshake take place between browser and authorization end point. This handshake returns code to the redirect uri. Next part, application has to make POST request to token endpoint to get access token. Code received in first step I will send in token request. In this request I will include client secrete also, redierct uri also. But whenever I make first GET request to authorization endpoint I will not pass client secrete. This is because Its not good to expose secrete in browser. So in second post request I will include client secrete also. Once I get access token I will add it in api request header to make secured call to apis. This is the authorization code flow flavor I have understood with respect to .Net core web application. now I have another flavor of authorization code with respect to single page application.

Authorization Code Flow in React Web App

I have SPA react application which uses MSAL library. I have cloned sample application from github https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api/SPA.

Whenever I run this application, and sign in first call will happen as below

 https://login.microsoftonline.com/common/discovery/instance?api-version=1.1&authorization_endpoint=https://login.microsoftonline.com/c5ffa990-7e0a-4bf6-6c04-79ab98e05931/oauth2/v2.0/authorize

I am trying to understand this request. I have query string appended to the url authorization_endpoint=https://login.microsoftonline.com/c5ffa990-7e0a-4bf6-6c04-79ab98e05931/oauth2/v2.0/authorize so this may be used to return the code from authorization server. Immediately next call will happen https://login.microsoftonline.com/c5ffa990-7e0a-4bf6-6c04-79ab98e05931/oauth2/v2.0/token

to get access token and in request in FormData section I could see following parameters

client_d, redirect_uri,scope,code

In code I see some code value hopefully received from authorization endpoint. anyway this api returned me access_token.

Now coming to conclusion, In .Net core web application and React SPA application both places I am using authorization code flow.

In .Net core authorization code flow I am making use of client secrete whenever trying to obtain access token. All this happen in server side in secure manner. In react also I am using Authorization code flow but I am not using Client secrete anywhere.
In react app also I am making two requests one for authorization endpoint to get code and another to get token. All this I can see in browser itself but then How can I consider this is as secure?
In .Net web app and react app both apps making use of authorization code flow but it behaves independently depends on the type of application.
After going through several documents and videos over the internet I concluded myself as

When Authorization code flow used with server side web apps like .Net core MVC, It makes use of client_secrete to get access token and this call will happen in server side so client secrete not exposed through browser to the users

When Authorization flow used SPA applications without server side support, first it will make call to get authorization code then It will make post request to get access token WITHOUT client_secrete.The only way the authorization code grant with no client secret can be secure is by using the “state” parameter and restricting the redirect URL to trusted clients.

So I am concluding myself as when we use server side web app with authorization code flow we can make use of client secrete but in case of SPA we are not making use of client_secrete.

I have understood above concepts and explained what I understood and also I listed the confusions I got after implementing 2 flavors of authorization code flow in web app and spa app. can someone help me If my understanding is correct or not, If my understanding is wrong, where exactly I understood wrong? Can anyone help me with respect to this. Any help would be greatly appreciated. Thanks

I would highly recommend watching this video: youtube.com/watch?v=996OiexHze0. — Gaurav Mantri
you could also have a look at this article from MS: Sign in users and call the Microsoft Graph API from a JavaScript single-page app (SPA) using auth code flow — Thomas
Thanks Gaurav. This tutorial really great and what I have understood with respect to .net web app is correct and its same as explained in youtube. But with respect to react SPA application where exactly POST request happens? He is saying in back end with more secured manner(back channel) but in my react app I do not any back end service so where exactly POST request happens to get access token? — Mr Perfect
Hi Thomas I have gone through the application and I am also using similar application. In the above link you have provided we are not using client_secrete anywhere. As per authorization code flow once we get the authorization code then we make call to token endpoint along with code and client_secrete. This is how authorization code flow works. But when considering SPA application we are not using anywhere client_secrete even in the link you have shared. this is where I am stuck to understand when it comes to server side .net core web app and SPA. — Mr Perfect
Hi Gaurav and Thomas I have updated my question so what I finally concuded is when I use server side web apps like .net core mvc I can make use of client secrete to obtain access token but in case of SPA we need to emmit client_secrete in post request. Let me know If all my understanding is correct. Thank a lot — Mr Perfect

Juanma Feliu Juanma Feliu · Accepted Answer · 2021-05-25T07:59:25

Authcode flow is an OAuth 2.0 workflow, you can use it in any kind of client (Web/mobile/SPA). Clients should be using MSAL library to communicate with AAD/B2C with PKCE which is used to secure authorization code grants via Proof Key for Code Exchange (code_challenge) with S256 encryption.

Authcode Grant Flow spec:

If you are using B2C, your entry endpoint is:

https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize?
client_id=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6
&response_type=code
&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob
&response_mode=query
&scope=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6%20offline_access
&state=arbitrary_data_you_can_receive_in_the_response
&code_challenge=YTFjNjI1OWYzMzA3MTI4ZDY2Njg5M2RkNmVjNDE5YmEyZGRhOGYyM2IzNjdmZWFhMTQ1ODg3NDcxY2Nl
&code_challenge_method=S256

that will display the SignIn-SignUp-Social Login Form. Just navigate to this URL with you App ClientId registered inside B2C.

You also can take a look to the custom policies starter pack to adapt your workflow to your needs (claims).

If you change response_type=code for response_type=id_token you will get a Token that can be used to authenticate against your restricted resources (API's) after all login process. Or you can use a second call to the token endpoint to get it.

Token endpoint:

POST https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/token HTTP/1.1

Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code&client_id=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6&scope=90c0fe63-bcf2-44d5-8fb7-b8bbc0b29dc6 offline_access&code=AwABAAAAvPM1KaPlrEqdFSBzjqfTGBCmLdgfSTLEMPGYuNHSUYBrq...&redirect_uri=urn:ietf:wg:oauth:2.0:oob&code_verifier=ThisIsntRandomButItNeedsToBe43CharactersLong

code=XXXXXXXXXXXXX parameter is the access_code returned from first GET request.

How authorization code flow works in single page applications?

1 Answers