HelioRim brand iconHelioRim

WebAuthn Playground

Test HelioRim SDK features and WebAuthn capabilities in your browser

SDK Configuration

SDK Status

Device Capabilities

Not Supported
WebAuthn Support
Platform Authenticator
Conditional UI
PRF Extension
Large Blob Storage
Backup Eligibility
User Verifying Platform
Resident Key Support

Authentication Testing

Integration Code

import {
  SignInWithPasskey,
  useHelioRim,
} from '@heliorim/sdk-react';
import { getEndpointConfig } from '@heliorim/sdk/config';

function App() {
  const {
    register,
    establishSessionFromCeremonyToken,
    isAuthenticated,
    session,
  } = useHelioRim({
    appId: 'playground-demo',
    environment: 'preview',
  });

  const authApiUrl = getEndpointConfig('preview').auth;

  const handleRegister = async () => {
    const session = await register({
      email: 'you@example.com',
      displayName: 'John Doe',
    });
    console.log('Registered:', session);
  };

  return (
    <div>
      {!isAuthenticated ? (
        <>
          <button onClick={handleRegister}>Register with Passkey</button>
          <SignInWithPasskey
            authApiUrl={authApiUrl}
            tenantId="default"
            onToken={(token) => {
              establishSessionFromCeremonyToken(token);
            }}
            submitLabel="Sign in with Passkey"
          />
        </>
      ) : (
        <p>Welcome {session?.email}!</p>
      )}
    </div>
  );
}
// Mount: conditional autofill on mount when the browser supports it
// CTA: aborts conditional and runs explicit passkey prompt