AnthonyChu.AzureStaticWebApps.Blazor.Authentication 0.0.2-preview

Package Description

This is a prerelease version of AnthonyChu.AzureStaticWebApps.Blazor.Authentication.
Install-Package AnthonyChu.AzureStaticWebApps.Blazor.Authentication -Version 0.0.2-preview
dotnet add package AnthonyChu.AzureStaticWebApps.Blazor.Authentication --version 0.0.2-preview
<PackageReference Include="AnthonyChu.AzureStaticWebApps.Blazor.Authentication" Version="0.0.2-preview" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add AnthonyChu.AzureStaticWebApps.Blazor.Authentication --version 0.0.2-preview
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

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 &lt;CascadingAuthenticationState&gt; and &lt;AuthorizeRouteView&gt; 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/&lt;social-provider&gt; 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.

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 &lt;CascadingAuthenticationState&gt; and &lt;AuthorizeRouteView&gt; 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/&lt;social-provider&gt; 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.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
0.0.2-preview 88 7/28/2020
0.0.1-preview 77 7/27/2020