Interactive WebAssembly

The following sequence diagrams illustrate the use cases for Blazor.Auth in a Blazor application that is currently using Interactive WebAssembly render mode:

sequenceDiagram

actor user as User
participant page as SignIn Page

box rgba(101, 63, 232, 0.5) Blazor.Auth
participant userServiceClient as IUserService (Client)
participant userServiceServer as IUserService (Server)
end

participant authService as IAuthenticationService (Server)

user ->>+ page: Submit Sign-In Form
page ->>+ userServiceClient: SignInAsync(signInPayload)
note over page,userServiceClient: Resolve IUserService from DI<br/> and call it's `SignInAsync` method.
userServiceClient ->>+ userServiceServer: HTTP request to Sign-In endpoint
note over userServiceClient,userServiceServer: Client-side implementation <br/> will make an HTTP request to the server, <br/> no manual action is required.

userServiceServer ->>+ authService: SignInAsync(signInPayload)
authService ->> authService: Your server-side sign-in logic

authService -->>- userServiceServer: AuthenticationResult
userServiceServer -->> userServiceClient: AuthenticationResult
note over userServiceServer,userServiceClient: Server-side implementation will <br/> return AuthenticationResult to the client#59; <br/><br/> Updated cookies will be attached <br/> to the HTTP response <br/> which will result in them being <br/> automalically stored in the user's browser.

userServiceClient -->>- page: AuthenticationResult
page -->>- user: Continue, <br/> e.g. redirect to home page, <br/> or other custom logic

note over user,userServiceClient: Upon receiving AuthenticationResult from IUserService, <br/> do a page refresh in order to refresh the User's AuthenticationState<br/><br/> Example: NavigationManager.NavigateTo("/", true).

sequenceDiagram

actor user as User
participant page as SignUp Page

box rgba(101, 63, 232, 0.5) Blazor.Auth
participant userServiceClient as IUserService (Client)
participant userServiceServer as IUserService (Server)
end

participant authService as IAuthenticationService (Server)

user ->>+ page: Submit Sign-Up Form
page ->>+ userServiceClient: SignUpAsync(signUpPayload)
note over page,userServiceClient: Resolve IUserService from DI<br/> and call it's `SignUpAsync` method.
userServiceClient ->>+ userServiceServer: HTTP request to Sign-Up endpoint
note over userServiceClient,userServiceServer: Client-side implementation <br/> will make an HTTP request to the server, <br/> no manual action is required.

userServiceServer ->>+ authService: SignUpAsync(signUpPayload)
authService ->> authService: Your server-side sign-up logic

authService -->>- userServiceServer: AuthenticationResult
userServiceServer -->> userServiceClient: AuthenticationResult
note over userServiceServer,userServiceClient: Server-side implementation will <br/> return AuthenticationResult to the client#59; <br/><br/> Updated cookies will be attached <br/> to the HTTP response <br/> which will result in them being <br/> automalically stored in the user's browser.

userServiceClient -->>- page: AuthenticationResult
page -->>- user: Continue, <br/> e.g. redirect to home page, <br/> or other custom logic

note over user,userServiceClient: Upon receiving AuthenticationResult from IUserService, <br/> do a page refresh in order to refresh the User's AuthenticationState<br/><br/> Example: NavigationManager.NavigateTo("/", true).

Sign-Out

sequenceDiagram

actor user as User
participant page as Page

box rgba(101, 63, 232, 0.5) Blazor.Auth
participant userServiceClient as IUserService (Client)
participant userServiceServer as IUserService (Server)
end

user ->>+ page: Initiate Sign-Out
page ->>+ userServiceClient: SignOutAsync()
note over page,userServiceClient: Resolve IUserService from DI<br/> and call it's `SignOutAsync` method.
userServiceClient ->>+ userServiceServer: HTTP request to Sign-Out endpoint
note over userServiceClient,userServiceServer: Client-side implementation will <br/> make an HTTP request to the server, <br/> no manual action is required.

userServiceServer -->> userServiceClient: HTTP OK
note over userServiceServer,userServiceClient: Blazor.Auth will remove <br/> the user's authentication cookies <br/> by marking them as expired <br/> in the HTTP response.

userServiceClient -->>- page: #32;
page -->>- user: Continue, <br/> e.g. redirect to home page, <br/> or other custom logic

note over user,userServiceClient: Upon sign-out process completion, <br/> do a page refresh in order to refresh the User's AuthenticationState<br/><br/> Example: NavigationManager.NavigateTo("/", true).