Skip to content
Back to journal
TutorialSecurityCode Snippets

Adding Face ID to Your Website in 3 Lines of Code

CCode2Native EngineeringEngineering team
2025-01-20

Imagine your user opens your app. Instead of fumbling with passwords or waiting for an SMS code, they just look at their phone. Face ID confirms it's them. They are logged in.

Conventionally, this requires a specialized team of iOS and Android developers. But if you're using Code2Native, you already have a Native Bridge connected to your website's JavaScript.

How it works

The `Code2Native` object is automatically injected into the `window` scope when your website loads inside our app. You don't need to install any npm packages.

Step 1: Check if Biometrics are Available

if (window.Code2Native?.isNative()) {
    const available = await Code2Native.canUseBiometric();
    if (available) {
        showFaceIdButton(); // Show your UI button
    }
}

Step 2: Trigger the Prompt

When the user clicks the button, call the authenticate function. This triggers the native OS Face ID / Touch ID system sheet.

// Inside your login button click handler
try {
    const success = await Code2Native.authenticateBiometric();
    
    if (success) {
        // User confirmed! 
        // Now you can securely log them in or fill their password.
        loginUser();
    }
} catch (error) {
    // User cancelled or face not recognized
    console.error("Biometric failed", error);
}

Step 3: Securely Store the Token

The real magic is persisting the session. Use our Keychain wrapper to store sensitive tokens. Unlike `localStorage`, this data is encrypted by the OS hardware.

// Saving (after first password login)
Code2Native.setStorageItem("auth_token", "secure-token-123");

// Retrieving (on future app launches)
const token = await Code2Native.getStorageItem("auth_token");

Why this matters for your business

30% Less Friction

Login barriers are the #1 reason for cart abandonment on mobile.

Bank-Grade Security

Hardware-backed encryption is significantly safer than browser cookies.

Premium Feel

Users perceive apps with Face ID as more professional and trustworthy.

Ready to add this to your app? You can test it right now in our playground.

Build your app today

See the Native Bridge documentation for more examples.

C

Code2Native Engineering

Engineering team

Written by the Code2Native engineering team — the people who build and operate the cloud build pipeline.