Easy Authentication with Azure App Service

Azure has several authentication methods under the Microsoft Identity Platform (MIP) to secure acess to your web, desktop, mobile apps, etc. It supports SAML, WS-Federation, Oauth 2.0, and OpenID Connect and options to allow authentication to your Azure tenant user accounts, other Azure tenants (B2B), or External parties like apple, google etc via (Azure AD B2C and the newer Entra External ID).

You can implement custom app code to handle sign-in to the MIP using the MSAL libraries (supporting many languages/platforms) that interact with the MIP (usually using OpenID Connect). If using Azure App Service (and Function Apps), you have the option to enable Easy Auth with a lot less setup. It’s best to determine your needs for authenication before jumping in too far as there are limitations to Easy Auth. One example is in the summary at the end of this post. An example use case would be an internal app you want to secure so only your company’s Azure tentant users can access.

The new Entra External ID VSCode extension can help make your custom authenication setup much quicker if you choose custom code over easy auth.

Even with the limitations there are several advantages with Easy auth in Azure App Service. Most notably speed/ease of implementation, simple integration with several auth providers (eg your azure tenant, google, facebook, etc), login/callback handler routes built into /.auth/login/providername. Another advantage is no code security maintenance work is required as Microsoft will take care of this on their platform.

When enabling Easy Auth, it is normally configured to secure pages site-wide however you can enable file configuration mode for fine grained control over authenticated pages. Let’s go through enabling easy auth to work with a Google account.

Tutorial: Create an App Service with Google sign-in

Pre-Requisites: Azure account, Google account, Azure CLI

Steps:

First lets create our azure resources: resource group, app service plan (FREE) and webapp. These are set to use ‘Australia East’ region. Feel free to change if you’d like to use elsewhere. You’ll need to come up with a globally unique name for ‘<random-name>’ below.

az group create -n easyauthtest -l australiaeast

az appservice plan create --name asp-easyauth --resource-group easyauthtest --sku FREE --location australiaeast

az webapp create --name <random-name> --plan asp-easyauth --resource-group easyauthtest

Open the Azure portal and navigate to your new webapp created in the last step.

Click on the ‘Default Domain’ in the Essentials section to verify you can access the site. It should appear like this

Navigate to your https://console.cloud.google.com account, click the project dropdown next to the Google Cloud logo and create a new project called ‘EasyAuthTest’

Switch to this project in the same dropdown, then in the left hamburger menu select ‘Apis and services’ > ‘OAuth consent screen’. Select External and click Create.

Set a Name, User support email, Developer contact email and click ‘Save and continue’ for the remaining screens.

Click ‘Go to dashboard’ and click ‘Publish app’ then ‘Confirm’

Click on the Credentials menu item and ‘Create Credentials’ -> ‘OAuth Client ID’

Select Web Application for the application type, and enter a name like ‘EasyAuthTest’.

For the Javascript URL use https://<app-name>.azurewebsites.net with the name of your app in <app-name>.

For the Authorized Redirect URI, use https://<app-name>.azurewebsites.net/.auth/login/google/callback.

Click create and copy down the client id and secret.

Back in the portal, click on the ‘Authentication’ blade and ‘Add identity provider’ and select google.

Add in your clientid and secret and click add.

Now browse to your website ttps://<app-name>.azurewebsites.net

You will be prompted for your google account, select one, and click continue and you should see the same landing page we saw a the start.

🎉 Congratulations you have now secured your Azure App Service!! 🎉

Cleaning up

Run the command in Azure cli:

az group delete –n easyauthtest

In the google portal click the Hamburger and ‘IAM and admin’ > ‘Manage resources’ click the checkbox on a project and click delete.

Summary

The steps in the tutorial can be similarly applied for other providers like your azure tenant, facebook, apple etc. One slight downside to Easy Auth is when using multiple sign-in providers it does not show a provider selection screen (eg to sign in with different providers like google, apple etc). One way to link to the various providers is to add an intermediate screen or header on your app with links to the built-in login redirect routes (eg /.auth/login/aad) see Use multiple sign-in providers.

Active Directory B2B and Entra External ID sign-in flow screens show a provider selection screen when you enable multple providers. It is possible to use these two platforms for federated authenication instead of easy auth however you would need to implement some code in your app to secure your pages and communicate with the MIP.

I hope this has helped kickstart securing your app service app. If you have any feedback or issues with the tutorial steps please let me know in the comments below and happy hacking in the cloud!