RBAC with a Static Web App on Azure - DAV-1000/react-material GitHub Wiki

Created: 8/14/2025 10:21
Updated: 8/14/2025 10:24
Exported: 8/14/2025 15:05
Link: https://chatgpt.com/c/689daa72-28cc-8321-bdb2-7e6a996f0773

Tell me about implementing role based access control in a react static web app with azure functions

Alright — let’s break this down into a practical blueprint for Role-Based Access Control (RBAC) in a React static web app with Azure Functions.

We’ll cover:

1. Core architecture
2. Authentication & role assignment
3. Enforcing RBAC in the frontend
4. Enforcing RBAC in Azure Functions (backend)
5. Security gotchas

You’ll be dealing with three moving parts:

• React Static Web App — served via Azure Static Web Apps or another host.
• Authentication provider — usually Azure Active Directory (AAD), Azure AD B2C, or GitHub/Google/Facebook (via Azure Static Web Apps built-in auth).
• Azure Functions API — serverless backend that will do secure operations and check roles.

The flow is:

User visits React app
↓
Redirected to auth provider for login
↓
Auth provider returns token(s) → includes claims (roles/groups)
↓
React app checks roles to show/hide UI
↓
Requests to Azure Functions include access token
↓
Azure Functions validate token & roles before allowing action

• When deployed to Azure Static Web Apps, you can enable authentication without writing custom login logic.
• You can configure roles in staticwebapp.config.json like:

{
  "routes": [
    {
      "route": "/admin/*",
      "allowedRoles": ["admin"]
    }
  ]
}

• Roles can be:
  • system roles: anonymous, authenticated
  • custom roles assigned in Azure portal or via AAD group mappings.

• Install MSAL.js (@azure/msal-browser and @azure/msal-react).
• Configure your app to request ID tokens + Access tokens with roles claim.
• Assign app roles in Azure AD:
  1. Go to App Registration
  2. Under “App roles” → define "Admin", "Editor", etc.
  3. Assign users/groups to these roles.

Example React MSAL config:

const msalConfig = {
  auth: {
    clientId: "xxxx-xxxx-xxxx",
    authority: "https://login.microsoftonline.com/<tenant-id>",
    redirectUri: "/"
  }
};

When logging in, you’ll get:

{
  "name": "Alice Example",
  "roles": ["Admin"]
}

Front-end enforcement is only for UX — it’s not real security.

You might do:

function RequireRole({ role, children }) {
  const { account } = useMsal();
  const roles = account?.idTokenClaims?.roles || [];

  if (!roles.includes(role)) {
    return <p>Access denied</p>;
  }

  return children;
}

Then wrap pages:

<RequireRole role="Admin">
  <AdminDashboard />
</RequireRole>

This ensures:

• Users without "Admin" don’t see the dashboard.
• But remember: they could still call the API unless backend also checks roles.

In your Azure Function:

• Validate the JWT access token using @azure/functions-auth (built-in for Static Web Apps) or manually with jsonwebtoken.
• Check the roles claim.

Example (Node.js Azure Function):

module.exports = async function (context, req) {
  const user = context.bindingData.user; // for Static Web Apps built-in auth
  const roles = user?.roles || [];

  if (!roles.includes("Admin")) {
    context.res = {
      status: 403,
      body: "Forbidden"
    };
    return;
  }

  context.res = {
    body: "Welcome, admin!"
  };
};

For non-Static Web Apps Azure Functions:

• Use middleware to validate token with public keys from Microsoft identity platform (OpenID Connect discovery document).

• Never trust only frontend checks — tokens must be validated in Azure Functions.
• Don’t rely solely on staticwebapp.config.json for API-level protection — always check roles server-side.
• Cache token validation metadata to avoid latency.
• Rotate keys if you’re using custom JWT signing.

✅ Bottom line:

• Use Azure AD / Static Web Apps auth to handle login and issue tokens.
• Read roles claim in React for UI decisions.
• Re-check roles in Azure Functions before doing anything sensitive.

If you want, I can map out a concrete folder structure & code flow for a React + Azure Functions RBAC setup so it’s copy-paste ready. That way, you can plug in your AAD tenant and be good to go.

Are any of those options available in the always free tier

Yes — but with some nuance.
In the Azure “Always Free” tier, you can still get RBAC working for a React + Azure Functions setup, but which features you can use depends on the approach.

• Included in free tier:
  • 1 free Static Web App (Free plan)
  • Includes Azure Functions backend (in the free “Consumption” tier)
  • Built-in authentication & authorization with providers:
    • Azure Active Directory
    • GitHub
    • Google
    • Twitter
    • Facebook
  • You can define roles in staticwebapp.config.json and assign them in the portal (or via AAD group mapping).
• What you get:
  • No extra cost for auth
  • No separate Azure AD license required for basic role checks
• Caveat:
  • Custom roles for external providers are a bit limited — full AAD role management requires AAD configuration (still free for basic use).

• Included in free tier:
  • Azure AD free version supports App Registrations and App Roles
  • You can assign users/groups to roles in the Azure portal
  • MSAL-based login works fine with Azure AD Free
• Caveat:
  • Premium Azure AD (P1/P2) is only needed for advanced features like conditional access, dynamic groups, or enterprise app provisioning — not for basic RBAC.

• Included in free tier:
  • 1 million requests/month and 400,000 GB-s execution time/month free
  • Works with Azure Functions auth bindings to validate tokens
• Caveat:
  • Cold start latency (because it’s free tier/consumption-based)
  • If you go over quota, you pay per execution

• Azure AD B2C is mostly pay-as-you-go, but you do get 50,000 monthly active users free — that’s effectively free for small apps.
• If you want Microsoft Graph API calls that require premium licenses (like certain group lookups), that’s not included in free tier.

💡 Cheapest always-free RBAC combo:

• Static Web Apps Free Tier for hosting + built-in auth
• Azure Functions Consumption Plan (included)
• Azure AD Free Tier (if you want enterprise roles)

That combo costs $0 as long as you stay in free quotas.

If you want, I can make you a matrix of “RBAC method vs free-tier availability” so you can see exactly which capabilities cost nothing and which don’t. That would make planning way easier.

Powered by ChatGPT Exporter