Blazor WebAssembly authentication with Azure AD

In this video we showcase how to implement authentication with Azure AD in a #Blazor #WebAssembly application. We do it from scratch, starting from the app registration in Azure AD!

Authentication is a fundamental part of any web application. As Blazor WebAssembly is essentially a single-page application framework, implementing authentication needs to follow the ordinary patterns and best practices for this type of scenario. As it's most common, we implement an OIDC flow. Luckily, we have some help from libraries that handle most of the OIDC stuff.

After the app registration in #AzureAD, we showcase how to implement authentication. Last, but not least, we try to demonstrate how to use information about authentication state to display Blazor components only to authenticated users.

Videos mentioned:

Table of contents:
1. Intro - 00:00
2. Registering app in Azure AD - 05:16
3. Setting up the Blazor - 18:17
4. Adding authentication Razor Components - 29:25
5. Cascading authentication - 38:30
6. Displaying components only for authenticated users - 51:00

#blazor #azureAd

[davlex]

Could you please provide info about packages that should be installed? Are there some more expect Msal. I constantly getting Error CS1061 'IServiceCollection' does not contain a definition for 'AddMsalAuthentication' and no accessible extension method 'AddMsalAuthentication' accepting a first argument of type 'IServiceCollection' could be found (are you missing a using directive or an assembly reference?)

I entered this code :
=>
{
builder.Configuration.Bind("AzureAd",
});
to the Program.cs class in the Clients project

Thanks!!!

[chouseinmollachousein]

Thanks for your very well explanation and hard work!

[Seyanhyriu]

Thank you for the video! Very well explained. Thanks again

[rajkumardude]

Thanks for the video with clear explanation.

[ia]

On a topic which is quite confusing, this was really helpful. I managed to get the authorisation working. Thanks for the video

[mouradaissani]

Thank you about the great content, keep it up

[sudhanshudixit]

Hey Dan, Thank you so much for this wonderful explanation. I was able to follow your steps here and configured azure static web app against my azure AD and works pretty well.
Azure Static web app has this feature called environment and any PR in github gets deployed deployed to a different slot with <domainName>-<PRNumber> url. Since a PR number is appended to the url, it becomes difficult to login to the application against same AAD. Do you have any things what i can try in order to login when a PR is deployed?

[franksandersen]

Thanks for this nice video! I just expected you to mention the server side (API) authentication too. Will it be handled in another video? I guess you need to protect the API the same way as the client and that the client then needs to add it's token to the http server requests?

[ricardothomas]

Hello Dan.
Thank you for sharing your knowledge. It was awesome watching and implementing at the same time.
Question, How do I add security to the API layer in this type of project that has security on the front-end. How does the security on the front-end extend to the back-end. How do I use roles, claims and policies in this type of project?

[vraja]

Hey, how can we get other details like email, upn, first name etc? currently you display the name alone. what about other claims?

[vishnunair]

Logout is not redirecting to the app. but it is logging out from the MS account. Any help?

[bqjdudw]

Can you Please make a video how to create a Class for this Same (MSAL Authenticated Blazor WASM) Application

[positivevibesmr]

It was a very helpful tutorial, Thanks for your effort. Actually, I am in a problem where I have my API as .net core API and client app as Blazor client app. Both are separate. I have already developed it with Identity authentication and working fine. The Blazor client app calls the login function by providing a login model and API to authenticate that user and send JWT.
How could I integrate AAD login into this system? Any leads will be helpful :(

[lollol-lmpp]

I srat learning programming. Java or C#? I talked with ono Android Developer-fanboy of google and he sent me message "It's really good. My work uses Kotlin, every time I have to write Java now, I curse it because Kotlin is so much better.
I would only bother with c# if I were to get a job around it. " and couple days ago I read article that more project are wirte on Android in Kotrlin (I don't know is this true) so rather Java will slowly in delcalin? According you why c# not Java ? C# in future will will replace java ?

[godfredboateng]

Hi Sir, can you please do a Blazor server Authentication with Azure AD

[raditoman]

Hello!

Awesome video!

When i finish code and start app im getting this error:
blazor.webassembly.js:1 crit:
Unhandled exception rendering component: Object of type does not have a property matching the name 'PreferExactMatches'.
Object of type does not have a property matching the name 'PreferExactMatches'.|

You maybe know what is the problem?

Thanks a lot !

[michaelestrinone]

No matter what I do I am getting back: There was an error trying to log you in: ''... Can you help in pointing me to the solution of this problem? Auth.dialog shows up, I am authenticated and then this..

[TheOnlyDominik]

Thanks a lot, but could you please remove the weird background bells sound.

[Duelweb]

This video is already out of There is no startup file and no configure services!!!