Azure Static Web Apps has built-in Authentication and Authorization for both the web and API part of the application.

At the end of last year, I wrote about a package to make it easier in React apps to work with auth and get access to the user details. But this still left a gap in the APIs, your APIs need to parse the JSON out of a custom header, which is base64 encoded. All a bit complicated in my book.

So, I decided to make another package to help with that, @aaronpowell/static-web-apps-api-auth.

Using the package

The package exposes two functions, isAuthenticated and getUserInfo. Here's an example of an API that uses the package:

import { AzureFunction, Context, HttpRequest } from "@azure/functions";
import {
  getUserInfo,
  isAuthenticated,
} from "@aaronpowell/static-web-apps-api-auth";

const httpTrigger: AzureFunction = async function (
  context: Context,
  req: HttpRequest
): Promise<void> {
  context.log("HTTP trigger function processed a request.");

  if (!isAuthenticated(req)) {
    context.res = {
      body: "You are not logged in at the moment",
    };
  } else {
    const { clientPrincipal } = getUserInfo(req);

    context.res = {
      body: `Thanks for logging in ${
        clientPrincipal.userDetails
      }. You logged in via ${
        clientPrincipal.identityProvider
      } and have the roles ${clientPrincipal.userRoles.join(", ")}`,
    };
  }
};

export default httpTrigger;

The isAuthenticated function takes the request that the API receives and returns a boolean of whether the user is authenticated or not, and the getUserInfo unpacks the header data into a JavaScript object (with TypeScript typings) that you can work with.

Hopefully this makes it just that bit easier to work with authenticated experiences on Static Web Apps.