Template-created Azure Static Web App + Blazor WASM + built-in Function + MSAL: Inconsistent authentication status

[mkb13]

I originally created this issue because I thought something was wrong with the way staticwebapp.config.json worked with the template. However, it turned out to be an issue with my attempt at authentication. The only relevance this now has to this template is that I created the project in question using the template. (Also a couple of staticwebapp.config.json questions below.) But since I have an issue here and can't delete it, I thought I would include more detail about what I know so far about my actual problem -- especially since I referred to a blog post by Anthony Chu for most of my attempts at getting authentication and authorization to work.

Repro steps:
1- Created a new Blazor WASM project from the https://github.com/staticwebdev/blazor-starter template.

• In Azure Portal, created a Static Web App project per instructions (https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-blazor) and associated it with the Github project. Left everything else as default. Under Functions, I see WeatherForecast.

2- Added code for MSAL authentication as follows:

• Added package reference to Microsoft.Authentication.WebAssembly.Msal (6.0.1) in Client project
• In index.html, added script line <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script> above the script line for blazor.webassembly.js
• In Program.cs, added (before last line):

	builder.Services.AddMsalAuthentication(options =>
	{
	    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
	});

• Added Pages/Authentication.razor, Shared/LoginDisplay.razor, and Shared/RedirectToLogin.razor per https://github.com/dotnet/aspnetcore/tree/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client (LoginDisplay from the non-"Hosted" part of LoginDisplay.IndividualLocalAuth.razor)
• Replaced App.razor per https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/App.razor (the part)
• In MainLayout.razor, added:

	        <div class="top-row px-4 auth">
	           <LoginDisplay />
	        </div>

3- Created an app registration in Azure Portal with the following settings:

• Supported account types: Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts
• Redirect URI --
  ○ Single-page application (SPA)
  ○ http://localhost:5000/authentication/login-callback
• Under Authentication:
  ○ Added https://my_static_web_app_url/authentication/login-callback
  ○ Implicit grant and hybrid flows -- selected only "ID tokens"
• Other settings: Kept defaults

4- Under Client\wwwroot, in appsettings.json and appsettings.Development.json, added the following:

	  "AzureAd": {
	    "Authority": "https://login.microsoftonline.com/directory_(tenant)_id_from_app_registration",
	    "ClientId": "application_(client)_id_from_app_registration",
	    "ValidateAuthority": true
	  }

5- Published by submitting code changes to Github and going through the auto-deploy process

6- Ran website on dev machine and in "production" and verified that the Login button worked (I was able to log in with my personal Microsoft account and the UI changed to show me my name)

7- Navigated to https://my_static_web_app_url/.auth/me

Expected:
When I'm logged in, see a populated "clientPrincipal" record like:

	{
	  "clientPrincipal": {
	    "identityProvider": "aad",
	    "userId": "cff1e24b84b84e5ba2f19abc05d81293",
	    "userDetails": "my_email@hotmail.com",
	    "userRoles": [
	      "anonymous",
	      "authenticated"
	    ]
	  }
	}

When I'm not logged in, see a null "clientPrincipal" record like:

	{
	  "clientPrincipal": null
	}

Actual:
Sometimes when I'm logged in (i.e. the login control shows my name), I see a null clientPrincipal. Sometimes when I'm not logged in (i.e. the login control shows a link for "Log in"), I see a populated clientPrincipal.

Repro Repo: https://github.com/mkb13/flaky-login
Azure Static Web App: https://jolly-hill-0f81f2b03.azurestaticapps.net/

Notes:

• I tried to protect the "Fetch Data" tab as described here: https://anthonychu.ca/post/blazor-auth-azure-static-web-apps/ (not in this repro repo). (I did not use AddStaticWebAppsAuthentication, and I used staticwebapp.config.json instead of routes.json.) I noticed it didn't seem to be working consistently -- I thought there was something wrong with my usage of staticwebapp.config.json but then I realized it was the .auth/me that was not as expected.

• I am using Edge (browser). I finally got the clientPrincipal to show up after going into my Static Web App and adding a fake role to my account. After that, clientPrincipal showed up all the time, whether I was logged in or not. But it was still null when I used Edge in "InPrivate" mode.

• My assumption is I do not need to worry about the details of parsing the client principal found at https://docs.microsoft.com/en-us/azure/static-web-apps/user-information?tabs=javascript because they are handled by MSAL (and anyway I think I should see them at /.auth/me and my problem is they're not always there).

• Sometimes when running under the debugger on my dev machine, when I log in using my Microsoft account, the login screen seems to wait forever. I assume this is just an issue with debug mode because I haven't seen it in "production", but just thought I'd mention it. (It says "Waiting for browser.event..." in the status bar and never returns, but when I run it again I'm logged in.)

• Here's my staticwebapp.config.json after changing to protect the /api part (not in repro repo):

	{
	  "routes": [
	    {
	      "route": "/api/*",
	      "allowedRoles": [ "authenticated" ]
	    }
	  ],
	  "navigationFallback": {
	    "rewrite": "/index.html"
	  }
	}

Regarding this --

• The staticwebapp.config.json doesn't do anything when running on my dev machine. I'm always able to access the WeatherForecast API, despite there being no /.auth/me or equivalent (even when I'm supposedly logged in). Is this expected?
• The navigationFallback component doesn't seem to do anything anywhere. Maybe I'm misunderstanding what it's supposed to do, but if I put something random like https://my_static_web_app_url/foo, I just see the error message for not found routing from App.razor ("Sorry, there's nothing at this address."). What is it actually supposed to do?