UseBetterAuthDemo

1'use client';
2 
3import { useState } from 'react';
4 
5import { toast } from 'sonner';
6 
7import { Badge } from '@/components/ui/badge';
8import { Button } from '@/components/ui/button';
9import {
10  Card,
11  CardContent,
12  CardDescription,
13  CardHeader,
14  CardTitle,
15} from '@/components/ui/card';
16import { Input } from '@/components/ui/input';
17import { Label } from '@/components/ui/label';
18import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
19 
20import { useBetterAuth } from '@/hooks/guarahooks/use-better-auth';
21 
22interface DemoUser {
23  id: string;
24  name: string;
25  email: string;
26  avatar?: string;
27}
28 
29interface DemoCredentials extends Record<string, string | number | boolean> {
30  email: string;
31  password: string;
32}
33 
34// Mock API responses for demo purposes
35const mockLogin = async (credentials: DemoCredentials) => {
36  await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate network delay
37 
38  if (
39    credentials.email === 'user@example.com' &&
40    credentials.password === 'password'
41  ) {
42    return {
43      token: 'mock-jwt-token-' + Date.now(),
44      user: {
45        id: '1',
46        name: 'John Doe',
47        email: credentials.email,
48        avatar: 'https://github.com/shadcn.png',
49      },
50    };
51  }
52 
53  throw new Error('Invalid credentials');
54};
55 
56const mockRefresh = async () => {
57  await new Promise((resolve) => setTimeout(resolve, 500));
58  return {
59    token: 'refreshed-jwt-token-' + Date.now(),
60    user: {
61      id: '1',
62      name: 'John Doe',
63      email: 'user@example.com',
64      avatar: 'https://github.com/shadcn.png',
65    },
66  };
67};
68 
69export default function UseBetterAuthDemo() {
70  const [credentials, setCredentials] = useState<DemoCredentials>({
71    email: 'user@example.com',
72    password: 'password',
73  });
74  const [storageType, setStorageType] = useState<
75    'localStorage' | 'sessionStorage'
76  >('localStorage');
77  const [autoRefresh, setAutoRefresh] = useState(false);
78  const [lastAuthChange, setLastAuthChange] = useState<string>('');
79 
80  // Main auth hook with localStorage
81  const mainAuth = useBetterAuth<DemoUser, DemoCredentials>({
82    storageKey: 'demo-auth-main',
83    storage: typeof window !== 'undefined' ? window[storageType] : undefined,
84    fetcher: async (creds) => mockLogin(creds),
85    refreshInterval: autoRefresh ? 10000 : undefined, // 10 seconds for demo
86    onAuthChange: (token, user) => {
87      const timestamp = new Date().toLocaleTimeString();
88      setLastAuthChange(
89// … truncated