+
+ );
+};
+
+export default CryptoDebug;
\ No newline at end of file
diff --git a/src/components/auth/CryptoLogin.tsx b/src/components/auth/CryptoLogin.tsx
new file mode 100644
index 0000000..4a4899e
--- /dev/null
+++ b/src/components/auth/CryptoLogin.tsx
@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from 'react';
+import { CryptoAuthService } from '../../lib/auth/cryptoAuthService';
+import { useAuth } from '../../context/AuthContext';
+import { useNotifications } from '../../context/NotificationContext';
+import { checkBrowserSupport, isSecureContext } from '../../lib/utils/browser';
+
+interface CryptoLoginProps {
+ onSuccess?: () => void;
+ onCancel?: () => void;
+}
+
+/**
+ * WebCryptoAPI-based authentication component
+ */
+const CryptoLogin: React.FCCryptographic Authentication Debug
+ +
+ setTestUsername(e.target.value)}
+ placeholder="Test username"
+ className="debug-input"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Debug Results:
+ {testResults.length === 0 ? ( +No test results yet. Click "Run Crypto Test" to start.
+ ) : ( +
+ {testResults.map((result, index) => (
+
+ )}
+
+ {result}
+
+ ))}
+
+
+ );
+ }
+
+ if (!browserSupport.secure) {
+ return (
+ Browser Not Supported
+Your browser does not support the required features for cryptographic authentication.
+Please use a modern browser with WebCryptoAPI support.
+ {onCancel && ( + + )} +
+
+ );
+ }
+
+ return (
+ Secure Context Required
+Cryptographic authentication requires a secure context (HTTPS).
+Please access this application over HTTPS.
+ {onCancel && ( + + )} +
+
+ );
+};
+
+export default CryptoLogin;
\ No newline at end of file
diff --git a/src/components/auth/CryptoTest.tsx b/src/components/auth/CryptoTest.tsx
new file mode 100644
index 0000000..ebc3cee
--- /dev/null
+++ b/src/components/auth/CryptoTest.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import { CryptoAuthService } from '../../lib/auth/cryptoAuthService';
+import { checkBrowserSupport, isSecureContext } from '../../lib/utils/browser';
+import * as crypto from '../../lib/auth/crypto';
+
+/**
+ * Test component to verify WebCryptoAPI authentication
+ */
+const CryptoTest: React.FC = () => {
+ const [testResults, setTestResults] = useState{isRegistering ? 'Create Cryptographic Account' : 'Cryptographic Sign In'}
+ + {/* Show existing users if available */} + {existingUsers.length > 0 && !isRegistering && ( +
+
+ )}
+
+ Available Accounts with Valid Keys
+
+ {existingUsers.map((user) => (
+
+ ))}
+
+
+
+
+
+
+ + {isRegistering + ? 'Create a new account using WebCryptoAPI for secure authentication.' + : existingUsers.length > 0 + ? 'Select an account above or enter a different username to sign in.' + : 'Sign in using your cryptographic credentials.' + } +
+
+ ✓ ECDSA P-256 Key Pairs
+ ✓ Challenge-Response Authentication
+ ✓ Secure Key Storage
+
+
+
+
+
+ {onCancel && (
+
+ )}
+
+
+ );
+};
+
+export default CryptoTest;
\ No newline at end of file
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
deleted file mode 100644
index 5dcf4d0..0000000
--- a/src/components/auth/Login.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { isUsernameValid, isUsernameAvailable } from '../../lib/auth/account';
-import { useAuth } from '../../context/AuthContext';
-import { useNotifications } from '../../context/NotificationContext';
-
-interface LoginProps {
- onSuccess?: () => void;
-}
-
-/**
- * Combined Login/Register component
- *
- * Handles both login and registration flows based on user selection
- */
-const Login: React.FCWebCryptoAPI Authentication Test
+ +
+
+
+
+
+
+
+
+
+ Test Results:
+ {testResults.length === 0 ? ( +No test results yet. Click "Run Tests" to start.
+ ) : ( +
+ {testResults.map((result, index) => (
+
+ )}
+
+ {result}
+
+ ))}
+
+
+ What's Being Tested:
+-
+
- Browser WebCryptoAPI support +
- Secure context (HTTPS) +
- ECDSA P-256 key pair generation +
- Public key export/import +
- Data signing and verification +
- User registration with cryptographic keys +
- User login with challenge-response +
- Credential verification +
-
- );
-};
-
-export default Login;
\ No newline at end of file
diff --git a/src/components/auth/LoginButton.tsx b/src/components/auth/LoginButton.tsx
new file mode 100644
index 0000000..fedfa84
--- /dev/null
+++ b/src/components/auth/LoginButton.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
+import { useNotifications } from '../../context/NotificationContext';
+import CryptoLogin from './CryptoLogin';
+
+interface LoginButtonProps {
+ className?: string;
+}
+
+const LoginButton: React.FC{isRegistering ? 'Create Account' : 'Sign In'}
- - - -
-
-
-
+
+ )}
+
+ );
+};
+
+export default LoginButton;
\ No newline at end of file
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 7134222..0f1e6d2 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -2,10 +2,12 @@ import React, { createContext, useContext, useState, useEffect, ReactNode } from
import type FileSystem from '@oddjs/odd/fs/index';
import { Session, SessionError } from '../lib/auth/types';
import { AuthService } from '../lib/auth/authService';
+import { saveSession, clearStoredSession } from '../lib/auth/sessionPersistence';
interface AuthContextType {
session: Session;
setSession: (updatedSession: Partial
+
+ Authentication Error
-{errorToMessage(session.error)}
+{session.error}
- navigate('/')} />
+ navigate('/')} />
);
};
\ No newline at end of file
diff --git a/src/routes/Board.tsx b/src/routes/Board.tsx
index d67f9a9..a604d7e 100644
--- a/src/routes/Board.tsx
+++ b/src/routes/Board.tsx
@@ -37,6 +37,9 @@ import {
initLockIndicators,
watchForLockedShapes,
} from "@/ui/cameraUtils"
+import { useAuth } from "../context/AuthContext"
+import { updateLastVisited } from "../lib/starredBoards"
+import { captureBoardScreenshot } from "../lib/screenshotService"
// Default to production URL if env var isn't available
export const WORKER_URL = "https://jeffemmett-canvas.jeffemmett.workers.dev"
@@ -63,6 +66,7 @@ const customTools = [
export function Board() {
const { slug } = useParams<{ slug: string }>()
const roomId = slug || "default-room"
+ const { session } = useAuth()
const storeConfig = useMemo(
() => ({
@@ -70,8 +74,13 @@ export function Board() {
assets: multiplayerAssetStore,
shapeUtils: [...defaultShapeUtils, ...customShapeUtils],
bindingUtils: [...defaultBindingUtils],
+ // Add user information to the presence system
+ user: session.authed ? {
+ id: session.username,
+ name: session.username,
+ } : undefined,
}),
- [roomId],
+ [roomId, session.authed, session.username],
)
const store = useSync(storeConfig)
@@ -97,6 +106,55 @@ export function Board() {
watchForLockedShapes(editor)
}, [editor])
+ // Update presence when session changes
+ useEffect(() => {
+ if (!editor || !session.authed || !session.username) return
+
+ // The presence should automatically update through the useSync configuration
+ // when the session changes, but we can also try to force an update
+ console.log('User authenticated, presence should show:', session.username)
+ }, [editor, session.authed, session.username])
+
+ // Track board visit for starred boards
+ useEffect(() => {
+ if (session.authed && session.username && roomId) {
+ updateLastVisited(session.username, roomId);
+ }
+ }, [session.authed, session.username, roomId]);
+
+ // Capture screenshots when board content changes
+ useEffect(() => {
+ if (!editor || !roomId || !store.store) return;
+
+ // Get current shapes to detect changes
+ const currentShapes = editor.getCurrentPageShapes();
+ const currentShapeCount = currentShapes.length;
+
+ // Create a simple hash of the content for change detection
+ const currentContentHash = currentShapes.length > 0
+ ? currentShapes.map(shape => `${shape.id}-${shape.type}`).sort().join('|')
+ : '';
+
+ // Debounced screenshot capture only when content actually changes
+ const timeoutId = setTimeout(async () => {
+ const newShapes = editor.getCurrentPageShapes();
+ const newShapeCount = newShapes.length;
+ const newContentHash = newShapes.length > 0
+ ? newShapes.map(shape => `${shape.id}-${shape.type}`).sort().join('|')
+ : '';
+
+ // Only capture if content actually changed
+ if (newShapeCount !== currentShapeCount || newContentHash !== currentContentHash) {
+ console.log('Content changed, capturing screenshot');
+ await captureBoardScreenshot(editor, roomId);
+ } else {
+ console.log('No content changes detected, skipping screenshot');
+ }
+ }, 3000); // Wait 3 seconds to ensure changes are complete
+
+ return () => clearTimeout(timeoutId);
+ }, [editor, roomId, store.store?.getSnapshot()]); // Still trigger on store changes to detect them
+
return (
+
+ );
+ }
+
+ if (!session.authed) {
+ return (
+ Loading dashboard...
+
+
+ );
+ }
+
+ return (
+
+
+ Authentication Required
+Please log in to access your dashboard.
+ Go Home +
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/types/odd.d.ts b/src/types/odd.d.ts
new file mode 100644
index 0000000..949ce1a
--- /dev/null
+++ b/src/types/odd.d.ts
@@ -0,0 +1,36 @@
+declare module '@oddjs/odd' {
+ export interface Program {
+ session?: Session;
+ }
+
+ export interface Session {
+ username: string;
+ fs: FileSystem;
+ }
+
+ export interface FileSystem {
+ mkdir(path: string): PromiseMy Dashboard
+Welcome back, {session.username}!
+
+
+
+
+
+
+
+ {isLoading ? (
+ Starred Boards
+ {starredBoards.length} board{starredBoards.length !== 1 ? 's' : ''} +Loading starred boards...
+ ) : starredBoards.length === 0 ? (
+
+
+ ) : (
+ ⭐
+ No starred boards yet
+Star boards you want to save for quick access.
+ Browse Boards +
+ {starredBoards.map((board) => {
+ const screenshot = getBoardScreenshot(board.slug);
+ return (
+
+ )}
+
+ {screenshot && (
+
+ );
+ })}
+
+ 
+
+ )}
+
+
+
+
+ {board.title}
+ +
+
+
+ /{board.slug}
+
+
+ Starred: {formatDate(board.starredAt)}
+
+ {board.lastVisited && (
+
+ Last visited: {formatDate(board.lastVisited)}
+
+ )}
+
+
+
+ Open Board
+
+
+
-
-