Okta architecture for VueJS SPA (Azure Static Web App) and separate ASP.NET Core Web API (Azure app

Your architecture and security goals are quite standard — and your thinking is on the right track. Here's a clear breakdown of how to set up Okta for a VueJS SPA (hosted on Azure Static Web Apps) and a separate ASP.NET Core Web API (hosted on Azure App Service).

✅ TL;DR — What You Need

You should create two separate applications in Okta:

This gives you secure authentication on the frontend and enforces access token validation on the backend.

🔐 Goals Recap

You want:

1. A Sign-in Widget hosted on your VueJS SPA.

2. Only users who authenticate via the SPA should access your ASP.NET Core API.

3. The API does not act on behalf of users, only service account access to MS Graph.

4. Backend and frontend are hosted on separate domains (CORS matters here).

🔧 Step-by-Step Architecture

1. Frontend (VueJS SPA on Azure Static Web App)

• Register an OIDC SPA App in Okta:

  • App Type: Single Page App

  • Sign-in Redirect URI: https://yourdomain.com/callback

  • Allowed Origins: https://yourdomain.com

• Use Okta Sign-In Widget in your Vue app.

• Store the access token (in memory or secure storage).

• Use this token in every axios/fetch call to your backend.

✅ At this stage:

• User signs in via the widget.

• You get an access_token and possibly id_token.

2. Backend (ASP.NET Core Web API)

• Register a Service / API App in Okta:

  • App Type: Resource Server

  • Assign an Audience (aud) value (e.g. api://mybackend).

• In your ASP.NET Core Web API:

  • Validate JWT access tokens from the frontend using Okta’s public keys.

  • Use middleware like:

services.AddAuthentication(options => {
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options => {
    options.Authority = "https://{yourOktaDomain}/oauth2/default";
    options.Audience = "api://mybackend"; // Must match what's set in Okta
});

✅ This ensures that your API only responds to requests with a valid access token issued by Okta.

3. Secure Frontend-to-Backend Communication

• From VueJS, send the access token as a Bearer token:

axios.get("https://mybackend.azurewebsites.net/api/data", {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
});

• CORS: On your backend, allow CORS for https://yourfrontenddomain.com.

4. Calling Microsoft Graph as Service Account (Optional)

Since the API calls MS Graph independently, you can:

• Register an Azure AD App for the backend.

• Use client credentials flow (not user-based).

• No Okta involvement is needed here.

⚠️ Important Settings to Check

• On Okta SPA App:

  • Enable CORS for your domain.

  • Redirect URIs and Logout URIs should match your frontend.

• On Okta API App:

  • Set a unique audience string.

  • Assign scopes (e.g., api.read, api.write) that the frontend app can request.

✅ Final Summary

Let me know if you'd like:

• Example okta-auth-js or Sign-In Widget setup in Vue

• Sample axios integration with tokens

• ASP.NET Core middleware configuration

Happy to provide full code snippets.