You can use Authsignal’s Client SDKs when you want to implement your own custom or native UI. Our Client SDKs for web and mobile make it easy to add passkeys to your UI, as well as supporting traditional methods like email OTP, SMS OTP, and authenticator app (TOTP).
Using a Client SDK to implement passkey sign-in in a native mobile app

Using a Client SDK to implement passkey sign-in in a native mobile app

​
OTP auth (email, SMS, TOTP)

The integration steps for traditional authentication methods such as email OTP, SMS OTP, and authenticator app (TOTP) are similar to the steps for integrating Authsignal’s pre-built UI. The key difference is that instead of tracking an action to generate a short-lived URL, we generate a short-lived client token which can be passed to a Client SDK.

​
1. Backend - Track action

In your app’s backend, use an Authsignal Server SDK to track an action which represents what your user is doing (e.g. signIn). This step will return a token which can be passed to a Client SDK to perform a challenge for that user. 
const request = {
  userId: "dc58c6dc-a1fd-4a4f-8e2f-846636dd4833",
  action: "signIn",
};

const response = await authsignal.track(request);

const token = response.token;

​
2. Frontend - Use a Client SDK

In your web or mobile app, call setToken with the client token obtained in step 1, then use the relevant SDK methods to progress the user through a challenge (e.g. email OTP) and obtain a new token. 
authsignal.setToken("eyJhbGciOiJ...");

// Send the user an email OTP code
// You can call this multiple times via a 'resend' button
await authsignal.email.challenge();

// Verify the inputted code matches the original code
const response = await authsignal.email.verify({ code: "123456" });

// Obtain a new token
const token = response.token;
The above example is for a re-authentication flow when the user has already enrolled an email OTP authenticator. To learn more about enrollment, check out our guide on enrolling authenticators using Client SDKs.

​
3. Backend - Validate challenge

Pass the new token obtained in step 2 to your backend and validate the challenge server-side to complete authentication. 
const request = {
  token: "eyJhbGciOiJ...",
};

const response = await authsignal.validateChallenge(request);

if (response.state === "CHALLENGE_SUCCEEDED") {
  // The user completed the challenge successfully
  // Proceed with authenticated action or integrate with IdP to create authenticated session
} else {
  // The user did not complete the challenge successfully
}
For more information on OTP challenges with email, SMS and authenticator app, check out our Client SDK docs for web and mobile.

​
Passkeys

Passkeys represent a new paradigm of device-initiated authentication and so the integration steps are slightly different to OTP-based methods. The follow sequence demonstrates how to use Authsignal Client SDKs for a simple passkey sign-in flow.

​
1. Frontend - Use a Client SDK

In the first integration step, we can display whatever passkeys are available on the current device, without having to first track an action or lookup the user. Use our web SDK to present a passkey sign-in prompt in the browser, or use one of our mobile SDKs to present the native passkey UI in an iOS or Android app. 
const response = await authsignal.passkey.signIn({
  action: "signInWithPasskey",
});

if (response.data?.token) {
  // Send token to your backend for validation
  const token = response.data.token;
} else {
  console.error("Passkey sign-in failed:", response.error);
}

​
2. Backend - Validate challenge

Pass the token returned by the web or mobile SDK to your backend and validate the result of the passkey sign-in server-side. 
const request = {
  token: "eyJhbGciOiJ...",
};

const response = await authsignal.validateChallenge(request);

if (response.state === "CHALLENGE_SUCCEEDED") {
  // The user completed the challenge successfully
  // Proceed with authenticated action or integrate with IdP to create authenticated session
} else {
  // The user did not complete the challenge successfully
}

​
Next steps