Login with WebAuthn Hosted

Overview

WebAuthn Hosted login provides secured, WebAuthn-based biometric authentication and a fully hosted authentication experience. It can be used to authenticate user login, or create new users based on their email address. For information on supported WebAuthn mobile and desktop platforms, see Hosted WebAuthn platform support.

Here's how it works:

1. User clicks login button, sending request to /v1/auth/webauthn with client_id and redirect_uri
2. Mosaic redirects to the login page, which authenticates user and redirects back to Mosaic.
3. After validating the response, Mosaic redirects back to your redirect_uri with a code.
4. Your application sends the code to your backend, which exchanges it for tokens via /oidc/token.
5. Upon a successful exchange, the user is logged in.

Step 1: Configure WebAuthn

To customize the authentication experience, you can configure WebAuthn Hosted authentication from the Mosaic Admin Portal. However, no setup is required to start using this authentication method.

From B2B or B2C Identity (based on your setup) > Experience management > select your app > WebAuthn and configure the authentication experience you want to provide (e.g., branding).

Step 2: Add redirect URI to app

To redirect back to the redirect_uri provided in the initial request, it should be registered in your application settings in the Mosaic Admin Portal. From the Admin Portal under Applications, click on your application to edit your application settings and add this URI under Redirect URIs. If you don't already have an application, you'll need to create one first (see Create application).

Step 3: Initiate login

Use a request like the one below to initiate an authentication flow using WebAuthn Hosted login, described in the sequence diagram above. The create_new_user parameter will determine if this flow applies to new users, or only to existing ones. If set to true (and public sign-ups are enabled for this application), a new user is created if no user is found for the email returned by Mosaic in the next step. The redirect_uri should correspond to the one added in step 3, and the client_id can be found from the Mosaic Admin Portal in the application settings.

curl --request GET \
     --url 'https://api.transmitsecurity.io/cis/v1/auth/webauthn?
     client_id=2eb840f.test.Transmit.io&
     redirect_uri=https://www.example.com/login&
     create_new_user=true' \
     --header 'Accept: application/json'

Step 4: Get user tokens

To exchange the code received from Mosaic for an ID and access token, your server should send a POST request like the one below to the Mosaic /oidc/token endpoint. Replace placeholders with the code you received in Step 3, your redirect URI, and your client credentials that can be found in your application settings from the Mosaic Admin Portal.

curl -i -X POST \
  https://api.transmitsecurity.io/oidc/token \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d client_id=CLIENT_ID \
  -d client_secret=CLIENT_SECRET \
  -d code=CODE \
  -d grant_type=authorization_code \
  -d redirect_uri=REDIRECT_URI

What's next?

From B2B or B2C Identity (based on your setup) > Experience management > select your app > WebAuthn, you can customize the branding and authentication logic of your hosted experience.

For how to customize the branding using custom CSS, click here.

Platform support

Supported desktop platforms

WebAuthn hosted is supported on the following desktop platforms:

Supported mobile platforms

WebAuthn hosted is supported on the following mobile platforms: