Anthony Chu

Azure Static Web Apps includes built-in authentication with identity providers such as Azure Active Directory and GitHub. There's no configuration required to allow users to log in to a static web app.

The built-in Azure Active Directory authentication allows accounts from any Azure AD or personal Microsoft Accounts to log in. To restrict login to users in a specific Azure AD tenant or to specific users in an Azure AD tenant, we can configure Azure Static Web Apps custom authentication.

A couple of weeks ago, we looked at how to use Puppeteer with Node.js Azure Functions to take screenshots of web pages. Today, we'll look at how to render PDFs in Azure Functions using Razor and the C# port of Puppeteer, PuppeteerSharp.

A common usage of this is generating something like an invoice. We'll create PDF invoices for our favorite fictitious online store, Tailwind Traders.

Overview

We'll run ASP.NET Core Razor Pages in a .NET Azure Functions app and use PuppeteerSharp with headless Chromium to render the invoice Razor template to a PDF.

In the rest of this article, we'll walk though these steps:

1. Build an ASP.NET Core Razor Pages app that includes a Razor template and other resources required to render the invoice.
2. Create an Azure Functions app and configure it to run PuppeteerSharp.
3. Run the ASP.NET Core Razor Pages app in the function app.
4. Write a function that uses PuppeteerSharp to render the invoice and generate a PDF.
5. Deploy the app to Azure.

With a recent update to Azure Functions, it is now possible to run headless Chromium in the Linux Consumption plan. This enables some serverless browser automation scenarios using popular frameworks such as Puppeteer and Playwright.

Browser automation with Puppeteer and Playwright

Browser automation has been around for a long time. Selenium WebDriver was a pioneer in this space. More recently, Puppeteer and Playwright have gained in popularity. The two frameworks are very similar. Google maintains Puppeteer and Microsoft maintains Playwright. It's interesting to note that some of the folks who worked on Puppeteer are now working on Playwright.

Puppeteer and Playwright each support a different set of browsers. Both of them can automate Chromium. They automatically install Chromium and can use it without extra configuration.

Azure Static Web Apps is a great place to host Blazor WebAssembly apps. Among Static Web Apps' many features, it has built-in support for authentication using social logins. In this article, we'll look at how we can take advantage of Static Web Apps Authentication in our Blazor WebAssembly apps.

Overview

Azure Static Web Apps takes care of dealing with identity providers like GitHub, Twitter, and Facebook. The frontend application can then access the user's credentials using a built-in API.

Blazor WebAssembly supports custom authentication providers. We'll look at how to set up an auth provider for Static Web Apps and use it in the app. We'll also look at how to properly secure certain functionality in the app so that only authenticated users have access.

Azure Static Web Apps will soon have native support for building and deploying Blazor WebAssembly. For now, take a look at Tim Heuer's article on how to deploy it.

Azure Functions and Azure App Service recently added integration with OpenID Connect (OIDC) providers. We can now use any OpenId Connect compliant provider to authenticate users in our apps.

In this article, we'll look at how to configure Auth0 with Azure Functions. The same steps can be used to configure any other OIDC provider and can also be applied to Azure App Service.

Overview

To integrate an OpenID Connect provider with Azure Functions, we need to follow these steps:

1. Obtain a client id and secret plus other config settings from the OIDC provider.
2. Create an authentication config file in our app and add the relevant information from the OIDC provider to the file.
3. Supply the client secret in an app setting.
4. Enable file-based authentication configuration in the app.