UseNextAuthDemo

1'use client';
2 
3import { useState } from 'react';
4 
5import { SessionProvider } from 'next-auth/react';
6 
7import { toast } from 'sonner';
8 
9import { Badge } from '@/components/ui/badge';
10import { Button } from '@/components/ui/button';
11import {
12  Card,
13  CardContent,
14  CardDescription,
15  CardHeader,
16  CardTitle,
17} from '@/components/ui/card';
18 
19import { useNextAuth } from '@/hooks/guarahooks/use-next-auth';
20 
21export default function UseNextAuthDemo() {
22  const [refreshInterval, setRefreshInterval] = useState<number | undefined>();
23  const [lastSessionChange, setLastSessionChange] = useState<string>('');
24 
25  // Check if we're in a NextAuth SessionProvider context
26  let hookData;
27  let hasError = false;
28 
29  try {
30    hookData = useNextAuth({
31      onSessionChange: (session, status) => {
32        const timestamp = new Date().toLocaleTimeString();
33        setLastSessionChange(`${status} at ${timestamp}`);
34        toast.info(`Session changed: ${status}`, {
35          description: `Time: ${timestamp}`,
36        });
37      },
38      refreshInterval,
39      onError: (error) => {
40        toast.error('Authentication Error', {
41          description: error.message,
42        });
43      },
44    });
45  } catch (error) {
46    hasError = true;
47    hookData = {
48      session: null,
49      status: 'unauthenticated' as const,
50      isAuthenticated: false,
51      signIn: () => Promise.resolve(undefined),
52      signOut: () => Promise.resolve(undefined),
53      refresh: () => Promise.resolve(),
54    };
55  }
56 
57  const { session, status, isAuthenticated, signIn, signOut, refresh } =
58    hookData;
59 
60  // Show NextAuth setup error if not properly configured
61  if (hasError) {
62    return (
63      <div className="w-full max-w-2xl mx-auto space-y-6">
64        <Card>
65          <CardHeader>
66            <CardTitle>NextAuth.js Setup Required</CardTitle>
67            <CardDescription>
68              This demo requires NextAuth.js to be properly configured
69            </CardDescription>
70          </CardHeader>
71          <CardContent className="space-y-4">
72            <div className="p-4 border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950 rounded-md">
73              <p className="text-sm text-amber-800 dark:text-amber-200">
74                <strong>Missing SessionProvider:</strong> The useNextAuth hook
75                requires your app to be wrapped in NextAuth's SessionProvider.
76              </p>
77            </div>
78 
79            <div className="space-y-2">
80// … truncated