Guten Tag!

Many greetings from Munich, Germany. Last week, we enabled authentication for our Quarto website that is hosted on Azure Static Web Apps. But this authentication allowed everybody with a Microsoft account to sign in. That’s usually not what we want. So let me show you how to modify the authentication settings in today’s newsletter.

Recap

If you recall, all we had to do to add authentication was to include a file called staticwebapp.config.json. Here’s how it looked:

This is the configuration that redirected unauthenticated users to https://website.com/.auth/login/aad. That’s where users could then sign in with their Microsoft account. And to be more precise, users signed in with their Azure Active Directory (AAD) account. This name still floats around everywhere even though that service is called Azure EntraID nowadays.

Add custom authentication

And the nice thing is that we can change the authentication via the same config file. All we have to do is check out this snippet I stole from the Azure documentation.

This snippet allows users to authenticate with their GitHub account. This stil doesn’t restrict the user base that can access our website by a lot. But it’s the first step to understanding how to customize authentication.

In this snippet, we have two placeholders that we should acknowledge: GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET_APP_SETTING_NAME.

Actually, there’s also a third name that we should notice: In the snippet you can see that we use "github" as an identity provider name. This means that when we throw this snippet into staticwebapp.config.json, then we should also change the redirect URL.

Failed redirect

Now, if we push these changes to our GitHub repository and try to access our website, we get this error.

Very sad, I know. But it’s also kind of expected. After all, we didn’t do anything with the names GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET_APP_SETTING_NAME. So let’s change that.

Create a GitHub Client

As we can infer from the names GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET_APP_SETTING_NAME, we need a so-called client. And that is typical for any identity provider. Whether that’s GitHub or Azure Active Directory (AAD), you need a client to handle the back and forth of credentials.

And the only reason why we didn’t have to do that so far is because the default AAD setting in Azure Static Web Apps uses a default client. But the moment we move away from that, we also have to provide our own client. Luckily, it’s usually quite easy to create one after you found the right menus to click. Let’s see how to do that with GitHub.

In your GitHub account settings, you can find the developer settings at the bottom of the sidebar.

In there, you can create a new OAuth app.

These kind of apps implement the so-called OAuth flow that is commonly used for authentication. Here, I have already created such an app with the name “QuartoAuthenticationTest”.

But let’s create a new one here. That way, I can show you all the necessary settings.

As you can see, you need to register the URL of your hosted website with the client. More importantly, you also need to declare a “callback” url. This is the URL where your authentication service expects credentials to arrive. As per the Azure docs, that URL is always just the regular URL followed by .auth/login/<IDENTITY_PROVIDER>/callback.

Get client id and secret

Once you created the OAuth app, you can see the “client ID” on the page that you are being redirected to. Also, you can create a “client secret”.

Fill environment variables

Equipped with ID & secret you can now fill the corresponding environment variables. This doesn’t mean that you have to modify the config file. Instead you have to login to Azure Static Web Apps and set environment variables for your app.

There, you will need to create the variables GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET_APP_SETTING_NAME. After all, these are the variable names you have specified in your config file.

And once all settings were saved, the redirect to GitHub should work properly. That way, you will see the following GitHub page when you want to access your Quarto website.

And once you sign in, you will be redirected to your Quarto page. Hooray.

Nice! We successfully changed the authentication from AAD to GitHub. That’s not very restrictive but the good news is that the principles with Azure Active Directory are pretty much the same. Thus, you can restrict access to your desired user base. I’ll show you how that works next week.

As always, if you have any questions, or just want to reach out, feel free to contact me by replying to this mail or finding me on LinkedIn or on Bluesky.

See you next week,
Albert 👋

Enjoyed this newsletter? Here are other ways I can help you:

• My playlist on YouTube

• Free book: Yet Again - R + Data Science

• Free book: Beautiful tables with {gt}

• Blog posts