- Full OPAQUE auth flow via WASM client SDK (client-wasm crate) - New user: Key Register → Key Login → Code Register (icon selection) → done - Existing user: Key Login → get login-data → icon keypad → Code Login → done - Icon-based keypad matching Flutter design: - 2 cols portrait, 3 cols landscape - Key tiles with 3-col sub-grid of icons - Navy border press feedback - Dot display with backspace + submit - SVGs rendered as-is (no color manipulation) - SusiPage with Login/Signup tabs - LoginKeypadPage and SignupKeypadPage for code flows - Secret key display/copy on signup - Unit tests for Keypad component - WASM pkg bundled locally (no external dep)
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { Routes, Route, Navigate } from 'react-router-dom'
|
|
import { AuthProvider, useAuth } from './hooks/useAuth'
|
|
import Layout from './components/Layout'
|
|
import SusiPage from './pages/SusiPage'
|
|
import LoginKeypadPage from './pages/LoginKeypadPage'
|
|
import SignupKeypadPage from './pages/SignupKeypadPage'
|
|
import HomePage from './pages/HomePage'
|
|
import NotFoundPage from './pages/NotFoundPage'
|
|
|
|
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
|
const { isAuthenticated } = useAuth()
|
|
if (!isAuthenticated) return <Navigate to="/" replace />
|
|
return <>{children}</>
|
|
}
|
|
|
|
function GuestRoute({ children }: { children: React.ReactNode }) {
|
|
const { isAuthenticated } = useAuth()
|
|
if (isAuthenticated) return <Navigate to="/home" replace />
|
|
return <>{children}</>
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<AuthProvider>
|
|
<Routes>
|
|
<Route element={<Layout />}>
|
|
{/* Guest routes */}
|
|
<Route path="/" element={<GuestRoute><SusiPage /></GuestRoute>} />
|
|
<Route path="/login-keypad" element={<GuestRoute><LoginKeypadPage /></GuestRoute>} />
|
|
<Route path="/signup-keypad" element={<GuestRoute><SignupKeypadPage /></GuestRoute>} />
|
|
|
|
{/* Protected routes */}
|
|
<Route path="/home" element={<ProtectedRoute><HomePage /></ProtectedRoute>} />
|
|
|
|
{/* 404 */}
|
|
<Route path="*" element={<NotFoundPage />} />
|
|
</Route>
|
|
</Routes>
|
|
</AuthProvider>
|
|
)
|
|
}
|