Skip to Content
DocumentationDemonstrationPasskey-first LoginStep 3: Open the login modal

Step 3: Open the 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 member = result.payload[0].member;
  console.log('Welcome!', member?.email);
}

Login Modal Example

Response Structure

{
  success: boolean;
  payload: [{
    token: string;
    member: Member;
  }];
}
await transcodes.openAuthLoginModal({
  projectId: 'proj_abc123',
  webhookNotification: true,  // Send Slack alert on login success/failure
});
OptionTypeDefaultDescription
projectIdstring—Project ID (optional if set in script URL)
webhookNotificationbooleanfalseSend Slack webhook on login success/failure

Framework Examples

import { useState } from 'react';
 
function LoginButton() {
  const [member, setMember] = useState(null);
 
  const handleLogin = async () => {
    const result = await transcodes.openAuthLoginModal({});
    if (result.success) {
      setMember(result.payload[0].member);
    }
  };
 
  return (
    <div>
      {member ? (
        <p>Welcome, {member.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

Next: Step 4: Auth state events

Last updated on
Step 2: Load the SDK (CDN or npm)Step 4: Auth state events