Skip to main content

Web login

Use case​

You are looking for a secure way for your end-users to authenticate on your website using a passkey.

This use case provides a seamless and secure experience without the need for traditional passwords, while maintaining high security. It covers both authenticating on the same device where the passkey is stored, and authenticating across different devices.

What is cross-device authentication?

For example, this could mean logging into a website on a laptop using a passkey stored on a mobile device.

How it works​

Meet Jane, one of your active end-users who has set up a passkey for your service. Jane needs to log in to your website so that she can access your online services. The experience will differ slightly depending on which device she uses to access your website.

Same device authentication​

In this scenario, Jane is accessing your website on the same device where her passkey is stored. For example, this could be her her mobile device or a laptop with a built-in authenticator.

  1. Jane visits your website and clicks the login button.
  2. The browser prompts her to authenticate using her passkey.
  3. Jane uses her device's local authentication to approve the login.
    What does this mean?

    An example of a local authentication could be:

    • Mobile device: Face ID or Touch ID
    • Computer: Windows Hello
  4. The authentication is successful and Jane is logged in.

Cross-device authentication​

In this scenario, Jane is accessing your website on a different device than where her passkey is stored. For example, she could be using her laptop, but her passkey is on her mobile device.

  1. Jane visits your website on her laptop and clicks the login button.
  2. The browser displays a QR code and prompts her to use a passkey from another device.
  3. Jane scans the QR code using her mobile device's camera.
  4. Her mobile device connects via Bluetooth to verify proximity and prompts her to authenticate using her passkey.
  5. Jane uses her mobile device's local authentication to approve the login.
    What does this mean?

    An example of a local authentication on the mobile device could be Face ID or Touch ID.

  6. The authentication is successful, and Jane is logged into the website on her laptop.
Success!

Jane has now securely authenticated herself to your website using a passkey.

What it looks like​

The following diagram illustrates what an authentication flow could look like using a passkey, from the perspective of your end-user.

Same device authentication​

Cross-device authentication​

Implementation​

Note

This flow assumes that you are using ReuseID with Passkeys authentication, and that the end-user has an active ReuseID user with a registered passkey.

The following flow is a suggestion on how to implement passkey authentication for a website, leveraging the Signicat ReuseID API:

  1. The end-user initiates the login process by clicking a button on your website.
  2. Your server starts an authentication process by calling the Signicat ReuseID API.
  3. Signicat generates a challenge and returns an idpRedirectUri.
  4. Your website opens the idpRedirectUri, which prompts the end-user's browser to request a passkey authentication.
  5. The end-user authenticates either on the current device or by scanning a QR code with another device.
  6. The authenticator generates an assertion and sends it to Signicat.
  7. Signicat verifies the assertion and redirects the browser to your specified redirect URL upon completion.
  8. Signicat sends a callback to your server containing the authentication response.
  9. Your server grants the end-user access to their account based on the callback.

Sequence diagram​

Sequence diagram showing passkey authentication on a website

Learn more​

API reference
Explore endpoints and properties with example requests and responses
On this page