Mastering Custom Cookie Authentication : A Guide to .NET 8 Blazor with Interactive Wasm Render Mode.

Summary

このビデオでは、.NET 8 Blazor Webアプリケーションでのカスタムクッキー認証の実装について詳しく解説しています。講師のフレデリックは、WebAssemblyレンダーモードでのクッキー認証の作成方法をステップバイステップで説明し、サーバー側とクライアント側の両方で必要な設定とコードの変更を紹介します。具体的には、パッケージのインストール、データベースサービスの設定、新しいプロジェクトの作成、ログインと登録フォームの実装などが含まれます。このビデオは、.NET技術、特にBlazor WebAssemblyに関心のある開発者にとって非常に有益な内容となっています。

Takeaways

• 👨‍💻 Demonstrates how to implement custom cookie authentication in Blazor WebAssembly app
• 🔑 Uses Identity framework to handle user authentication and authorization
• 📝 Creates custom ApplicationUser class to extend IdentityUser
• 📥 PersistentServerAuthenticationStateProvider prepares auth state on server
• 📤 PersistentAuthenticationStateProvider maintains auth state on client
• 🌐 Minimal API endpoint used for logout to access HttpContext
• 📃 Customizes login and register pages
• 🍪 Shows how auth state and cookies change on login/logout
• ⚙️ Registers services and components needed for custom authentication
• 🔐 Implements authorization check on Razor components using @attribute

Q & A

Blazor WebAssemblyのレンダーモードでカスタムCookie認証を実装する際の主なステップは何ですか？

主なステップには、クライアントとサーバー側のパッケージのインストール、データベース接続文字列の作成、データベースサービスの追加、Identity DBコンテキストの設定、PersistentServerAuthenticationStateProviderとPersistentAuthenticationStateProviderクラスの作成、ログインと登録ページの作成が含まれます。

BlazorアプリケーションでカスタムCookie認証を実装する目的は何ですか？

カスタムCookie認証を実装する目的は、デフォルトの認証メカニズムをカスタマイズして、アプリケーションに合わせた認証フローを提供することです。これにより、特定のユーザー認証要件に合わせて認証プロセスを細かく制御できます。

「PersistentServerAuthenticationStateProvider」と「PersistentAuthenticationStateProvider」クラスの役割は何ですか？

「PersistentServerAuthenticationStateProvider」クラスは、サーバーサイドレンダリング時にユーザー認証を処理します。一方、「PersistentAuthenticationStateProvider」クラスは、クライアントサイドで認証状態を維持し、利用します。

Blazor WebAssemblyプロジェクトでIdentityを設定する際に必要なパッケージは何ですか？

EF Core、SQL Server、EF Tools、Microsoft.AspNetCore.Components.WebAssembly.Authenticationなどのパッケージが必要です。

カスタム認証でユーザー情報をDBに保存するためにIdentity DBコンテキストに追加する必要があるクラスは何ですか？

アプリケーションのユーザー情報を保存するために「AppUser」クラスをIdentity DBコンテキストに追加する必要があります。これにより、デフォルトのIdentityユーザークラスを拡張できます。

Blazorアプリケーションでカスタム認証のために必要なデータベースの設定はどのように行いますか？

appsettings.jsonファイルに接続文字列を定義し、Program.csファイルでこの接続文字列を使用してEF Coreデータベースコンテキストをサービスに登録します。

ログインと登録ページをBlazorアプリケーションに追加する際の注意点は何ですか？

ログインと登録ページには、適切なルート属性を設定し、ユーザー入力を受け取るためのフォームを含める必要があります。また、認証処理を実行するためのロジックも実装する必要があります。

Blazor WebAssemblyアプリケーションでログアウト機能を実装するためにはどうすればよいですか？

Outlines

00:00

😀 Introducing the video and goals

The speaker introduces himself and states the goal is to look at custom cookie authentication in Blazor using interactive web assembly.

05:02

😀 Installing necessary packages

The speaker walks through installing Entity Framework, SQL Server and other necessary NuGet packages.

10:09

😀 Setting up the database context

The speaker sets up the database context by creating an AppUser class that inherits from IdentityUser and an AppDbContext class.

15:09

😀 Implementing user authentication

The speaker implements authentication by creating classes to manage the authentication state on the server and client side.

20:16

😀 Building the login and register pages

The speaker builds out the login and register pages, including the necessary models, methods and UI.

25:17

😀 Adding the ability to log out

The speaker adds the ability to log out by implementing a minimal API endpoint and wiring it up correctly.

30:22

😀 Accessing user claims

The speaker accesses the user claims to display the user's name instead of their email on the nav bar after login.

35:27

😀 Wrapping up

The speaker concludes by summarizing the video and key things that were covered regarding custom cookie authentication.

Keywords

💡custom authentication

The main theme of the video is implementing a customized authentication system in a Blazor web app using cookies. This allows controlling how users log in and access authorized content.

💡interactive web assembly

The video focuses on adding custom authentication in Blazor apps using client-side web assembly rendering specifically. This renders UI components client-side.

💡authentication state provider

A class that handles managing the user's authentication state across the app. The custom server and client implementations allow sharing auth state.

💡identity services

Services like Identity DB context, user manager, sign in manager etc. that are used to implement core user identity and access functionality.

💡claims

Properties like user ID, email etc. that are extracted from the authentication state to identify the user.

💡authentication token

The token string stored in the browser cookie that contains information about the authenticated user.

💡cascading authentication state

A service that propogates the user's authentication state across the Blazor app for authorized components.

💡custom cookies

Instead of the default identity cookies, custom tokens are generated after user login and stored to authenticate them.

💡login / logout

Custom login and logout pages are created to demonstrate usage of the custom authentication implementation.

💡navigation manager

Used to navigate between pages in the Blazor app, utilized for redirects based on authentication state.

Highlights

Explains custom cookie authentication in Blazor web assembly interactive mode

Installs packages and sets up database services and identity context

Creates custom application user model

Sets up persistent authentication state providers

Implements login, register and logout pages

Secures routes with authorization

Registers services for authentication

Shows demo of register and login functionality

Displays logged in user's name

Tests logout and removes authentication cookie

Creates multiple test users

Fixes display name issue from database

Rebuilds and retests application

Verifies customized name display

Concludes overview of implementation

Transcripts

hey everyone welcome back to net code help  Channel I am Frederick and I'm happy to have  

you here today in this video we are going to  look at custom cookie authentication in net8  

Blazer web app with interactive web assembly  render mode I've made a video on how to create  

cookie authentication in interactive server  render mode and on this video is focusing  

on the web assembly render mode when we say  cookie it is just a piece of um token which  

is set to the cookie storage of a browser  and now which holds the identity of the user  

anytime a request is being made the token  or the cookie has to be retrieved by the  

server verify it and um grind access to the  user and now in this case we have a default  

one um that is when you use the individual  account and this time around to we are going  

to look at how to customize that into a small  unit that you can implement it easily in your

application so before we Dive Right into this  make sure you have subscribed already and also  

click on the notification Bell to receive update  as soon as I do upload new video like this also  

like this video to support this Channel and this  video as well the source code of this project  

will be available as you know already so if you  want to grab it to just guide you check the video  

description and it will be available if you want  to have a look on the authentication the custom  

cookie authentication using the interactive server  render mode then check the playlist it's all found  

under the description so you can actually check it  over there I do offer coaching session to people  

who are interested in net Technologies talking  about Blazer web assembly server net8 um web  

API Mar Blazer hybrid and a lot so if you're  interested check the video description I have  

an email in there you can write to to me through  it all right so let's Dive Right into this we're  

going to create a new project so launch of Visual  Studio 2022 and I click on new project I know by  

now you know how to create project isn't it  yes of course so click on Blazer web app and  

here we're going to give the name as custom cookie  Earth Blazer we assembly what I'm trying to mean  

here C some Quicky authentication in Blazer web  app with web assembly interactive um render mode  

so choose a location here and I click on next to  get this project created so once the project has  

finished creating what we're going to do here  is we're going to install our packages for the  

client and also the server aside from installing  the packages we are going to create our connection  

strings and now add database services and Etc  to get at the database of identity DB contest  

because we're going to use identity manager  in this so we have to add the services and  

un perform migration good and I believe for that  you know how to do it already isn't it now when  

we are done we going to add idty DB contest this  is not a um connection for database rather for  

user manager okay you're going to add a service  so wait after adding the services we're going to  

create two classes one in the server and one in  the client the server one you're going to name it  

as persistent server authentication State provider  and now the client one is going to be persistent  

authentication State provider why are you creating  these two classes forther research the persistent  

server authentication State provider prepares  authentication of the user in the server that is  

when server side is rendering that is server  side rendering and now it's sent it to the  

client now when it gets a client the state of the  authentication must be maintained and it must be  

utilized as well and that is where the persistent  authentication State provider comes in so it makes  

sure that authentication which has been received  from the server is intact and it then utilizes  

in the client side rendering you see so we need  these two classes one for each of the projects  

okay once you're done we create our Pages log in  and now register and now off you go so these are  

the stages are going to pass through to finish  this cookie or custom cookie authentication with  

interactive web assembly render mode now you have  the gist of it let's get going now when you go to  

the solution you see we have two projects in here  we have the client this one and that is the server  

so that's where we're going to create our custom  modication to we focus on the uh the server then  

we're going to consume it in the client very  simple one okay so all the work are going to  

happen in the client not in the server and when  you are done the client is just going to consume  

it very simple way okay now let's install packages  in here and you know since you're going to use um  

idb context it means we need a ef ef tools and now  SQL Server so right click on dependencies and now  

let's add this packages so click on the browse Tab  and in here we going to search for the efcom tools  

um the tools and that's again we have toq server  and the efq itself okay so here that's what we  

have so for me since I have the package reference  already I'll just close this then I I click on the  

server site I go to unload project and now from  this section the item group I'm going to paste it  

in here so what I need to do here is just type in  an item group and I'll paste this here this is the  

one that I needs okay so I'll add them in here so  we need three packages EF call SQL server and our  

tools okay let's save this right click solution  right click this and now reload project with

dependencies we then go to the client you right  click on the client then go to unload project and  

I'm going to add the same thing to this that is  a component web assembly authentication so this  

what we need then let's save this as well and  now go to reload project with dependencies so  

when you check dependencies packages you can  see we have the packages in here right when  

you check for the dependencies packages for  the client we also have then here what left  

here is to build this together so let's build  solution all right so you can see that the the  

project building is completed and our two  suceeded it means that all the project are  

built the next thing that we're going to do  here is to create our application user now  

we can defaultly when to use identity user  it has a default buildin properties and here  

maybe you like to add some properties to this  so maybe you're going to extend the class and  

we going to add maybe username okay so we  have to do that let's come to and this must  

be held in the server project so take note  we let's add maybe class a folder here and  

I'm going to say this of authentication so  everything here is of authentication right  

click on this you're going to add a class to  and I'm going to name it as AB user for short

this app user is going to inherit from Identity

user identity user and now this is coming

from let's see so Microsoft as  net code identity so this has  

some default properties and we want to add name to

this so if case you have any  extra properties you just add

it okay so this is what we need to  do now aside from doing this let's  

now go in and create our appdb contest so in  authentication I'm going to add my abdb contest

class and now this class is  going to H from Identity DB

contest and now within this you  have to pass in the app user that  

we created we can create Constructor for  this then we pass in this appdb contest

class okay you need not to create any table  here okay because this has it all that's all  

that we need to do so let's save this the  next thing that we're going to do is to  

create our connection string in the app  setting. Json so here we're going to say  

that connection strings then you're going  to be default connection so I like to name  

it as only default now server is equal to  local and database this equal to wasm ah  

so I'm going to say cookie DB now aside  from this I'm going to say trust server

certificate or this is trusted

connection set this to  through and now trust server

certificate let's set this to through as well  okay so this what that we need to do let's save  

this the next to do is register the connection  string in the program.cs file so go to the next  

stage and then before the app build you're going  to say builder. services. rdb contest we pass in  

this appdb contest class that we created  in that we're going to pass in an option  

an option. use SQL server and in here we have  to provide the class connection string that we  

created so get connection string and that is this  one and what is the name do you remember that is

default so default you must make sure it is the

same okay so default can just cross check it copy  this go to app settings and I make sure it is the  

same that's fine okay so now that we are done we  need to register the identity manager service so  

down here we're going to say builder. services  do add identity call this one passing the app

user so here Dot add Entity framework store  and the store will need an application appdb  

contest class aside from this you passing add  signning manager and the last one add default  

token providers okay so we need to add this servic  in here okay now that we are done we can go ahead  

and app for my migration so let's save this  we're going to build everything again so build

solution okay so now that this is built  we going to perform migration we go to  

package manager console and in here  we're going to so add- migration we  

want to put this so migration  and I'm going to say this is

first now after this has been  created we're going to update

database now this is going to create all tables  that are necessary for this Identity or user  

manager okay so you can see we have a lot of  tables being created when you check here you  

know this already so I need not to explain but  if you don't know these are the tables that is  

going to create and these are the columns I'm  going to create for each and all these are  

coming from this this guy this one okay good  okay so we have the table we have a database  

created if you want to actually check it click  on SQL Server object Explorer then in here you  

have to check the service my server here is  a local so I'm going for this SQL service  

and that's the last one desktop so go to  database and you can see cookie DB cookb  

this the database and if I open the tables you can  see that you're going to have a lot of tables in

here so let's wait for the table to get loaded you  can see you have all this table coming out from  

theid DB contest class that's fine okay okay so  this even the cookie DB so when you check cookie  

DB it is the same okay so tables let's close this  yeah can see we have the same thing in here so now  

that we are done we're going to now prepare user  authentication okay so in that we have to create  

our persistent Ser authentication State provider  as I said earlier on this going to inherit from  

server authentication State provider and now  this prepares the user authentication using the  

persistent component State service okay then aside  from that to repace it send to the client and I  

in the client persistent authentication State  provider also which in from the authentication  

State provider receives it and I'll maintain  it and utilize it in the client session when  

the app is running in an um CS the client side  rendering but in the server side rendering as  

SSR it is the persistent server authentication  State provider so let's go in then and create that

class so from the authentication we're going to  

add a new class to this and I'm  going to say that is persistent

server authentication States provider okay  so that is a name very long persistent server  

authentication State provider okay so we  have this and now this class is inheriting  

from server so server do you have it  let's see Server Authentication State  

provider okay and in that you have  to implement the interface for ID

disposable then you know we need to implement  something like this and interface in here okay  

that's a dispos method to get rid of that that  error okay so in here what I'm going to do  

let's have our um private read only property  for persistent component States so I'll this

this so that'll be this one  and aside from that you have  

this ping component State we also have to get

our identity options so let's also get this  property also here the next one we need our  

component State subscription so we need to get  this guy so this are all property is that we  

are setting and and the next one we need our  authentication task so let's also have this  

one so we have priate only because aside from  this scope we don't want to be using this you  

want to maintain it to the scope of this okay  so you know we have to generate a Constructor  

and we need to register so from here we create  our constractor and this is a Constructor so  

we pass in this persent components State and now  we're initializing it in here so state is equal  

to this person component state so we initialize  it in here okay now authentication State change  

we want to call this method we haven't called any  method yet so we're going to write defination for  

this method okay when authentication changes  that's where you want to get this guy called  

okay so on authentication State change we want  to just assign the authentication task to the  

current task that we have and that exactly what  we doing from the next one so on authentication  

State change you passing it's going to call  or it's going to pass in this as a payload  

and now we assign the property that we created  in here to the outcome or the results of this  

task okay good now we are done we go to the next  one that's the UNP persistent async so in this  

method what we're going to do here is we're  going to extract because when the page loads  

when the page refreshes the component state  is going to be sent from here or we're going  

to prepare the the user authentication and I'll  send it to the client okay so we need to pass  

in properties that we need such as our claims  and Etc and the claim you could use an ID name  

email and Etc so that's where you need to Pro  provide or prepare all these um materials okay  

that's what we're going to be using so here with  un persistent async what are we doing we first  

want to assign or get the authentication of the  user and that's what we doing here so we assign  

this authentication State provider to the tax  that we have been assigned it in here and aside  

from that we want to grab the principal of that  user so we can get it from this authentication  

State and quickly let's grab that okay so render  mode we need to include this one so we get the  

user so now when we get the user we can now go in  and extract the user info so we going to extract  

it let's first check if is authenticated that is  where you want to do this because if it has not  

authenticated it means you don't have any current  claims and you cannot extract claims once they  

are not there okay so we want to make sure they  are there and here we need need maybe the user

ID you need the user ID in here  we also need user email and maybe  

we're going to need a name so we  can add one now let's say this is

name so we can have an extension of name username  okay so do we have username we have um username in  

here so maybe since we are not having that uh we  can use we can just get the name directly from the  

claims which is coming from the principal and we  can just search for the name that we added and I  

get the value okay so we have these three claims  and that's what we're going to be using okay but  

here in order to send this three properties to  the client we need to have a class that get to  

handle all this because it is appropriate to  put everything in a model so we can just send  

it once and for all okay so in that we need to  create a class and this class you can name it as  

user info and Etc so maybe we can just go to the  client and now since you're going to consume this  

in the client we need to put it in a client so we  can be using or you can add Modo to this and I'll  

add it in here but don't worry you can actually  add it from this so with this two we're going to  

say this an authentication from the client and we  going to to um add a class this class is going to  

be an user info and that user info we definitely  going to use user ID this user ID you know it is  

supposed to be string and we need an email for  this and email you know is also what string and  

you can add last one and that's going to be name  okay so so we need these three properties and now  

in here we can just go in there and now check  so before we checking we can before we assign  

this or we populating this to the model we can  just check it first to see if the claim that it  

got none of them is null before we start working  on it okay so if user ID to null and let's add  

this let's add the name as well because we added  that so and so this this time around is not going  

to be name a email it's going to be what name  so if they are not now that is only when you  

want to prepare this from the component state so  let's say we want to prepare them here so we grab  

them and as the user info and now here you can  see from this name space we are adding it from

here and that is from the client  Authentication folder okay we are  

not using Row for now so we change this to  name and now we are making a reference of this

name if it is row that you want to also  add then you add it to you add it as a  

row and that's all okay so now that this is  set and done when the page disposes we want  

to dispose a subscription and also you want to  uh remove the authentication State change yes  

so this is all we need to do very simple one as  well and that is it one okay so let's save this  

then we can now Clos this after creating this  you know definitely you have to register the  

service isn't it yeah so we go to the solution  program and now in here we can add the service  

so br. services. add let's first add cascading  authentication state before we forget it again  

and let's add beta. Services dot this going  to be scoop and I we need our what is the  

name we have persistent authentication  State provider and now this is coming

from you know this supposed to be here supposed  to be provider because it is coming from this okay  

so I it provider then press assistant allate  provider so we are creating a scope depend  

injection between this provider the main one and  there's the fake one okay so that's what we need  

to do in here okay so aside from that we go to  our route and Route can be find the component  

folder and in a route. Razer we never going to  find it in here okay so inside this route we  

need to make some few changes in here okay so  in here I'm going to just replace this one and  

um we have main. layout so you know where it's  coming from we have to include the name space in  

here using this authorization and now with this  redir login we're going to create this later on  

so for now we can comment this up okay so it is  is a noral thing that we doing all that I did was  

to add this authorized Rod View and now if it is  not you want to redir to login okay that is all  

thing all I did and now here we need not to at  first when you check Net 7 net say and Below you  

have to add cascad authentication State markup or  the component to S this isn't it good but for now  

since it has turned to a service and you have  added a service then I don't think you need to  

use that so you can skip it if you decide to also  bring it well it will be there but if you escape  

it it's going to work so the next thing that we're  going to do here is um you're going to work on the  

sign out now when using identity manager if you  want to sign out you must sign out in an HTTP  

contest and now this happens only when a call is  being made to an API that's where you can have  

access to this else when you decide to use an HTTP  contest as a cascading um value and you want to  

sign out it's not going to work okay because that  instance answer is only read only if you want to  

if you can have access to this to sign out then  we have to use a Minima API okay so we're going  

to create one Minima API and that's I'm going to  use to sign out if you actually check the original  

docs or the original implementation of this when  you choose individual account you will see that  

the same thing is what you're going to do here  okay so no different the same thing just that  

going to scrap all the one that we don't need and  I maintain the only ones that we need and that's  

only one here one for sign out okay so this going  to happen in the server we are still you see that  

we are still working in the server we haven't  touched the client yet so we are still working  

in here okay so let's right click on this and the  name is too long for me so let me just copy this  

from here so we click on the authentication we're  going to add a class to this and this is going  

to be identity component end point route Builder  extension H very long okay so the reason why the  

name is too long here is when you go to program.cs  it is coming from this Builder extension okay so  

we going to implement as a part of this and  it's also idty is an end point so that's why  

they combine it but well you can just modify this  um to make it a small one for yourself okay so now  

let's go back now we have this this must be an  internal and it must be a static class so we're  

going to use it in here only okay now within this  we need to create a static method which at the  

end is going to return our end point conversion  Builder so let's say it's going to return our  

endpoint convention Builder and now this is a  name map additional entity end point and now  

within this we can pass in the I end point right  Bel that a parameter and now the extent that going  

toate going to affect this so anytime or wherever  we are we can grab the contest from this end point  

throughout Builder straightforward okay so maybe  would it be possible if I bring it here okay then  

let's see so now that we have this what are you  going to do very simple endpoint we're going to  

check if it is now we can try an exception or we  can skip this I don't think this is necessary for  

now okay so let's create our account group we map  the group in here so if you want to check this we  

create an account group and now the account group  the route here is an account SL account and we  

have a method known as log out so the full roue  going to be account SL logout okay we inject our  

principal then our signing manager which coming  from this app user not application you come  

from the app user and then here we have a signing  manager because that's the instance of the signing  

manager and I know this manager can assist us in  signing in and I'm signing out so while it gets  

up to this with a context we can just rather sign  out in here when we sign out you want to redirect  

to the homepage so you can specify if you want to  redirect to any page of your choice you can just  

pass in maybe lock out then this and that but  as soon as you sign out you go to the home home  

page okay that's what we are doing for now okay  now let's save this so we are done with this now  

what we need to do is to register this so where  can we do it what do you think H definitely going  

to do the service what the service the program  so go to program.cs file and now where we have  

this um pipelines we're going to pipe it line  in here so let say app. map identity the this  

one okay we have to map it in this format very  simple one and and that is all okay there comes  

in our form so we need to create our login and  our register forms right click on the pages and  

let's add maybe we can add a folder here and name  it as authentication or we can keep going and add  

a page let's make this as login so in here on  top we need to inject our signing manager user  

manager and also navigation manager you need to  inject this aside from that you can specify log to  

this so maybe account SL login or just login only  there's a route login okay now this must come from  

microsoft. notore Identity so we have to include  the name space in here okay let's save this and  

now this must be an app user not application so  app user and you know it must we must add the  

reference so we must include this reference  in here okay now we have to design our form  

but before we design our form we have to create a  model and maybe this is going to be a model we're  

going to have we're going to maintain what we have  already default one and down here we're going to  

have our input model so this is a seed class and  we have you have to include this data annotation  

and we have email and password okay so we don't  want to remember me for now we want to have email  

and password okay so once you have this we going  ahead to create an instance of this so you want  

to say that from here we have form input model  as input then we create a new now if I click on  

or if I fill up the model and I click on login  this what I want to execute I want to just log  

in log in the user so let's have this method  in here very simple one so log in a sync and  

now if I log in user this what I'm doing okay so  we have this public and I think we have to close

this yes and and for this error I think I have to  you have to create a property to handle this on  

top here string error and now you have it set okay  now claim times we need to include system. claims  

to get this also solved now can see from here  that we find the user by the email that has been  

entered if we find it uh we're going to get here  we don't need to get rows here because you're not  

adding rows for now so in case you add rows then  you have to get the rows and also add it in here

so for now let me just remove the rules okay you  want to just have only authenication for now so  

we have um claims I have a list of claims and  we have a name and email okay we have user ID  

you can also add that then here we can sign  in manager you can check the passw if they  

correspond then we want to now sign in and I will  tell me the errors to what success or this going  

to be a message or anything else that you want  to or you can just remove this in case you are  

in this what you're doing so we're going to  password signning and that's provide the the  

name that's the app user then provide a password  and now here we are checking if if I click on come  

here tells you the next step is it persistent  then it's a lock out on failure so it's no we  

it for f and that's what that we need to do in  here very simple one okay now let's have our  

model created or there is a form an edit form  we can create an edit form for this and I am  

using the default login so this is a default  login we have the the usern name we have the  

password and that is it I want to remove this  remember me cuz I don't want to integrate this

now okay then we have our button so edit  form you have the model and the method  

here it is post we have form name in here we  provide the method and now the form name for  

it to because this this is going to render in  static way so this a static rendering and um  

if you don't not improve provide this it's  not going to work okay so we have to or if  

you take out this one then you have to include  interactive um render mode as what for assembly  

okay so that's what we doing and here we're  displaying an error to the user all right now  

this is all that we have we have to work on the  registration tool so let's create a registration

component the same Pages I'm going to right  click on this and create a component known as

register so with this two we we need  our user manager so this what we can  

do we can just move the ones that we have  inside this the login to um import rer or  

we can still repeat this the best way okay  so we should not repeat this because when  

you check the login we have it already so  we can just um grab it from here see the

register

okay so down here we need to also create our  model for loog registration so we have name  

email password and a confirm password okay  now aside from having this in case I click on  

register what do I want to do first let's create  um an object out of this after the model so input  

model for the register and now in if I click on  register what am I going to do we want to execute  

this we first have to create an instance of this  app user and now pass in populate it so that's  

what we are doing we ass signing to this and we  can now keep moving so here must be an app user  

as you know that is a model aside from doing  that we're going to create user asnc so from  

here once you have everything created because this  password has is going to Hash the password of the  

user automatically and we can now create the user  account if it is access or in case it is not what  

you want to do you can just retrieve it but let's  assume it is Success then that is all okay so you  

see this is very simple so register user and now  create a user very simple one okay now let's save  

this so we have our login we have our register now  we have sign out so now let's go to the nav menu  

and this can be found in the shared or the layout  you see we have a nav menu in here and with this  

we want to replace this one with this because here  we have this authorized attributes surrounded with  

and this we need to include the name space okay  so at using this authorized view need to include  

them here so what we're doing here is now when  need check this authorized view okay now need  

check this we want to this is an au requir if I  click on this but for now you want to remove this  

you didn't want that one so you want to display  only the name okay so you can display this when  

you when you log in you want to display the name  that's all and also here this the most important  

thing that's for the log out you know we is a  form this is a PHP form so can see we there's  

an action to account SL log out and remember then  the API end point that we created the minimal API  

I account SL logout the form what it is push so  when it push the form it's going to return home  

page isn't it going to return to the homepage  yes so that's the log out and now once it get  

the contest or the contest you can now sign out  peacefully okay if I am not um authorized register  

and login we have in there if I'm authorized then  log out so with this we have to provide or maybe  

you can say this is register this is log out this  is login and that is all so let's have a register  

and now login so this is a register we must  provide the route this login from the register on

top so this is register okay so this is ready  now now if I click on any page so for now don't  

worry we're going to run this application and  test it out first but before we test this app  

we need to create a class that's going to  H from the allate provider and that's going  

to implement um the component State or the  authentication state from the server okay  

in the client so let's authentication we're  going to add a class in here and now this  

class going to be persistent Authentication  State provider this has inher from the main  

class that is out State provider we need to  implement an abstract and that is the get  

authentication State So within this we can have  a default orate task so let's assign it on top

here then we going to check when a page is  being called being rendered this method is  

going to get fired that is the the instance  of this so we need to create a property a  

Constructor instance let's create Constructor for  this one so generate Constructor okay so this is  

our Constructor and now within the Constructor  we going to specify this persistent component  

State this is coming from the server Street and  I contain the state of the user so in here we can  

now check if the person is authenticated then  we want to grab we want to create an instance  

of this user info because this is what we  are passing in so we have to get this as  

an out variable okay and now if it is n then  want to return return so we can just exclude  

this and then make it just one line yes so if  it is null then so if it is not now then we're  

going to have this variable being um holding the  values from the state then we can now create the  

claims in here so we need to extract the claims  so we have the username ID we have um the name  

and on the email so after doing that then we  need to call this aate and now we assign the  

value to this this let me close this okay so  we the a the authentication STX that we created  

earlier on here you can see so um we are going  to assign it to this because here we have a new  

clim identity and that's a claim that is coming  in okay so we assign it to this after assigning  

what are we doing then lastly this method to  get called which going to return authentication

State you see so we can now go ahead we  can remove this con um the implementation  

the class and now we are good to go so this  is all that we need to do we get the claims  

from here we assign them and then we pass  on to the oate then we can now now tell the  

state that yes we have what we need so please  keep on okay very simple one so after doing  

this you go to solution you go to program  and now you need to register this in the

program so here we're going to register  authorization call cascading upate then  

we're going to add this as a single thing so  authentication State provider then that's the  

instance that we created now in here okay so  that's all we need to do in here this now if  

you are not authorized and want to access and  authorize uh content we want to redirect you  

okay to log in so when you check this from  our route in here you can see that we added  

this and this is the time for us to create a  component we have to create that component in  

here so in the pages let's add the new razor  component Weir to login and now inside this  

we need to inject our appdb content need inject  a nav manager and now we want to navigate you  

this only the login not the account so login  slash and it's going to be the return URL so  

we are passing into this right to the URL um  to this lugin so we can actually remove all  

this maybe in case we don't need this we can  move it because I know using return URL for  

now so all that you do here is navigate  to login and now Force load very simple  

one you see that good now let's save this  so let's build the whole project again bu

solution so we have an issue here that we need  to be fixed but could see it suceeded when you  

click on this we need to include so to period  let's add the reference okay let's test this

out yes we have an issue here because we have  not added the token authentication Service that  

is the let's see okay so that's identity  so let's add it here so we services. add  

authorization add authentication and we have  to specify the default scheme and the default  

signing scheme and now do add identic cookies  you see that is this one now also let's check  

from the register we did not create the UI you  see this so we have to create the the UI and in  

that it is just an edit form that we need to  create which it's going to um have the form  

for name email password and confirm password  so here I'm going to past this this an edit  

form and now it has this the input for email  it has password it has confirm password okay  

in that you know already that we have to create a  string property to handle the an error in here to  

display So within this you can have this string  error in case we do have error but for now we  

are not have we are not hand any error okay so  we can just remove this up let's take out this  

error if you want to manage your any the errors  you can actually do that but we are not um doing  

it now okay so this all we have a very simple  one with a button as register and now we're  

going to submit to this register user method now  let's think let's run it again and then check it

out okay so the app is ready and now let's see  we have a login and a register button in here  

first of all you're going to register because  you haven't register so let's c um next CoD up  

that's the name as you know and here I'm going to  use admin at admin password let me use admin at 1  

2 3 admin at 1 23 click on register now let's  see wow nothing happens but let's check it out

so from here I've opened the table if I refresh

this oh okay you see now we have it in here you  see that is the name net code username and now  

we have the noral usern name and the email okay so  usern name and our name we have it now let's go to

login so if I click on login we have the email  and password click on login and I can see we  

have the email in here so since the names have  appeared twice that is why it is taking the  

first one and the first one I'm automatically  it is an email address if you want to grab the  

second one and that is the actual your name  that we set then we have to look through the  

claims and now we find out the names whereby  going to have the results as two then we get  

the last one let's see how to work on that to  display not the email rather the name of the  

authenticated person so go to our source code  and now from here that's our na menu that's  

where we are having this so we can rather use  the next line so contest. user. claim. where  

type is equal to our claim types. name and  now when you make it first you're going to  

have the email so that last going to give us  the full name okay so let's re build this and  

run it again and now let's check it out so you  might see the email you might see the name as

well so let's log in again but before we log  in you going click on this inspect element then  

we go to the application so you can see from  here the cookie we have no authentication in  

here now click on login and now let's log in  and let's watch it out and see what going to  

happen in here yes so see we have an token  that's a cookie token being up in here and  

now you can see we have um admin at Gmail and no  admin at admin and then we have net code Hub that  

is the name isn't it if I click on log out what  happens we see it is off and now this one is also

off let's create another account so this turn R is  

going to be Fred then there going to  be Fred at Fred password Fred at one

23 let's create the

account

okay now let's log

in okay so we are in now you see we have  net code H Fred at Fred and it's supposed  

to be Fredick but you're still having  net code H you see this maybe let's

see why are you having the same  net code when you go to the table  

and now if you refresh this let's see  what we have Okay so let's open this

again oh okay so it was let's go to up alleng  we did we did not change it so let's this Fred  

Rick okay so that is this one we can now save  this and when we refresh the page let's see  

what we're going to have since we change the  database you must see I'm Fred in here okay  

let's rebild this again and I'll test it out  so I'll save this we run this okay and we have

Frederick

okay we still have this we're going

to around

this okay so let's log

in now let's wait and see you must see Fredick  yeah that's what we have it let's log out let's  

the account and maybe here we're going to  say your name your name is your name so

u. U at1 23 U at three now we're  going to create an account here  

now you can see the name your name  that is the name okay let's log

in let's see yes so you can see we have your  name yeah this working okay so that is it  

for this video we've seen how to create and  consume this service authentication Service  

using cie customize one in net a BL Las web  app with interactive um web assembly render  

mode I've made a video on the server mode  and also how to use JWT token in the server  

mode so if you want to check those out  check the video description and you're  

going to find it in there all right thank  you so much for watching this and I believe  

this is learned something and hopefully I'm  going to catch up again so then take care