Quick Start Guide

Get passkey authentication running in your application in under 30 minutes.

What you'll build

A complete authentication system with passkey registration, login, and account recovery.

Prerequisites

Before you begin, make sure you have:

  • Node.js 18+ installed
  • A modern browser that supports WebAuthn
  • Your application's domain configured

Choose Your Framework

Step 1: Installation

Install the HelioRim SDK for your framework:

Terminal
npm install @heliorim/sdk

Step 2: Initialize HelioRim

Set up the SDK for your application:

src/auth.js
import { createAuth } from '@heliorim/sdk';

// Get your appId from the HelioRim dashboard after signup
export const auth = await createAuth({
  appId: 'YOUR_APP_ID',
  apiEndpoint: 'https://auth-api.heliorim.dev',
  environment: 'production'
});

Step 3: User Registration

Add passkey registration to your sign-up flow:

src/register.js
async function registerUser(email, displayName) {
  try {
    const result = await auth.register({
      email: email,
      displayName: displayName,
      userVerification: 'required'
    });

    if (result.success) {
      window.location.href = '/dashboard';
    }
  } catch (error) {
    console.error('Registration failed:', error);
  }
}

Step 4: User Login

Implement passwordless login with passkeys:

src/login.js
async function loginUser(email) {
  try {
    const result = await auth.authenticate({
      email: email,
      userVerification: 'required'
    });

    if (result.success) {
      // Session is automatically managed by the SDK
      window.location.href = '/dashboard';
    }
  } catch (error) {
    console.error('Login failed:', error);
  }
}

Try It Live

Experience the complete flow in our interactive demo:

CLI Quick Setup

For the fastest setup, use the HelioRim CLI to scaffold a complete project:

Terminal
npx @heliorim/cli quickstart my-app

The CLI will guide you through:

  • Framework selection
  • Project setup
  • SDK configuration
  • Example components

Agent Quick Setup

For delegated third-party agent access, connect your MCP client to the dedicated HelioRim remote MCP worker instead of sharing long-lived admin or developer credentials.

mcp-client.json
{
  "mcpServers": {
    "heliorim": {
      "url": "https://helio-remote-mcp-preview.will-524.workers.dev/mcp"
    }
  }
}

Testing Your Integration

Verify your implementation works correctly:

✓ Registration Checklist

  • Browser prompts for passkey creation
  • Biometric/PIN verification works
  • Success redirects to dashboard
  • Errors handled gracefully

✓ Login Checklist

  • Browser shows passkey picker
  • Authentication completes quickly
  • Session persists across refresh
  • Invalid attempts show errors

Production Considerations

Important for Production

  • • Use HTTPS - WebAuthn requires secure context
  • • Configure your domain in HelioRim settings
  • • Set appropriate CORS headers for API calls
  • • Implement proper error handling and recovery
  • • Test on multiple browsers and devices

Next Steps

Enhance your authentication with advanced features:

Need Help?

Our team is here to ensure your success: