chore: auth ui

web/components/custom/auth-ui.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { useState } from "react"
+import { DemoAuth } from "jazz-react"
+import { Input } from "../ui/input"
+import { Button } from "../ui/button"
+
+export const AuthUI: DemoAuth.Component = ({ existingUsers, logInAs, signUp, appName, loading }) => {
+	const [username, setUsername] = useState<string>("")
+
+	if (loading) return <div>Loading...</div>
+
+	return (
+		<div className="bg-background flex h-screen w-screen items-center justify-center">
+			<div className="flex w-72 flex-col gap-8">
+				<h1>{appName}</h1>
+				<form
+					className="flex w-72 flex-col gap-2"
+					onSubmit={e => {
+						e.preventDefault()
+						signUp(username)
+					}}
+				>
+					<Input
+						placeholder="Display name"
+						value={username}
+						onChange={e => setUsername(e.target.value)}
+						autoComplete="webauthn"
+					/>
+					<Button type="submit">Sign Up</Button>
+				</form>
+
+				<div className="flex flex-col gap-2">
+					{existingUsers.map(user => (
+						<Button key={user} onClick={() => logInAs(user)}>
+							Log In as "{user}"
+						</Button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default AuthUI

web/components/custom/demo-auth.tsx

@@ -1,166 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react"
-import { BrowserDemoAuth, AuthProvider } from "jazz-browser"
-import { Account, CoValueClass, ID } from "jazz-tools"
-import { AgentSecret } from "cojson"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-
-// Types
-export type AuthState = "loading" | "ready" | "signedIn"
-
-export type ReactAuthHook<Acc extends Account> = (setJazzAuthState: (state: AuthState) => void) => {
-	auth: AuthProvider<Acc>
-	AuthUI: React.ReactNode
-	logOut?: () => void
-}
-
-type DemoAuthProps<Acc extends Account = Account> = {
-	accountSchema?: CoValueClass<Acc> & typeof Account
-	appName: string
-	appHostname?: string
-	Component?: DemoAuth.Component
-	seedAccounts?: {
-		[name: string]: { accountID: ID<Account>; accountSecret: AgentSecret }
-	}
-}
-
-type AuthComponentProps = {
-	appName: string
-	loading: boolean
-	existingUsers: string[]
-	logInAs: (existingUser: string) => void
-	signUp: (username: string) => void
-}
-
-// Main DemoAuth function
-export function DemoAuth<Acc extends Account = Account>({
-	accountSchema = Account as CoValueClass<Acc> & typeof Account,
-	appName,
-	appHostname,
-	Component = DemoAuth.BasicUI,
-	seedAccounts
-}: DemoAuthProps<Acc>): ReactAuthHook<Acc> {
-	return function useLocalAuth(setJazzAuthState) {
-		const [authState, setAuthState] = useState<AuthState>("loading")
-		const [existingUsers, setExistingUsers] = useState<string[]>([])
-		const [logInAs, setLogInAs] = useState<(existingUser: string) => void>(() => () => {})
-		const [signUp, setSignUp] = useState<(username: string) => void>(() => () => {})
-		const [logOut, setLogOut] = useState<(() => void) | undefined>(undefined)
-		const [logOutCounter, setLogOutCounter] = useState(0)
-
-		useEffect(() => {
-			setJazzAuthState(authState)
-		}, [authState, setJazzAuthState])
-
-		const auth = useMemo(() => {
-			return new BrowserDemoAuth<Acc>(
-				accountSchema,
-				{
-					onReady(next) {
-						setAuthState("ready")
-						setExistingUsers(next.existingUsers)
-						setLogInAs(() => next.logInAs)
-						setSignUp(() => next.signUp)
-					},
-					onSignedIn(next) {
-						setAuthState("signedIn")
-						setLogOut(() => () => {
-							next.logOut()
-							setAuthState("loading")
-							setLogOutCounter(c => c + 1)
-						})
-					}
-				},
-				appName,
-				seedAccounts
-			)
-		}, [])
-
-		const AuthUI = (
-			<Component
-				appName={appName}
-				loading={authState === "loading"}
-				existingUsers={existingUsers}
-				logInAs={logInAs}
-				signUp={signUp}
-			/>
-		)
-
-		return { auth, AuthUI, logOut }
-	}
-}
-
-const DemoAuthBasicUI: React.FC<AuthComponentProps> = ({ appName, existingUsers, logInAs, signUp }) => {
-	const [username, setUsername] = useState<string>("")
-	const darkMode = useDarkMode()
-
-	return (
-		<div className="relative flex min-h-full flex-col justify-center">
-			<div className="mx-auto h-full w-full max-w-sm space-y-6 p-4">
-				<h1 className="text-center font-semibold">{appName}</h1>
-				<SignUpForm username={username} setUsername={setUsername} signUp={signUp} darkMode={darkMode} />
-				<ExistingUsersList existingUsers={existingUsers} logInAs={logInAs} darkMode={darkMode} />
-			</div>
-		</div>
-	)
-}
-
-// Helper components
-const SignUpForm: React.FC<{
-	username: string
-	setUsername: (value: string) => void
-	signUp: (username: string) => void
-	darkMode: boolean
-}> = ({ username, setUsername, signUp, darkMode }) => (
-	<form
-		onSubmit={e => {
-			e.preventDefault()
-			signUp(username)
-		}}
-		className="flex flex-col gap-y-4"
-	>
-		<Input
-			placeholder="Display name"
-			value={username}
-			onChange={e => setUsername(e.target.value)}
-			autoComplete="webauthn"
-		/>
-		<Button type="submit">Sign Up as new account</Button>
-	</form>
-)
-
-const ExistingUsersList: React.FC<{
-	existingUsers: string[]
-	logInAs: (user: string) => void
-	darkMode: boolean
-}> = ({ existingUsers, logInAs, darkMode }) => (
-	<div className="flex flex-col gap-y-2">
-		{existingUsers.map(user => (
-			<Button key={user} onClick={() => logInAs(user)}>
-				Log In as &quot;{user}&quot;
-			</Button>
-		))}
-	</div>
-)
-
-// Hooks
-const useDarkMode = () => {
-	const [darkMode, setDarkMode] = useState(false)
-
-	useEffect(() => {
-		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-		setDarkMode(mediaQuery.matches)
-
-		const handler = (e: MediaQueryListEvent) => setDarkMode(e.matches)
-		mediaQuery.addEventListener("change", handler)
-		return () => mediaQuery.removeEventListener("change", handler)
-	}, [])
-
-	return darkMode
-}
-
-// DemoAuth namespace
-export namespace DemoAuth {
-	export type Component = React.FC<AuthComponentProps>
-	export const BasicUI = DemoAuthBasicUI
-}