Umbraco headless member auth with external login providers

Since the release of Umbraco 12.3, it's possible to protect content through the Content Delivery API. I wanted to experiment with this myself, but just when I was about to do so, Kenn Jacobsen already came up with a very nice example. In the Umbraco Delivery API - member auth demo, it was explained in a simple way how everything worked. After following the instructions, I had the demo up and running within a few minutes.

Kenn his demo is a very nice example of how you can access content with local member logins. This example did not use external login providers, though. So, I thought it would be a good idea to add this to a separate fork of the repository. There is some great documentation on how to use external login providers for protected content in the Delivery API. Based on that documentation, I copied over parts of the Umbraco OpenID Connect example package. After that, I needed to make some more tweaks to get it working. This is the result:

The pull request

After discussing with Kenn, I decided not to merge my changes into his branch, but to keep them within my own fork. Therefore, I created a pull request where all the changes are clearly visible. You can view the PR here:

The pull request has 3 commits. I will now explain what each commit does and why.

Add support for external login providers.
After all the adjustments from this commit, it is already possible to login via an external login provider. It adds the auto link options, OpenID Connect configuration, and login form.

Logout on the external login provider.
Logging out needs to happen in several places, namely in Umbraco and the external login provider. Logging out of Umbraco was already in place, but this commit also ensures that you are logged out of the external login provider. This is done through an additional redirect. After logging out of Umbraco, it will redirect you to the external login provider to logout there. Eventually, the external login provider will then redirect you back to the React app.

Option to go to the external login provider directly.
If you wanted to use the external login provider, it could only be done by selecting that option in the Umbraco login screen. The commit adds the option to go directly to the external login provider from the React app, without first seeing the Umbraco login screen.

Short demo video

In this short video, I demonstrate how the demo works. First, I login to the external login provider via the Umbraco login screen, then I go directly to the external login provider, and finally, I login again using Single Sign-On (SSO).