c0g1t8 / blazor-auth-static-web-apps

A Blazor WebAssembly AuthenticationStateProvider for Azure Static Web Apps

Blazor Authentication Extension for Azure Static Web Apps

Use Azure Static Web Apps authentication in Blazor WebAssembly apps.

Usage

Install NuGet package

dotnet add package AnthonyChu.AzureStaticWebApps.Blazor.Authentication --version 0.0.2-preview

Update Program.cs

Add using AzureStaticWebApps.Blazor.Authentication and register services with AddStaticWebAppsAuthentication().

using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using AzureStaticWebApps.Blazor.Authentication;

namespace BlazorLogin
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services
                .AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) })
                .AddStaticWebAppsAuthentication();
            await builder.Build().RunAsync();
        }
    }
}

Update App.razor

Add <CascadingAuthenticationState> and <AuthorizeRouteView> to App.razor. For more information, check out the Blazor security docs.

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Log user into Azure Static Web Apps using social

Redirect the user to /.auth/login/<social-provider> to log them in. More info at the Static Web Apps authentication docs.

Access user identity

Use context.User to get information about the user.

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <a href="/.auth/logout?post_logout_redirect_uri=/">Log out</a>
    </Authorized>
    <NotAuthorized>
        <a href="/login-providers">Log in</a>
    </NotAuthorized>
</AuthorizeView>

Configuration

By default, the auth provider will call /.auth/me to determine if a user is logged in and get information about the logged in user. Configure StaticWebAppsAuthentication:AuthenticationDataUrl in appsettings.json (or an envionrment specific version) to use a different endpoint.

For instance, in local development you can use a static file:

{
  "StaticWebAppsAuthentication": {
    "AuthenticationDataUrl": "/sample-data/me.json"
  }
}

See sample-data/me.json for an example of the structure. For more information, check out the Static Web Apps docs.

Sample app

Check out the sample app at sample/app.

---

This is not an officially supported Microsoft project.