blazorwasm-cookie-auth

This repo contains 2 different projects:

1. Blazor Web App that uses WebAssembly components for interactivity (BlazorWASM.Backend.csproj + BlazorWASM.Frontend.csproj). Basically it's a hosted WebAssembly app with prerendering enabled (by default in .NET 8 RC2).
2. Blazor Web App that uses SignalR for interactivity and runs on the server (BlazorServer.csproj). Basically a Blazor Server App.

BlazorWASM.Backend uses AspNetCore Identity with cookie authentication to sign in and manage users. BlazorServer just sits alongside to demonstrate Single Sign On (SSO).

Any user who signs into BlazorWASM.Backend app gets automatically signed into BlazorServer app. Read on to see how it's done.

Also check out this sample for an example of standalone Blazor WASM with Identity.

Create a project

1. Create a new repo in Github.

2. Clone that into Rider.

   

3. Go to Rider's Local Terminal and create the project.

   Ashishs-MacBook-Pro:blazorwasm-cookie-auth ashishkhanal$ dotnet new blazor -int webassembly -au Individual -n BlazorWASM.Backend -o .
   

   1. -int webassembly means create a new Blazor Web App with Webassembly hosting the interactive components.
   2. -au Individual means use Individual Authentication which uses AspNetCOre Identity.
   3. -n BlazorWASM.Backend means name the project as BlazorWASM.Backend. In this case the WASM project is served by a AspNetCore web app, that's why I named it as Backend (backend for frontend, frontend being WASM app).
   4. -o . means put the output of the command in the current folder.

4. Rename the client project to just BlazorWASM.Frontend. So first, find the usage of BlazorWASM.Backend.Client.

   

   Change it manually, because Rider wasn't able to do it with Right Click the project -> Edit -> Rename.

   Don't bother with bin and obj folders, just delete them.

   

   Replace Backend.Client with Frontend.

   Finally, change the project reference in .sln file, rename the project folder name and the project file name.

5. Rename the BlazorWASM.Backend.sln file to just BlazorApps.sln.

6. The solution should look like this at this point and should build just fine.

   

Run the project

1. Select the Profile BlazorWASM.Backend: https and hit Debug.

   

2. Register an user.

   

   For eg: Username: [email protected] and Password: Password1!

3. Log In

4. Access protected page.

   

   View the cookie dealt out to the browser:

   

View how the auth works

This gets called when the app launches, or whenever you try navigating to any page. BlazorWASM.Backend/Identity/PersistingServerAuthenticationStateProvider.cs

Go to Login Page, provide credentials and hit login, LoginUser method gets called. BlazorWASM.Backend/Components/Pages/Account/Login.razor

After this method call completes, the cookie isn't set at this point. The Login page is still spinning:

Now back to PersistingServerAuthenticationStateProvider.OnPersistingAsync method.

During this pass, principal.Identity?.IsAuthenticated is false and cookie is still not set.

The control gets back to it right after, and at this time, the cookie is set and principal.Identity?.IsAuthenticated is true which will get the user persisted into PersistentComponentState.

Now I navigate to the auth page, this gets called again:

And GetAuthenticationStateAsync method gets called in the PersistentAuthenticationStateProvider.cs file of Frontend project because it needs to call AuthenticationStateProvider to get Name. For eg:

This method gets the userinfo from the PersistentComponentState set by the backend. [I'm not sure how this is passed to the frontend.]

This method gets called once when I navigate to this page. After that, it doesn't get called no matter how many times I come back to /auth page.

Enable SSO on a new app

Let's login users to a new app after they have signed in with our Blazor WASM app.

Add a new app to the solution

Note: This app should run on the same domain as our WASM app because cookie gets issued for a domain, localhost in this case.

Use data protection API to share cookies between applications

Install Redis on macOs

1. Follow this guide.

   When I tried this command, I got some errors:

   

   I fixed the errors by running:

   sudo chown -R $(whoami) /usr/local/var
   

   I then ran:

   Ashishs-MacBook-Pro:blazorwasm-cookie-auth ashishkhanal$ brew install redis
   

   And everything went well. 🎉

2. Run Redis server

   brew services start redis
   

3. Connect to Redis

   redis-cli
   

4. Check for Keys which will be empty at this time

   

Install Nuget package that will allow you to persist keys to Redis

Install this package on BlazorWASM.Backend and BlazorServer projects:

Setup connection to Redis

1. Grab location of Redis

   

2. Plug it in on BlazorWASM.Backend and BlazorServer projects

Configure BlazorServer app to read the same cookie issued by BlazorWASM.Backend app

_Imports.razor changes:

Auth.razor changes:

NavMenu.razor changes:

Routes.razor changes:

Program.cs changes:

Take it for a test drive

1. Run both of the apps: BlazorWASM.Backend and BlazorServer.

2. You should be able to see your key in Redis.

   

3. Login to your BlazorWASM.Backend app.

   

4. Go to your BlazorServer app's 'Auth Required' page and you should be able to view this page without any problem. 🎉

   

Stop Redis after you're done with your testing

Hit ^C and run this command: brew services stop redis.