- A Blazor WebAssembly application using .NET 6 or higher.
TODO
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.
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);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!);
}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);
}