0
votes

I am trying to understand how to implement Authorization Code Grant in Azure. I am not sure if my understanding is the correct implementation to it but here it goes. I have 2 app service in Azure(1 for my API and another 1 use to hold my Reactjs application where it has the user interface). For me to secure my Api, I am planning to implement Authorization Code Grant.

Based on my understanding the flow would be like this:

  1. In my SPA I need to check first if user is authenticated, if not I need to redirect the user to:

    https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize? client_id=6731de76-14a6-49ae-97bc-6eba6914391e &response_type=code &redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F &response_mode=query &scope=openid%20offline_access%20https%3A%2F%2Fgraph.microsoft.com%2Fmail.read &state=12345

  2. Once the user granted it should return a authorization code

  3. (This part is a little bit confusing to me). Since I am just using Javascript(ReactJS), I think its not safe to store my client secret in my code. So I am thinking is passing the Autorization Code to my API and inside my API it will contact the Token end point

    // Line breaks for legibility only

    POST /{tenant}/oauth2/v2.0/token HTTP/1.1 Host: https://login.microsoftonline.com Content-Type: application/x-www-form-urlencoded

    client_id=6731de76-14a6-49ae-97bc-6eba6914391e &scope=https%3A%2F%2Fgraph.microsoft.com%2Fmail.read &code=OAAABAAAAiL9Kn2Z27UubvWFPbm0gLWQJVzCTE9UkP3pSx1aXxUjq3n8b2JRLk4OxVXr... &redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F &grant_type=authorization_code &client_secret=JqQX2PNo9bpM0uEihUPzyrh

  4. What should be my next step? Since I got the Access Token does it mean I can give now the data?

I read an article that "Implicit grant flow" is for SPA but its old and no longer secure. I am not sure should I use "Authorization Code Grant" or "Implicit grant flow" given my situation.

1
Is there a library in ReactJs to implement authentication of azure?Hawk

1 Answers

0
votes

Recommendations are as follows:

  • Use Authorization Code Flow (PKCE) in your SPA
  • Use a security library to do the SPA security work for you

In this case a runtime secret is generated and there is no client secret. Maybe these resources of mine will fill in some gaps for you: