Skip to content

Latest commit

 

History

History
117 lines (80 loc) · 4.32 KB

README.md

File metadata and controls

117 lines (80 loc) · 4.32 KB
Raw

Build

Passwordless.dev Blazor WebAssembly Client SDK

Requirements

  • A Blazor WebAssembly application using .NET 6 or higher.

Installation

TODO

Configuration

Using

Be mindful that the code below are simple representations of how to use the SDK. To properly secure your Blazor WebAssembly application, check the Secure ASP.NET Core Blazor WebAssembly guide.

Dependency Injection

You can use the following extension methods on WebApplicationBuilder to add configure the Passwordless client to your Blazor WebAssembly application:

public static void AddPasswordlessClient(this IServiceCollection services, Action<PasswordlessOptions> configureOptions);

public static void AddPasswordlessClient(this IServiceCollection services, IConfiguration configuration);

public static void AddPasswordlessClient(this IServiceCollection services, string section);

Registration

Inject the IPasswordlessClient into your component and call the RegisterAsync method to register a new user.

@inject IPasswordlessClient PasswordlessClient

Your form could look like the one below.

<EditForm FormName="@RegisterFormName" Model="@RegisterViewModel" OnValidSubmit="OnRegistrationAsync">
    <DataAnnotationsValidator/>
    <InputText class="form-control" DisplayName="Username" @bind-Value="RegisterViewModel.Username" placeholder="Username"/>
    <ValidationMessage class="validation-message" For="@(() => RegisterViewModel.Username)"/>
    <InputText class="form-control" DisplayName="Alias" @bind-Value="RegisterViewModel.Alias" placeholder="Alias (optional)"/>
    <ValidationMessage class="validation-message" For="@(() => RegisterViewModel.Alias)"/>
    <button class="btn btn-primary" type="submit">Register</button>
</EditForm>

In the form submission event handlers, handle the registration.

private const string RegisterFormName = "RegisterForm";

[SupplyParameterFromForm(FormName = RegisterFormName)]
public RegisterViewModel RegisterViewModel { get; set; } = new();


private async Task OnRegistrationAsync()
{
    if (RegisterViewModel?.Username == null) return;
    
    // 1. Call your backend to obtain the `register_` token.
    var registrationToken = await PasswordlessClient.RegisterAsync(new RegisterRequest(RegisterViewModel.Username, RegisterViewModel.Alias));
    
    // 2. Call the Passwordless client to create and store the credentials.
    var token = await WebAuthnClient.RegisterAsync(registrationToken.Token, RegisterViewModel.Alias!);
}

Logging in

Inject the IPasswordlessClient into your component and call the RegisterAsync method to register a new user.

@inject IPasswordlessClient PasswordlessClient

Your form could look like the one below.

<EditForm FormName="@LoginFormName" Model="@LoginViewModel" OnValidSubmit="OnSignInAsync">
    <DataAnnotationsValidator />
    <InputText class="form-control" DisplayName="Alias" @bind-Value="LoginViewModel.Alias" placeholder="Alias (optional)"/>
    <ValidationMessage class="validation-message" For="@(() => LoginViewModel.Alias)"/>
    <button class="btn btn-primary" type="submit">Sign In</button>
</EditForm>

In the form submission event handlers, handle the login.

private const string LoginFormName = "LoginForm";

[SupplyParameterFromForm(FormName = LoginFormName)]
public LoginViewModel LoginViewModel { get; set; } = new();

private async Task OnSignInAsync()
{
    // 1. Call Passwordless.dev to initiate the login process.
    var token = await PasswordlessClient.LoginAsync(LoginViewModel.Alias!);

    // 2. Once a valid credential is selected, call your backend to authenticate the user.
    // `backendResponse` can contain a JWT token or any other authentication information.
    var backendRequest = new SignInRequest(token.Token);
    var backendResponse = await BackendClient.SignInAsync(backendRequest);
}

References