Sign In With Passkey

This guide shows how to authenticate with a passkey, using LoginID.

tip

We recommend always offering passkey autofill as an option for your users, as it provides the best user experience.

Prerequisites

• Create an application to obtain a base URL. The SDK uses this base URL to interact with the LoginID authentication service.

Setup SDK

Javascript

npm i @loginid/websdk3

Import and initialize an instance:

import { LoginIDWebSDK } from "@loginid/websdk3";

const lid = new LoginIDWebSDK({
  baseUrl: process.env.LOGINID_BASE_URL,
});

Kotlin

To obtain the SDK:

• Go to the LoginID Dashboard and select one of your apps.
• Open the Get Started section and choose the Android icon.
• Follow the instructions to download the binary .aar file and include it in your project.

Initialize a singleton configuration for the LoginID service in the application's onCreate method.

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        // Initialize the singleton instance
        val config = LoginIDServiceConfig("<BASE_URL>")
        LoginID.configure(config).client()
    }
}

Swift

To obtain the SDK:

• Go to the LoginID Dashboard and select one of your apps.
• Open the Get Started section and choose the iOS icon.
• Follow the instructions to download the binary xcframework file and include it in your project.

Configure the singleton instance of LoginIDSDK with a base URL during the app's launch in the App struct initializer.

import SwiftUI
import LoginID

@main
struct MyApp: App {
    init() {
        let baseUrl = "<BASE_URL>"
        
        // Initialize the singleton instance
        LoginIDSDK.shared.configure(baseUrl: baseUrl)
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Authenticate With Passkey

Call the authenticateWithPasskey method, passing the email or username. The user will authenticate with a passkey, and the response will include a LoginID token.

note

The LoginID token is stored locally, allowing it to be used across different components or pages without needing to re-authenticate.

Javascript

info

This method automatically uses the WebAuthn Signal API to keep a user’s passkeys synchronized between the authenticator and the LoginID server. This helps ensure that passkey information shown in the browser remains up-to-date, including helping remove revoked or stale passkeys from the user's authenticator.

import React, { useState } from "react";
import { useAuth } from "../../contexts/AuthContext";

import { LoginIDWebSDK } from "@loginid/websdk3";

const lid = new LoginIDWebSDK({
  baseUrl: process.env.REACT_APP_LOGINID_BASE_URL,
});

const Login: React.FC = () => {
  const [username, setUsername] = useState<string>("");
  const [error, setError] = useState<string>("");
  const { setAuthUser } = useAuth();

  const handlePasskeyLogin = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      // User authenticates with passkey
      const authResult = await lid.authenticateWithPasskey(username);

      if (authResult.isAuthenticated) {
        // You can return LoginID token to your backend for verification (authResult.token)

        setAuthUser(user);
      } else {
        // Default to your fallback CIAM authentication method
      }
    } catch (e) {
      if (e instanceof Error) {
        setError(e.message);
      }
    }
  };
};

If you wish to use webauthn autofill, you can see Passkey Autofill guide

Kotlin

import loginid.LoginID

class MainActivity : AppCompatActivity() {
    private lateinit var usernameEditText: EditText
    private lateinit var errorTextView: TextView
    private lateinit var authenticateButton: Button

    private fun handleAuthenticate() {
        val username = usernameEditText.text.toString()
        errorTextView.text = ""

        GlobalScope.launch(Dispatchers.Main) {
            try {
                // User authenticates with passkey
                val result = LoginID.client().authenticateWithPasskey(this@MainActivity, username)

                // You can now send the authToken to be verified on your server

                AuthContext.setAuthUser(user)
            } catch (e: Exception) {
                when (e) {
                    is LoginIDError -> {
                        errorTextView.text = e.message ?: "A LoginID error occurred"
                    }
                    else -> {
                        errorTextView.text = e.message ?: "An error occurred"
                    }
                }
            }
        }
    }
}

Swift

import SwiftUI
import LoginID

@main
struct ExampleApp: App {
    @State private var errorMessage: String? = nil
    @State private var username: String = "user@example.com"

    init() {
        // Configure the LoginID SDK
        LoginIDSDK.shared.configure(
            baseUrl: "<BASE_URL>",
        )
    }

    private func handleAuthenticate() async {
        do {
            // User authenticates with passkey
            let result = try await LoginIDSDK.shared.authenticateWithPasskey(
                username: username,
                options: nil
            )
            
            // You can now send the authToken to be verified on your server

            AuthContext.shared.setAuthUser(result.user)
        } catch let error as LoginIDError {
            errorMessage = error.message
        } catch {
            errorMessage = error.localizedDescription
        }
    }
}

Once you have received the result LoginID token, you can send it to your backend, and verify it. For detailed technical instructions, refer to this section on verifying LoginID tokens.