WebAuthnLogin

TsgcHTMLComponent_WebAuthnLogin — a passwordless passkey/WebAuthn login and register widget that emits SimpleWebAuthn-based JavaScript, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_WebAuthnLogin

A passkey widget that renders register and sign-in buttons plus the browser-side script. It talks to your /options and /verify endpoints through SimpleWebAuthnBrowser. Set the mode and URLs, then read HTML — or use the static Build helper.

Component class

TsgcHTMLComponent_WebAuthnLogin

Renders

Bootstrap 5 markup + WebAuthn JS

Languages

Delphi, C++ Builder, .NET

One line, or full control

The static Build helper renders the widget in a single call. Use the full component when you need a custom title, username selector or your own script.

uses
  sgcHTML_Enums, sgcHTML_Component_WebAuthnLogin;

// One-liner (register + authenticate, default endpoints):
WebModule.Response := TsgcHTMLComponent_WebAuthnLogin.Build(
  wamBoth, '/webauthn/register', '/webauthn/authenticate');

// Full control:
var
  oWA: TsgcHTMLComponent_WebAuthnLogin;
begin
  oWA := TsgcHTMLComponent_WebAuthnLogin.Create(nil);
  try
    oWA.Mode := wamBoth;
    oWA.RegisterURL := '/webauthn/register';
    oWA.AuthenticateURL := '/webauthn/authenticate';
    oWA.CallbackURL := '/dashboard';
    oWA.Title := 'Passwordless sign-in';
    oWA.ShowPasskeyIcon := True;
    oWA.UsernameSelector := '#username';

    WebModule.Response := oWA.HTML;   // buttons + SimpleWebAuthn JS
  finally
    oWA.Free;
  end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_WebAuthnLogin.hpp

// One-liner (register + authenticate, default endpoints):
String html = TsgcHTMLComponent_WebAuthnLogin::Build(
  wamBoth, "/webauthn/register", "/webauthn/authenticate");

// Full control:
TsgcHTMLComponent_WebAuthnLogin *oWA = new TsgcHTMLComponent_WebAuthnLogin(NULL);
try
{
  oWA->Mode = wamBoth;
  oWA->RegisterURL = "/webauthn/register";
  oWA->AuthenticateURL = "/webauthn/authenticate";
  oWA->CallbackURL = "/dashboard";
  oWA->Title = "Passwordless sign-in";
  oWA->ShowPasskeyIcon = true;
  oWA->UsernameSelector = "#username";

  String full = oWA->HTML;   // buttons + SimpleWebAuthn JS
}
__finally
{
  delete oWA;
}
using esegece.sgcWebSockets;

// One-liner (register + authenticate, default endpoints):
string html = TsgcHTMLComponent_WebAuthnLogin.Build(
    TsgcHTMLWebAuthnMode.wamBoth, "/webauthn/register", "/webauthn/authenticate");

// Full control:
var wa = new TsgcHTMLComponent_WebAuthnLogin();
wa.Mode = TsgcHTMLWebAuthnMode.wamBoth;
wa.RegisterURL = "/webauthn/register";
wa.AuthenticateURL = "/webauthn/authenticate";
wa.CallbackURL = "/dashboard";
wa.Title = "Passwordless sign-in";
wa.ShowPasskeyIcon = true;
wa.UsernameSelector = "#username";

string full = wa.HTML;   // buttons + SimpleWebAuthn JS

Key properties & methods

The members you reach for most often.

Static builder

Build(aMode, aRegisterURL, aAuthenticateURL) renders the whole widget in one call, with sensible defaults for the mode and endpoints.

Mode

Mode selects wamRegister, wamAuthenticate or wamBoth, deciding which buttons appear.

Endpoints

RegisterURL and AuthenticateURL are your server's bases (the script appends /options and /verify); CallbackURL is where a successful sign-in lands.

Buttons & text

RegisterButtonText, AuthenticateButtonText, RegisterButtonStyle, AuthenticateButtonStyle, Title, Description and ShowPasskeyIcon shape the UI.

Script & username

UsernameSelector reads the username from a field before registering; CustomScript replaces the built-in SimpleWebAuthn JavaScript entirely.

Output

HTML returns the markup plus the inline <script> using SimpleWebAuthnBrowser; alerts use SuccessAlertStyle / ErrorAlertStyle.

Keep exploring

All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and add passkey login to your Delphi, C++ Builder or .NET web app.