Skip to content

Blazor WASM 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 Blazor WASM app gets automatically signed into BlazorServer app.

Notifications You must be signed in to change notification settings

akhanalcs/blazorwasm-cookie-auth

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

25 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

    image
  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.

    image

    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.

    image

    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.

    image

Run the project

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

    image
  2. Register an user.

    image

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

  3. Log In

  4. Access protected page.

    image

    View the cookie dealt out to the browser:

    image

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

image

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

image

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

image

Now back to PersistingServerAuthenticationStateProvider.OnPersistingAsync method.

image

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:

image

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

image

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

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.

image

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:

    image

    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

    image

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

Install this package on BlazorWASM.Backend and BlazorServer projects:

image

Setup connection to Redis

  1. Grab location of Redis

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

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

_Imports.razor changes:

image

Auth.razor changes:

image

NavMenu.razor changes:

image

Routes.razor changes:

image

Program.cs changes:

image

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.

    image
  3. Login to your BlazorWASM.Backend app.

    image
  4. Go to your BlazorServer app's 'Auth Required' page and you should be able to view this page without any problem. πŸŽ‰

    image

Stop Redis after you're done with your testing

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

image

About

Blazor WASM 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 Blazor WASM app gets automatically signed into BlazorServer app.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published