0

I have a front end SPA (single page application) and back end api.

Each event in the SPA (like button click) invokes the respective api endpoint, and displays the result in the SPA.

I want to implement Azure AD based authentication so that only my Azure Tenant users are able to use the SPA/api.

Is the following flow correct approach to implementing such a feature:

  1. User opens the SPA
  2. User clicks on login button which opens Microsoft login popup
  3. User enters Microsoft credentials in the popup, and if credentials are correct then user gets the JWT token
  4. For every subsequent api request, the JWT token is placed in the bearer header
  5. The endpoint validates the JWT token using Azure public key and rejects the request if token is missing or validation fails.

Is this flow correct and what is such a flow called?

variable
  • 8,262
  • 9
  • 95
  • 215
  • You are correct and you can [find a sample here](https://learn.microsoft.com/en-us/azure/active-directory/develop/sample-v2-code#single-page-applications). The flow you should use is Authorization code with PKCE. And I also had a sample [here](https://stackoverflow.com/questions/68763252/azure-authentication-audience-validation-failed). – Tiny Wang Dec 07 '22 at 07:36
  • Does the JWT issued by Azure contain the user name? What else does it contain? – variable Dec 07 '22 at 08:15
  • just decode the jwt token in `jwt.io`. And you can refer to [this site](https://learn.microsoft.com/en-us/azure/active-directory/develop/access-tokens) to understand the property. – Tiny Wang Dec 07 '22 at 08:17

2 Answers2

0

There are several implementation steps that needs to be performed before you will have the flow that you have described:

  • User flow needs to be configured (Azure AD) - e.g. selfsignup allowed?
  • Backend and frontend applications needs to be registered (Azure AD)
  • Permissions and scopes needs to be added (Azure AD)
  • Backend API needs to be configured (e.g. API management) in order to validate the JWT token

I highly recommend to configure one of the Azure sample implementations end2end to get and idea of all the needed tasks: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-spa-app

petermichael
  • 65
  • 4
  • This link is for Azure B2C, which probably isn't applicable given "...only my Azure Tenant users are able to use the SPA/api" – jefftrotman Dec 06 '22 at 18:24
0

The steps you outlined are correct.

An OAuth 2.0 "flow" outlines the steps to acquire a token from an Identity Provider (IdP). Since you are using a SPA, there are some restrictions on which flows you can use. A SPA can't act as a "Confidential Client" which is required for some flows. (Basically - the Client Secret required for the other flows would be visible in the browser network trace, so it's not "confidential".) The "Implicit Flow" used to be recommended for SPAs but it's less secure, so now the "Authorization code flow (with PKCE)" is recommended. Steps 2 & 3 in the question above are when you are executing the flow to acquire a token.

The authentication flow doesn't really address how you save and send the token to the API (#4 in the question), but the Microsoft Authentication Library (MSAL) helps with that - More information here - https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-overview

In Azure AD, you'll want 2 App Registrations - one for your SPA and one for your API. The API App Registration will need to "Expose an API" which really means to define a scope. Your SPA App Registration will need to Add an "API Permission" to the scope you defined from your API App Registration. (It will show up in My APIs.) This relationship is how #5 in the question is enforced.

Many of the steps for setting up authentication in Azure AD and Azure B2C are similar but Azure AD is designed for authenticating users that are part of your organization. Azure B2C allows you to build a set of users that aren't members of a particular Azure AD organization.

jefftrotman
  • 1,059
  • 7
  • 16
  • Can you help me understand what will be the contents in the jwt generated by Azure? – variable Dec 06 '22 at 19:03
  • Is there something you're specifically wondering about? – jefftrotman Dec 06 '22 at 21:46
  • For example does it contain user name? – variable Dec 07 '22 at 03:49
  • The one I just checked had my email address in a "upn" claim and my user id in a "oid" claim. If you want to see, login to portal.azure.com and look in your browser's network trace for subsequent API calls that include the auth token provided. You can also use the Graph Explorer at https://developer.microsoft.com/en-us/graph/graph-explorer but make sure to login. It actually has a button to show you the access token that you can paste into https://jwt.ms to view the claims. – jefftrotman Dec 07 '22 at 23:21