+
-
-
- );
+function GuestRoute({ children }: { children: React.ReactNode }) {
+ const { isAuthenticated } = useAuth()
+ if (isAuthenticated) return
- {/* Label */}
- {label && (
-
- {label} -
- )} - - {/* Dot indicators */} -
- {Array.from({ length }).map((_, i) => (
-
- {showDigits && i < digits.length && (
-
- {digits[i]}
+
+ {/* Input display: [• dots + ⌫] [Submit] */}
+
+
- {/* Error */}
- {error && (
-
+
+
+ {selection.length === 0 ? (
+ Tap icons to enter your nKode
+ ) : (
+
+ {'•'.repeat(selection.length)}
)}
- ))}
+
+ {error}
- )} + {/* Key tile grid */} +
+ {Array.from({ length: numbOfKeys }).map((_, keyIndex) => {
+ const isActive = pressedKey === keyIndex
+ const startIdx = keyIndex * attrsPerKey
+ const keyIcons = svgs.slice(startIdx, startIdx + attrsPerKey)
- {/* Keypad grid */}
-
- );
+ )
}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 3647310..89dad66 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,70 +1,53 @@
-import { Link, Outlet, useLocation } from 'react-router-dom';
-import { useAuth } from '@/hooks/useAuth';
-import { useTheme } from '@/hooks/useTheme';
-import { ROUTES } from '@/lib/types';
+/**
+ * App shell layout.
+ */
+import { Outlet, Link } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
-export function Layout() {
- const { isAuthenticated, email, logout } = useAuth();
- const { resolved, setTheme, theme } = useTheme();
- const location = useLocation();
-
- const isAuthPage =
- location.pathname === ROUTES.LOGIN || location.pathname === ROUTES.SIGNUP;
+export default function Layout() {
+ const { isAuthenticated, email, logout } = useAuth()
return (
-
- {KEYS.flat().map((key, i) => {
- if (key === null) {
- return ;
- }
- if (key === 'del') {
- return (
-
- );
- }
return (
- );
+ )
})}
+
+
+ (null)
-export const AuthContext = createContext(null);
+export function AuthProvider({ children }: { children: ReactNode }) {
+ const [state, setState] = useState(loadAuth)
-export function useAuth(): AuthContextType {
- const ctx = useContext(AuthContext);
- if (!ctx) throw new Error('useAuth must be inside AuthProvider');
- return ctx;
-}
-
-export function useAuthState() {
- const [state, setState] = useState(loadStoredSession);
-
- const login = useCallback((email: string, session: NKodeSession) => {
- localStorage.setItem(SESSION_KEY, JSON.stringify(session));
- localStorage.setItem(EMAIL_KEY, email);
- setState({ isAuthenticated: true, session, email });
- }, []);
+ const login = useCallback((email: string, secretKeyHex: string, userId: string) => {
+ const next: AuthState = { email, secretKeyHex, userId }
+ setState(next)
+ saveAuth(next)
+ }, [])
const logout = useCallback(() => {
- localStorage.removeItem(SESSION_KEY);
- localStorage.removeItem(EMAIL_KEY);
- setState({ isAuthenticated: false, session: null, email: null });
- }, []);
+ setState({ email: null, secretKeyHex: null, userId: null })
+ clearAuth()
+ resetClient()
+ }, [])
- // Auto-logout on expiry
- useEffect(() => {
- if (!state.session) return;
- const ms = new Date(state.session.expiresAt).getTime() - Date.now();
- if (ms <= 0) {
- logout();
- return;
- }
- const timer = setTimeout(logout, ms);
- return () => clearTimeout(timer);
- }, [state.session, logout]);
+ const value: AuthContextValue = {
+ ...state,
+ login,
+ logout,
+ isAuthenticated: !!state.email && !!state.secretKeyHex && !!state.userId,
+ }
- return { ...state, login, logout };
+ return createElement(AuthContext.Provider, { value }, children)
+}
+
+export function useAuth(): AuthContextValue {
+ const ctx = useContext(AuthContext)
+ if (!ctx) throw new Error('useAuth must be used within AuthProvider')
+ return ctx
}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
deleted file mode 100644
index 054cefc..0000000
--- a/src/hooks/useTheme.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-type Theme = 'light' | 'dark' | 'system';
-
-function getSystemTheme(): 'light' | 'dark' {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-export function useTheme() {
- const [theme, setThemeState] = useState(() => {
- return (localStorage.getItem('nkode_theme') as Theme) || 'system';
- });
-
- const resolved = theme === 'system' ? getSystemTheme() : theme;
-
- useEffect(() => {
- document.documentElement.classList.toggle('dark', resolved === 'dark');
- }, [resolved]);
-
- useEffect(() => {
- if (theme !== 'system') return;
- const mq = window.matchMedia('(prefers-color-scheme: dark)');
- const handler = () => setThemeState('system'); // re-trigger
- mq.addEventListener('change', handler);
- return () => mq.removeEventListener('change', handler);
- }, [theme]);
-
- const setTheme = useCallback((t: Theme) => {
- localStorage.setItem('nkode_theme', t);
- setThemeState(t);
- }, []);
-
- return { theme, resolved, setTheme };
-}
diff --git a/src/index.css b/src/index.css
index 5b56308..f1d8c73 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,47 +1 @@
@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
- --nkode-primary: #6366f1;
- --nkode-primary-hover: #4f46e5;
- --nkode-surface: #ffffff;
- --nkode-surface-alt: #f8fafc;
- --nkode-border: #e2e8f0;
- --nkode-text: #0f172a;
- --nkode-text-muted: #64748b;
-}
-
-.dark {
- --nkode-primary: #818cf8;
- --nkode-primary-hover: #6366f1;
- --nkode-surface: #0f172a;
- --nkode-surface-alt: #1e293b;
- --nkode-border: #334155;
- --nkode-text: #f1f5f9;
- --nkode-text-muted: #94a3b8;
-}
-
-body {
- margin: 0;
- font-family: 'Inter', system-ui, -apple-system, sans-serif;
- background: var(--nkode-surface);
- color: var(--nkode-text);
- -webkit-font-smoothing: antialiased;
-}
-
-/* Keypad button styles */
-.keypad-btn {
- @apply w-16 h-16 rounded-full text-2xl font-semibold
- transition-all duration-150 ease-out
- active:scale-95 select-none
- bg-white dark:bg-slate-800
- text-slate-900 dark:text-slate-100
- border border-slate-200 dark:border-slate-700
- hover:bg-slate-50 dark:hover:bg-slate-700
- shadow-sm;
-}
-
-.keypad-btn:active {
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
diff --git a/src/lib/nkode-client.ts b/src/lib/nkode-client.ts
deleted file mode 100644
index 7c26a33..0000000
--- a/src/lib/nkode-client.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * nKode WASM client wrapper.
- *
- * This module lazily loads the WASM package and provides a typed API.
- * In development, it falls back to a mock client until the WASM package is linked.
- */
-
-import type { NKodeSession } from './types';
-
-// We'll import the WASM module dynamically
-let wasmModule: any = null;
-let wasmClient: any = null;
-
-const API_BASE = import.meta.env.VITE_NKODE_API_URL || 'http://localhost:3000';
-
-/**
- * Try to load the WASM module from /wasm/ directory.
- * Uses dynamic import with vite-ignore to avoid bundling.
- */
-async function tryLoadWasm(): Promise {
- try {
- // Check if WASM files are available
- const check = await fetch('/wasm/nkode_client_wasm_bg.wasm', { method: 'HEAD' });
- if (!check.ok) return null;
-
- // Dynamic import — vite-ignore prevents bundler from resolving
- const wasmUrl = new URL('/wasm/nkode_client_wasm.js', window.location.origin).href;
- const module = await import(/* @vite-ignore */ wasmUrl);
- await module.default('/wasm/nkode_client_wasm_bg.wasm');
- module.init();
- return module;
- } catch {
- return null;
- }
-}
-
-/**
- * Initialize the WASM module. Call once at app startup.
- */
-export async function initNKode(): Promise {
- try {
- const wasm = await tryLoadWasm();
- if (wasm) {
- wasmModule = wasm;
- wasmClient = new wasm.NKodeClient(API_BASE);
- console.log('[nKode] WASM client initialized');
- } else {
- console.warn('[nKode] WASM not available, using mock client');
- }
- } catch (e) {
- console.warn('[nKode] WASM init error, using mock client:', e);
- }
-}
-
-/**
- * Check if WASM client is loaded.
- */
-export function isWasmReady(): boolean {
- return wasmClient !== null;
-}
-
-/**
- * Generate a random 16-byte secret key (hex string).
- */
-export function generateSecretKey(): string {
- if (wasmModule) {
- return wasmModule.NKodeClient.generateSecretKey();
- }
- // Fallback: browser crypto
- const bytes = new Uint8Array(16);
- crypto.getRandomValues(bytes);
- return Array.from(bytes)
- .map((b) => b.toString(16).padStart(2, '0'))
- .join('');
-}
-
-/**
- * Register with key-based OPAQUE flow.
- */
-export async function registerKey(email: string, secretKeyHex: string): Promise {
- if (wasmClient) {
- await wasmClient.registerKey(email, secretKeyHex);
- return;
- }
- // Mock
- console.log('[nKode mock] registerKey', email);
- await new Promise((r) => setTimeout(r, 500));
-}
-
-/**
- * Register with code-based OPAQUE flow.
- */
-export async function registerCode(email: string, passcode: Uint8Array): Promise {
- if (wasmClient) {
- await wasmClient.registerCode(email, passcode);
- return;
- }
- console.log('[nKode mock] registerCode', email);
- await new Promise((r) => setTimeout(r, 500));
-}
-
-/**
- * Login with key-based OPAQUE flow.
- */
-export async function loginKey(email: string, secretKeyHex: string): Promise {
- if (wasmClient) {
- return await wasmClient.loginKey(email, secretKeyHex);
- }
- console.log('[nKode mock] loginKey', email);
- await new Promise((r) => setTimeout(r, 500));
- return {
- sessionId: 'mock-session',
- userId: 'mock-user',
- createdAt: new Date().toISOString(),
- expiresAt: new Date(Date.now() + 3600000).toISOString(),
- };
-}
-
-/**
- * Login with code-based OPAQUE flow.
- */
-export async function loginCode(email: string, passcode: Uint8Array): Promise {
- if (wasmClient) {
- return await wasmClient.loginCode(email, passcode);
- }
- console.log('[nKode mock] loginCode', email);
- await new Promise((r) => setTimeout(r, 500));
- return {
- sessionId: 'mock-session',
- userId: 'mock-user',
- createdAt: new Date().toISOString(),
- expiresAt: new Date(Date.now() + 3600000).toISOString(),
- };
-}
diff --git a/src/lib/types.ts b/src/lib/types.ts
deleted file mode 100644
index 8376dff..0000000
--- a/src/lib/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/** Authentication flow type */
-export type AuthFlow = 'key' | 'code';
-
-/** User session from successful login */
-export interface NKodeSession {
- sessionId: string;
- userId: string;
- createdAt: string;
- expiresAt: string;
-}
-
-/** App-level auth state */
-export interface AuthState {
- isAuthenticated: boolean;
- session: NKodeSession | null;
- email: string | null;
-}
-
-/** Route paths */
-export const ROUTES = {
- LOGIN: '/login',
- SIGNUP: '/signup',
- HOME: '/',
- ADMIN: '/admin',
- DEVELOPER: '/developer',
-} as const;
diff --git a/src/main.tsx b/src/main.tsx
index 98e77aa..4bd3d2a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,14 +1,20 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import './index.css';
-import App from './App';
-import { initNKode } from '@/lib/nkode-client';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+import { initClient } from './services/api'
-// Initialize WASM client (non-blocking)
-initNKode();
-
-createRoot(document.getElementById('root')!).render(
-
-
-);
+// Initialize WASM client, then render
+initClient().then(() => {
+ createRoot(document.getElementById('root')!).render(
+
+
+
+ ,
+ )
+}).catch((err: unknown) => {
+ console.error('Failed to initialize WASM client:', err)
+ document.getElementById('root')!.textContent = 'Failed to load application. Please refresh.'
+})
diff --git a/src/pages/AdminPage.tsx b/src/pages/AdminPage.tsx
deleted file mode 100644
index 0c1c98f..0000000
--- a/src/pages/AdminPage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useAuth } from '@/hooks/useAuth';
-import { Navigate } from 'react-router-dom';
-import { ROUTES } from '@/lib/types';
-
-export function AdminPage() {
- const { isAuthenticated } = useAuth();
-
- if (!isAuthenticated) {
- return (null);
- const [resetKey, setResetKey] = useState(0);
+export default function HomePage() {
+ const { email, userId, logout } = useAuth()
+ const navigate = useNavigate()
- if (!isAuthenticated) {
- return (
-
{/* Header */}
-
+
- {/* Content */}
-
-
+
+
+ {/* Footer */}
+
- );
+ )
}
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index f571b26..2a7e002 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,64 +1,51 @@
-import { useState, useCallback, useEffect, createContext, useContext } from 'react';
-import type { AuthState, NKodeSession } from '@/lib/types';
+/**
+ * Auth context — stores email + secretKey for OPAQUE-based auth.
+ * No tokens needed; the WASM client handles session keys internally.
+ */
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react'
+import { createElement } from 'react'
+import type { AuthState } from '../types'
+import { loadAuth, saveAuth, clearAuth } from '../services/auth'
+import { resetClient } from '../services/api'
-const SESSION_KEY = 'nkode_session';
-const EMAIL_KEY = 'nkode_email';
-
-function loadStoredSession(): AuthState {
- try {
- const raw = localStorage.getItem(SESSION_KEY);
- const email = localStorage.getItem(EMAIL_KEY);
- if (raw) {
- const session: NKodeSession = JSON.parse(raw);
- // Check expiry
- if (new Date(session.expiresAt) > new Date()) {
- return { isAuthenticated: true, session, email };
- }
- localStorage.removeItem(SESSION_KEY);
- }
- } catch {}
- return { isAuthenticated: false, session: null, email: null };
+interface AuthContextValue extends AuthState {
+ /** Call after successful registration + code setup to persist credentials. */
+ login: (email: string, secretKeyHex: string, userId: string) => void
+ /** Clear persisted credentials. */
+ logout: () => void
+ /** True if we have stored credentials (email + secretKey). */
+ isAuthenticated: boolean
}
-export interface AuthContextType extends AuthState {
- login: (email: string, session: NKodeSession) => void;
- logout: () => void;
-}
+const AuthContext = createContext
-
- n
- Kode
+
+
+ nK
+
+ nKode
-
- {/* Theme toggle */}
-
-
+
+
-
- );
-}
diff --git a/src/pages/DeveloperPage.tsx b/src/pages/DeveloperPage.tsx
deleted file mode 100644
index 3205595..0000000
--- a/src/pages/DeveloperPage.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useAuth } from '@/hooks/useAuth';
-import { Navigate } from 'react-router-dom';
-import { ROUTES } from '@/lib/types';
-
-export function DeveloperPage() {
- const { isAuthenticated } = useAuth();
-
- if (!isAuthenticated) {
- return Admin Dashboard
- -
- {[
- { label: 'Total Users', value: '—', icon: '👤' },
- { label: 'Active Sessions', value: '—', icon: '🔐' },
- { label: 'Registered Clients', value: '—', icon: '📱' },
- ].map((stat) => (
-
-
-
-
- ))}
-
- {stat.icon}
-
-
-
- {stat.label}
-{stat.value}
-
-
- - Admin features coming soon. This will display user management, session monitoring, and OIDC client configuration. -
-
-
- );
-}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index f9db0d3..d1b4dc4 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,85 +1,46 @@
-import { useAuth } from '@/hooks/useAuth';
-import { Keypad } from '@/components/Keypad';
-import { useState } from 'react';
+/**
+ * Home page — shown after full authentication (key + code login).
+ */
+import { useAuth } from '../hooks/useAuth'
+import { useNavigate } from 'react-router-dom'
-export function HomePage() {
- const { isAuthenticated, session, email } = useAuth();
- const [practiceResult, setPracticeResult] = useStateDeveloper Dashboard
- -
-
- OIDC Client Setup
-- Register your application to use nKode as an identity provider. Configure redirect URIs, scopes, and authentication flows. -
- -
-
-
-
-
-
-
-
-
-
-
- - Client registration coming soon. This will generate client_id and client_secret for OAuth2/OIDC integration. -
-
-
- );
+ const handleLogout = () => {
+ logout()
+ navigate('/', { replace: true })
}
- const handlePractice = (digits: number[]) => {
- setPracticeResult(`✅ You entered: ${digits.join('')}`);
- setTimeout(() => {
- setPracticeResult(null);
- setResetKey((k) => k + 1);
- }, 2000);
- };
-
return (
- - nKode -
-- Passwordless authentication powered by OPAQUE. -
-- Replace passwords with a memorized numeric code or a cryptographic key. - Zero-knowledge proof means the server never sees your secret. -
-
- {/* Welcome */}
-
-
- Welcome back -
-{email}
+
+
+
- {/* Session info */}
-
+
+
Welcome
+{email}
+User: {userId}
+
-
Session
--
-
- Session ID -
- - {session?.sessionId} - +
- Expires -
- - {session?.expiresAt - ? new Date(session.expiresAt).toLocaleString() - : '—'} - -
-
- );
+ )
}
diff --git a/src/pages/LoginKeypadPage.tsx b/src/pages/LoginKeypadPage.tsx
new file mode 100644
index 0000000..6df488f
--- /dev/null
+++ b/src/pages/LoginKeypadPage.tsx
@@ -0,0 +1,114 @@
+/**
+ * Login keypad page — code-based OPAQUE login.
+ * Displays keypad from prepareCodeLogin data, user taps their nKode,
+ * then deciphers selection and performs code login.
+ */
+import { useState } from 'react'
+import { useLocation, useNavigate, Navigate } from 'react-router-dom'
+import Keypad from '../components/Keypad'
+import { useAuth } from '../hooks/useAuth'
+import * as api from '../services/api'
+import type { CodeLoginData, NKodeIcon } from '../types'
+
+interface LocationState {
+ email: string
+ secretKeyHex: string
+ userId: string
+ codeLoginData: CodeLoginData
+}
+
+export default function LoginKeypadPage() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const auth = useAuth()
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState
+
+
-
- {/* Practice keypad */}
-
+
-
-
-
-
-
- Practice your nKode -
-- {practiceResult} -
- )} +Authenticated via OPAQUE
+Key + Code authentication complete
+
+
+ )
+}
+
+/** Build SVG strings array from CodeLoginData for the Keypad component. */
+function buildSvgsFromCodeLoginData(data: CodeLoginData): string[] {
+ const { keypadIndices, icons } = data
+ // keypadIndices maps each position to an icon index
+ return keypadIndices.map((iconIdx: number) => iconToSvg(icons[iconIdx]))
+}
+
+/** Convert an icon object to an SVG/HTML string for rendering. */
+function iconToSvg(icon: NKodeIcon): string {
+ if (!icon) return ''
+ if (icon.file_type === 'svg') {
+ return icon.img_data
+ }
+ // For non-SVG: render as img with base64
+ const mime = icon.file_type === 'png' ? 'image/png'
+ : icon.file_type === 'webp' ? 'image/webp'
+ : 'image/jpeg'
+ return `
+
+
+ {error && (
+
+
+
+ Login
+{email}
+
+
+ )}
+
+
+ {error}
+
+
-
- );
-}
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..679162b
--- /dev/null
+++ b/src/pages/NotFoundPage.tsx
@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom'
+
+export default function NotFoundPage() {
+ return (
+
- {/* Logo */}
-
-
-
-
- {step === 'email' ? (
-
- ) : (
- - nKode -
-- {step === 'email' ? 'Sign in to your account' : 'Enter your nKode'} -
-
-
-
- )}
- - Authenticating… -
- )} -
+
+ )
+}
diff --git a/src/pages/SignupKeypadPage.tsx b/src/pages/SignupKeypadPage.tsx
new file mode 100644
index 0000000..bdfb796
--- /dev/null
+++ b/src/pages/SignupKeypadPage.tsx
@@ -0,0 +1,165 @@
+/**
+ * Signup keypad page — code registration flow.
+ * Displays icons for the user to select their nKode sequence.
+ * On submit, completes OPAQUE code registration and stores login data.
+ */
+import { useState, useCallback } from 'react'
+import { useLocation, useNavigate, Navigate } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
+import * as api from '../services/api'
+import type { NKodeIcon } from '../types'
+
+interface LocationState {
+ email: string
+ secretKeyHex: string
+ userId: string
+ icons: NKodeIcon[]
+}
+
+/** Default keypad dimensions (matching Flutter: 9 props/key, 6 keys) */
+const ATTRS_PER_KEY = 9
+const NUM_KEYS = 6
+
+export default function SignupKeypadPage() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const auth = useAuth()
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState404
+Page not found
+ + ← Back to Home + +
+
+ )
+}
+
+/** Convert an icon object to an SVG/HTML string. */
+function iconToSvg(icon: NKodeIcon): string {
+ if (!icon) return ''
+ if (icon.file_type === 'svg') {
+ return icon.img_data
+ }
+ const mime = icon.file_type === 'png' ? 'image/png'
+ : icon.file_type === 'webp' ? 'image/webp'
+ : 'image/jpeg'
+ return `
+
+
+ {error && (
+
+
+
+ Set Your nKode
+{email}
+ + {/* Secret key display — user must save this */} +
+
+
+ + Save your secret key — you'll need it to log in: +
+
+
+
+ {secretKeyHex}
+
+
+ + Tap keys to create your nKode pattern, then submit. +
+
+
+ )}
+
+
+ {error}
+
+
-
- );
-}
diff --git a/src/pages/SusiPage.tsx b/src/pages/SusiPage.tsx
new file mode 100644
index 0000000..25828d5
--- /dev/null
+++ b/src/pages/SusiPage.tsx
@@ -0,0 +1,187 @@
+/**
+ * SUSI (Sign Up / Sign In) page.
+ * Login tab: email → OPAQUE key login → navigate to keypad for code login.
+ * Signup tab: email → OPAQUE key register → key login → navigate to keypad for code registration.
+ */
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import * as api from '../services/api'
+
+export default function SusiPage() {
+ const [tab, setTab] = useState<'login' | 'signup'>('login')
+
+ return (
+
- {/* Logo */}
-
-
-
-
- {step === 'email' && (
-
- )}
-
- {step === 'method' && (
- - nKode -
-- {step === 'email' && 'Create your account'} - {step === 'method' && 'Choose your authentication method'} - {step === 'keypad' && 'Create your nKode'} - {step === 'confirm' && 'Confirm your nKode'} - {step === 'key-show' && 'Save your secret key'} - {step === 'done' && 'You\'re all set!'} -
-
-
-
-
-
- )}
-
- {step === 'keypad' && (
-
-
-
- )}
-
- {step === 'confirm' && (
-
-
-
- )}
-
- {step === 'key-show' && (
- - Creating account… -
- )} -
-
-
- )}
-
- {step === 'done' && (
-
-
-
- {error && - ⚠️ Save this key — you won't see it again! -
-
- {secretKey}
-
- {error}
} - -
-
- )}
- ✅
- - Your account has been created with key-based auth. -
- - Sign in - -
+ {/* Logo area */}
+
+ )
+}
+
+/** Login tab — email + secret key → OPAQUE key login → code login keypad */
+function LoginTab() {
+ const [email, setEmail] = useState('')
+ const [secretKeyHex, setSecretKeyHex] = useState('')
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState
+
+
+ {/* Tab bar */}
+
+ nK
+
+ nKode
+Passwordless Authentication
+
+
+
+
+
+ {/* Tab content */}
+ {tab === 'login' ?