resolving auth problem

9 months ago · 1cef5c0063
parent 566f30ed3d
commit 1cef5c0063
9 changed files with 103 additions and 30 deletions
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/App.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/App.razor
@ -15,7 +15,7 @@
 </head>

 <body>
-   <Routes @rendermode="RenderMode.InteractiveServer" />
+   <Routes />
    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
    <loading-theme storage-name="theme"></loading-theme>
    <script src="_framework/blazor.web.js"></script>
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Layout/MainLayout.razor
@ -28,6 +28,10 @@
    </FluentFooter>
 </FluentLayout>

+<FluentToastProvider MaxToastCount="5" />
+<FluentDialogProvider />
+<FluentTooltipProvider />
+
 <div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Login.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Account/Login.razor
@ -4,31 +4,38 @@
@using System.Security.Claims
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Authentication.Cookies
-@inject AppDbContext AppDbContext;
-@inject NavigationManager NavManager;
-@rendermode InteractiveServer
+@inject AppDbContext AppDbContext
+@inject NavigationManager NavManager

 <FluentGrid Class="mt-3" Justify="JustifyContent.Center">
-    <FluentGridItem xs="6">
-        <FluentEditForm Model="@Model" OnValidSubmit="@OnLoginSubmit">
-            <DataAnnotationsValidator/>
-            <FluentValidationSummary/>
+    <FluentGridItem xs="9" md="6" lg="3">
+        <FluentCard>
+            <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
+                <FluentEmoji Value="@(new Emojis.SmileysEmotion.Color.Default.GrinningFaceWithSmilingEyes())" Width="50px" />
+                <FluentLabel Typo="Typography.H2">
+                    Login
+                </FluentLabel>
+                <EditForm FormName="LoginForm" style="width:100%" Model="@LoginViewModel" OnValidSubmit="@OnLoginSubmit">
+                    <DataAnnotationsValidator />
+                    <FluentValidationSummary />

                    <FluentStack Orientation="Orientation.Vertical" VerticalGap="5" HorizontalAlignment="HorizontalAlignment.Center">
                        <div style="width:100%">
-                    <FluentTextField style="width:100%" @bind-Value="Model.UserName" Label="User Name" Required />
-                    <FluentValidationMessage For="@(() => Model.UserName)"/>
+                            <FluentTextField style="width:100%" Name="username" @bind-Value="LoginViewModel.UserName" Label="User Name" Required />
+                            <FluentValidationMessage For="@(() => LoginViewModel.UserName)" />
                        </div>
                        <div style="width:100%">
-                    <FluentTextField Style="width:100%" @bind-Value="Model.Password" TextFieldType="TextFieldType.Password" Label="Password" Required />
-                    <FluentValidationMessage For="@(() => Model.Password)" />
+                            <FluentTextField Style="width:100%" Name="password" @bind-Value="LoginViewModel.Password" TextFieldType="TextFieldType.Password" Label="Password" Required />
+                            <FluentValidationMessage For="@(() => LoginViewModel.Password)" />
                        </div>
                        <div style="width:100%">
                            <FluentLabel Color="Color.Error">@errorMessage?.ToString()</FluentLabel>
                        </div>
                        <FluentButton Style="width:100%" Type="ButtonType.Submit" Appearance="Appearance.Accent">Login</FluentButton>
                    </FluentStack>
-        </FluentEditForm>
+                </EditForm>
+            </FluentStack>
+        </FluentCard>
    </FluentGridItem>
 </FluentGrid>

@ -37,22 +44,29 @@
    public HttpContext? HttpContext { get; set; }

    [SupplyParameterFromForm]
-    public LoginViewModel Model { get; set; } = new LoginViewModel();
+    public LoginViewModel LoginViewModel { get; set; }

    string? errorMessage;

+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        LoginViewModel = new LoginViewModel();
+    }
+
    async Task OnLoginSubmit(EditContext context)
    {
-        var userAccount = AppDbContext.UserAccounts.Where(u => u.UserName == Model.UserName).FirstOrDefault();
-        if (userAccount is null || userAccount.Password != Model.Password)
+        var userAccount = AppDbContext.UserAccounts.Where(u => u.UserName == LoginViewModel.UserName).FirstOrDefault();
+        if (userAccount is null || userAccount.Password != LoginViewModel.Password)
        {
            errorMessage = "Please login again.";
+            await InvokeAsync(StateHasChanged);
            return;
        }

        var claims = new List<Claim>
        {
-            new Claim(ClaimTypes.Name, Model.UserName),
+            new Claim(ClaimTypes.Name, LoginViewModel.UserName),
            new Claim(ClaimTypes.Role, userAccount.Role)
        };

--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Counter.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Pages/Counter.razor
@ -1,4 +1,5 @@
@page "/counter"
+@inject IToastService ToastService
@rendermode InteractiveServer

 <PageTitle>Counter</PageTitle>
@ -11,11 +12,34 @@

 <FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>

+<br/>
+<AuthorizeView>
+    <Authorized>
+        <FluentButton Appearance="Appearance.Accent" @onclick="ShowToast">Check Authentication</FluentButton>
+    </Authorized>
+</AuthorizeView>
+
@code {
+    [CascadingParameter]
+    private Task<AuthenticationState> AuthenticationStateTask { get; set; }
+
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
+
+    private async void ShowToast()
+    {
+        var authState = await AuthenticationStateTask;
+        if (authState.User.Identity.IsAuthenticated == false)
+        {
+            ToastService.ShowError("Not authorized.", 5000);
+            return;
+        }
+
+        var message = $"Hello, {authState.User.Identity.Name}";
+        ToastService.ShowInfo(message, 5000);
+    }
 }
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Routes.razor
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Components/Routes.razor
@ -1,6 +1,6 @@
 <Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
 </Router>
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth.csproj
@ -7,6 +7,7 @@
  </PropertyGroup>

  <ItemGroup>
+	  <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
 	  <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.7" />
 	  <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.7">
 	    <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/ViewModels/LoginViewModel.cs
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Models/ViewModels/LoginViewModel.cs
@ -5,9 +5,9 @@ namespace FluentBlazorAuth.Models.ViewModels
    public class LoginViewModel
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the user name.")]
-        public string? UserName { get; set; }
+        public string? UserName { get; set; } = string.Empty;

        [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the password.")]
-        public string? Password { get; set; }
+        public string? Password { get; set; } = string.Empty;
    }
 }
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Program.cs
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/Program.cs
@ -3,6 +3,7 @@ using FluentBlazorAuth.Components;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using FluentBlazorAuth.Data;
 using Microsoft.EntityFrameworkCore;
+using Blazored.LocalStorage;

 namespace FluentBlazorAuth;

@ -30,6 +31,10 @@ public class Program
        builder.Services.AddCascadingAuthenticationState();
        #endregion

+        #region LocalStorage
+        builder.Services.AddBlazoredLocalStorage();
+        #endregion
+
        #region Database
        var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
        builder.Services.AddDbContext<AppDbContext>(options =>
--- a/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/States/CustomAuthenticationStateProvider.cs
+++ b/FluentBlazorAuth/FluentBlazorAuth/FluentBlazorAuth/States/CustomAuthenticationStateProvider.cs
@ -0,0 +1,25 @@
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components.Authorization;
+using System.Security.Claims;
+
+namespace FluentBlazorAuth.States
+{
+    public class CustomAuthenticationStateProvider : AuthenticationStateProvider
+    {
+        private readonly ILocalStorageService _localStorage;
+
+        public CustomAuthenticationStateProvider(ILocalStorageService localStorage)
+        {
+            _localStorage = localStorage;
+        }
+
+        public override async Task<AuthenticationState> GetAuthenticationStateAsync()
+        {
+            var token = await _localStorage.GetItemAsync<string>("authToken");
+            if (string.IsNullOrWhiteSpace(token))
+                return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
+
+            return null;
+        }
+    }
+}