Skip to Content
DocumentationGetting StartedPasskey-first LoginStep 3: Call Login Modal

Step 3: Call Login Modal

⏱ 5 min

Trigger the passkey login modal with a single function call.

Open Login Modal

const result = await transcodes.openAuthLoginModal();
 
if (result.success) {
  const user = result.payload[0].user;
  console.log('Welcome!', user.email);
}

Login Modal Example

Response Structure

{
  success: boolean;
  payload: [{
    user: {
      id: string;
      email: string;
      createdAt: string;
    }
  }];
}

Customize the login modal:

await transcodes.openAuthLoginModal({
  theme: 'dark',        // 'light' | 'dark' | 'auto'
  redirectUrl: '/dashboard',  // Redirect after success
  locale: 'en',         // 'en' | 'ko' | 'ja'
});
OptionTypeDefaultDescription
themestring'auto'Modal theme
redirectUrlstringnullPost-auth redirect
localestring'en'UI language

Framework Examples

import { useState } from 'react';
 
function LoginButton() {
  const [user, setUser] = useState(null);
 
  const handleLogin = async () => {
    const result = await transcodes.openAuthLoginModal();
    if (result.success) {
      setUser(result.payload[0].user);
    }
  };
 
  return (
    <div>
      {user ? (
        <p>Welcome, {user.email}!</p>
      ) : (
        <button onClick={handleLogin}>Sign In with Passkey</button>
      )}
    </div>
  );
}

Error Handling

try {
  const result = await transcodes.openAuthLoginModal();
  
  if (!result.success) {
    console.error('Authentication failed or cancelled');
  }
} catch (error) {
  console.error('Modal error:', error);
}

What’s Next

Login working! Next: Step 4: Listen for State

Last updated on
Step 2: Import CDN ScriptStep 4: Listen for State