Azure App Registrations for a Frontend and Backend (SPAs + APIs) - Part 1

If you’re building a frontend and backend app that needs to authenticate with Azure Active Directory (Azure AD), you’ll want to register two applications: one for the frontend (SPA) and one for the backend (API). In this guide, I’ll walk you through the exact steps I used to get my apps up and running, using Azure App Registrations.

We’ll create:

• A Frontend App Registration (e.g., a Vue, React, Fastapi or Angular SPA)
• A Backend App Registration (e.g., a .NET, Fastapi or Node.js API)
• A secure OAuth 2.0-based connection between them

Prerequisites

• Access to the Azure Portal
• Azure Active Directory tenant (this works in the default directory)
• A frontend app running locally (e.g., at http://localhost:5173/)
• Some basic understanding of OAuth 2.0 concepts (scopes, tokens)

Step 1: Create Two App Registrations

🖥 Frontend App Registration

• Navigate to Azure Active Directory > App registrations
• Click + New registration
• Fill out the form:
  • Name: devopswithdave-fe
  • Supported account types: Accounts in this organizational directory only (Single tenant)
  • Redirect URI:
    • Type: Single-page application (SPA)
    • URI: http://localhost:5173/ (or whatever your frontend dev server uses)
  • Click Register

💡 This sets up your SPA to authenticate users via Azure AD.

🔧 Backend App Registration

• Go back to App registrations and click + New registration
• Fill out the form:
  • Name: devopswithdave-be
  • Supported account types: Accounts in this organizational directory only
  • Leave Redirect URI blank
• Click Register

💡 This app represents your backend API. We’ll configure it to accept access tokens next.

Step 2: Configure the Backend to Accept Access Tokens

Azure needs to know that your API will accept OAuth 2.0 access tokens.

✅ Update Manifest

• In the devopswithdave-be app registration, go to the Manifest tab
• Find this line:

  "accessTokenAcceptedVersion": null,
  

• Change it to:

  "accessTokenAcceptedVersion": 2,
  

• Click Save

💡 This tells Azure to issue v2.0 access tokens, which work well with modern libraries like MSAL.

Step 3: Expose an API and Create a Scope

• In the Backend (devopswithdave-be) registration, go to Expose an API
• Click Add next to Application ID URI and set it to:

  api://devopswithdave-be
  

• Click Save
• Click + Add a scope
  • Scope name: access_as_user
  • Who can consent: Admins and users
  • Admin consent display name: Access as user scope
  • Admin consent description: Ability to access the backend API
  • Leave other options default
• Click Add scope

💡 Scopes define what actions an access token allows a client app to perform.

Step 4: Authorize the Frontend App to Call the Backend API

Still in the Backend app registration:

• Under Expose an API, click + Add a client application
• Paste the Application (client) ID from the Frontend app registration (devopswithdave-fe)
• Under Authorized scopes, check:

  api://devopswithdave-be/access_as_user
  

• Click Add application

💡 This allows the frontend to request tokens for your API.

Step 5: Grant API Permissions in the Frontend App

• Go to the Frontend (devopswithdave-fe) app registration
• Navigate to API permissions > + Add a permission
• Select the APIs my organization uses tab
• Search for devopswithdave-be
• Click the app, choose Delegated permissions, and check:

  access_as_user
  

• Click Add permissions
• Click Grant admin consent for your directory

💡 This gives your frontend app permission to request access tokens that include the access_as_user scope.

✅ Summary

You’ve now:

• Created two app registrations
• Configured your backend API to expose a secure OAuth 2.0 scope
• Authorized your frontend to request access tokens
• Set up API permissions and granted admin consent

You can now use something like MSAL.js in your frontend to get an access token and include it in Authorization: Bearer <token> headers when calling your backend API.

🧪 Testing the Setup

To test:

• Use MSAL in the frontend to sign in a user and acquire a token
• Call your backend API using the token in the header
• Your backend should validate the token and allow access