feat(web): implement authentication flow (#35)

- Add AuthProvider context (login/register/logout/token refresh)
- Add ProtectedRoute wrapper guarding the dashboard
- Add use-auth hook and wire auth into the query provider
- Connect login/register pages to the API with Zod validation
- Show user info and logout in the sidebar

Uses the shared api-client and veridion_access_token key so auth
state is consistent with the rest of the app.

Author: Emmanuel-Ugochukwu1

apps/web/src/app/dashboard/layout.tsx

@@ -1,10 +1,13 @@
+import { ProtectedRoute } from '@/components/auth/protected-route';
 import { Sidebar } from '@/components/sidebar';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
-      <main className="bg-muted/10 flex-1 overflow-y-auto p-6 lg:p-8">{children}</main>
-    </div>
+    <ProtectedRoute>
+      <div className="flex h-screen overflow-hidden">
+        <Sidebar />
+        <main className="bg-muted/10 flex-1 overflow-y-auto p-6 lg:p-8">{children}</main>
+      </div>
+    </ProtectedRoute>
   );
 }

apps/web/src/app/login/page.tsx

@@ -1,38 +1,53 @@
 'use client';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { Eye, EyeOff, Lock, Mail, Shield } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { z } from 'zod';
 
-import { apiFetch, storeAccessToken } from '@/lib/api-client';
+import { useAuth } from '@/lib/auth';
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(1, 'Password is required'),
+});
+
+type LoginForm = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
+  const { login, isAuthenticated } = useAuth();
   const router = useRouter();
   const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [serverError, setServerError] = useState<string | null>(null);
 
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setLoading(true);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginForm>({
+    resolver: zodResolver(loginSchema),
+  });
 
-    const formData = new FormData(e.currentTarget);
-    const email = formData.get('email') as string;
-    const password = formData.get('password') as string;
+  // Redirect if already authenticated
+  if (isAuthenticated) {
+    router.replace('/dashboard');
+    return null;
+  }
 
+  async function onSubmit(data: LoginForm) {
+    setServerError(null);
     try {
-      const response = await apiFetch<{ accessToken: string }>('/auth/login', {
-        method: 'POST',
-        body: JSON.stringify({ email, password }),
-      });
-      storeAccessToken(response.accessToken);
+      await login(data.email, data.password);
       toast.success('Welcome back!');
       router.push('/dashboard');
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Unable to sign in');
-    } finally {
-      setLoading(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Login failed';
+      setServerError(message);
+      toast.error(message);
     }
   }
 
@@ -49,12 +64,20 @@ export default function LoginPage() {
         </div>
 
         <div className="bg-card rounded-xl border p-6 shadow-sm">
+          {/* Server error */}
+          {serverError && (
+            <div className="bg-destructive/10 text-destructive mb-4 rounded-lg px-4 py-2.5 text-sm">
+              {serverError}
+            </div>
+          )}
+
           <form
             onSubmit={(e) => {
-              void handleSubmit(e);
+              void handleSubmit(onSubmit)(e);
             }}
             className="space-y-5"
           >
+            {/* Email */}
             <div>
               <label htmlFor="email" className="text-sm font-medium">
                 Email address
@@ -63,16 +86,21 @@ export default function LoginPage() {
                 <Mail className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
                 <input
                   id="email"
-                  name="email"
                   type="email"
                   autoComplete="email"
-                  required
                   placeholder="you@example.com"
-                  className="bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-3 text-sm focus:outline-none focus:ring-2"
+                  className={`bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-3 text-sm focus:outline-none focus:ring-2 ${
+                    errors.email ? 'border-destructive' : ''
+                  }`}
+                  {...register('email')}
                 />
               </div>
+              {errors.email && (
+                <p className="text-destructive mt-1 text-xs">{errors.email.message}</p>
+              )}
             </div>
 
+            {/* Password */}
             <div>
               <div className="flex items-center justify-between">
                 <label htmlFor="password" className="text-sm font-medium">
@@ -89,30 +117,35 @@ export default function LoginPage() {
                 <Lock className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
                 <input
                   id="password"
-                  name="password"
                   type={showPassword ? 'text' : 'password'}
                   autoComplete="current-password"
-                  required
-                  minLength={8}
                   placeholder="Enter your password"
-                  className="bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-10 text-sm focus:outline-none focus:ring-2"
+                  className={`bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-10 text-sm focus:outline-none focus:ring-2 ${
+                    errors.password ? 'border-destructive' : ''
+                  }`}
+                  {...register('password')}
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
                   className="text-muted-foreground hover:text-foreground absolute right-3 top-1/2 -translate-y-1/2"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
                 >
                   {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                 </button>
               </div>
+              {errors.password && (
+                <p className="text-destructive mt-1 text-xs">{errors.password.message}</p>
+              )}
             </div>
 
+            {/* Submit */}
             <button
               type="submit"
-              disabled={loading}
+              disabled={isSubmitting}
               className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg px-4 py-2.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
             >
-              {loading ? 'Signing in...' : 'Sign in'}
+              {isSubmitting ? 'Signing in...' : 'Sign in'}
             </button>
           </form>
 

apps/web/src/app/register/page.tsx

@@ -1,45 +1,49 @@
 'use client';
 
+import { zodResolver } from '@hookform/resolvers/zod';
+import { registerSchema } from '@veridion/shared';
 import { Eye, EyeOff, Lock, Mail, Shield, User } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { type z } from 'zod';
 
-import { apiFetch, storeAccessToken } from '@/lib/api-client';
+import { useAuth } from '@/lib/auth';
+
+type RegisterForm = z.infer<typeof registerSchema>;
 
 export default function RegisterPage() {
+  const { register: registerUser, isAuthenticated } = useAuth();
   const router = useRouter();
   const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setLoading(true);
+  const [serverError, setServerError] = useState<string | null>(null);
 
-    const formData = new FormData(e.currentTarget);
-    const displayName = formData.get('displayName') as string;
-    const email = formData.get('email') as string;
-    const password = formData.get('password') as string;
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<RegisterForm>({
+    resolver: zodResolver(registerSchema),
+  });
 
-    if (!/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/[0-9]/.test(password)) {
-      toast.error('Password must contain uppercase, lowercase, and a number');
-      setLoading(false);
-      return;
-    }
+  // Redirect if already authenticated
+  if (isAuthenticated) {
+    router.replace('/dashboard');
+    return null;
+  }
 
+  async function onSubmit(data: RegisterForm) {
+    setServerError(null);
     try {
-      const response = await apiFetch<{ accessToken: string }>('/auth/register', {
-        method: 'POST',
-        body: JSON.stringify({ displayName, email, password }),
-      });
-      storeAccessToken(response.accessToken);
+      await registerUser(data.email, data.password, data.displayName);
       toast.success('Account created successfully!');
       router.push('/dashboard');
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Unable to create account');
-    } finally {
-      setLoading(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Registration failed';
+      setServerError(message);
+      toast.error(message);
     }
   }
 
@@ -58,12 +62,20 @@ export default function RegisterPage() {
         </div>
 
         <div className="bg-card rounded-xl border p-6 shadow-sm">
+          {/* Server error */}
+          {serverError && (
+            <div className="bg-destructive/10 text-destructive mb-4 rounded-lg px-4 py-2.5 text-sm">
+              {serverError}
+            </div>
+          )}
+
           <form
             onSubmit={(e) => {
-              void handleSubmit(e);
+              void handleSubmit(onSubmit)(e);
             }}
             className="space-y-5"
           >
+            {/* Display name */}
             <div>
               <label htmlFor="displayName" className="text-sm font-medium">
                 Display name
@@ -72,17 +84,20 @@ export default function RegisterPage() {
                 <User className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
                 <input
                   id="displayName"
-                  name="displayName"
                   type="text"
-                  required
-                  minLength={2}
-                  maxLength={50}
                   placeholder="John Doe"
-                  className="bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-3 text-sm focus:outline-none focus:ring-2"
+                  className={`bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-3 text-sm focus:outline-none focus:ring-2 ${
+                    errors.displayName ? 'border-destructive' : ''
+                  }`}
+                  {...register('displayName')}
                 />
               </div>
+              {errors.displayName && (
+                <p className="text-destructive mt-1 text-xs">{errors.displayName.message}</p>
+              )}
             </div>
 
+            {/* Email */}
             <div>
               <label htmlFor="email" className="text-sm font-medium">
                 Email address
@@ -91,16 +106,21 @@ export default function RegisterPage() {
                 <Mail className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
                 <input
                   id="email"
-                  name="email"
                   type="email"
                   autoComplete="email"
-                  required
                   placeholder="you@example.com"
-                  className="bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-3 text-sm focus:outline-none focus:ring-2"
+                  className={`bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-3 text-sm focus:outline-none focus:ring-2 ${
+                    errors.email ? 'border-destructive' : ''
+                  }`}
+                  {...register('email')}
                 />
               </div>
+              {errors.email && (
+                <p className="text-destructive mt-1 text-xs">{errors.email.message}</p>
+              )}
             </div>
 
+            {/* Password */}
             <div>
               <label htmlFor="password" className="text-sm font-medium">
                 Password
@@ -109,34 +129,39 @@ export default function RegisterPage() {
                 <Lock className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
                 <input
                   id="password"
-                  name="password"
                   type={showPassword ? 'text' : 'password'}
                   autoComplete="new-password"
-                  required
-                  minLength={8}
                   placeholder="Min. 8 characters, uppercase, lowercase, number"
-                  className="bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-10 text-sm focus:outline-none focus:ring-2"
+                  className={`bg-background placeholder:text-muted-foreground focus:ring-ring w-full rounded-lg border py-2 pl-10 pr-10 text-sm focus:outline-none focus:ring-2 ${
+                    errors.password ? 'border-destructive' : ''
+                  }`}
+                  {...register('password')}
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
                   className="text-muted-foreground hover:text-foreground absolute right-3 top-1/2 -translate-y-1/2"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
                 >
                   {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                 </button>
               </div>
+              {errors.password && (
+                <p className="text-destructive mt-1 text-xs">{errors.password.message}</p>
+              )}
               <p className="text-muted-foreground mt-1.5 text-xs">
                 Must contain at least 8 characters, one uppercase letter, one lowercase letter, and
                 one number.
               </p>
             </div>
 
+            {/* Submit */}
             <button
               type="submit"
-              disabled={loading}
+              disabled={isSubmitting}
               className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg px-4 py-2.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
             >
-              {loading ? 'Creating account...' : 'Create account'}
+              {isSubmitting ? 'Creating account...' : 'Create account'}
             </button>
           </form>