{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-next-auth-demo",
  "title": "UseNextAuthDemo",
  "description": "use-next-auth's hook in action.",
  "registryDependencies": [
    "card",
    "button",
    "badge",
    "sonner",
    "https://guarahooks.com/r/use-next-auth.json"
  ],
  "files": [
    {
      "path": "registry/example/use-next-auth-demo.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { SessionProvider } from 'next-auth/react';\n\nimport { toast } from 'sonner';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\n\nimport { useNextAuth } from '@/hooks/guarahooks/use-next-auth';\n\nexport default function UseNextAuthDemo() {\n  const [refreshInterval, setRefreshInterval] = useState<number | undefined>();\n  const [lastSessionChange, setLastSessionChange] = useState<string>('');\n\n  // Check if we're in a NextAuth SessionProvider context\n  let hookData;\n  let hasError = false;\n\n  try {\n    hookData = useNextAuth({\n      onSessionChange: (session, status) => {\n        const timestamp = new Date().toLocaleTimeString();\n        setLastSessionChange(`${status} at ${timestamp}`);\n        toast.info(`Session changed: ${status}`, {\n          description: `Time: ${timestamp}`,\n        });\n      },\n      refreshInterval,\n      onError: (error) => {\n        toast.error('Authentication Error', {\n          description: error.message,\n        });\n      },\n    });\n  } catch (error) {\n    hasError = true;\n    hookData = {\n      session: null,\n      status: 'unauthenticated' as const,\n      isAuthenticated: false,\n      signIn: () => Promise.resolve(undefined),\n      signOut: () => Promise.resolve(undefined),\n      refresh: () => Promise.resolve(),\n    };\n  }\n\n  const { session, status, isAuthenticated, signIn, signOut, refresh } =\n    hookData;\n\n  // Show NextAuth setup error if not properly configured\n  if (hasError) {\n    return (\n      <div className=\"w-full max-w-2xl mx-auto space-y-6\">\n        <Card>\n          <CardHeader>\n            <CardTitle>NextAuth.js Setup Required</CardTitle>\n            <CardDescription>\n              This demo requires NextAuth.js to be properly configured\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"p-4 border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950 rounded-md\">\n              <p className=\"text-sm text-amber-800 dark:text-amber-200\">\n                <strong>Missing SessionProvider:</strong> The useNextAuth hook\n                requires your app to be wrapped in NextAuth's SessionProvider.\n              </p>\n            </div>\n\n            <div className=\"space-y-2\">\n              <h4 className=\"text-sm font-medium\">Setup Steps:</h4>\n              <ol className=\"text-sm text-muted-foreground space-y-1 list-decimal list-inside\">\n                <li>\n                  Install NextAuth.js:{' '}\n                  <code className=\"text-xs bg-muted px-1 rounded\">\n                    npm install next-auth\n                  </code>\n                </li>\n                <li>\n                  Configure NextAuth.js with your authentication providers\n                </li>\n                <li>\n                  Wrap your app with{' '}\n                  <code className=\"text-xs bg-muted px-1 rounded\">\n                    &lt;SessionProvider&gt;\n                  </code>\n                </li>\n                <li>\n                  The hook will work once NextAuth.js is properly configured\n                </li>\n              </ol>\n            </div>\n\n            <div className=\"pt-4 border-t\">\n              <p className=\"text-xs text-muted-foreground\">\n                See the{' '}\n                <a\n                  href=\"https://next-auth.js.org/getting-started\"\n                  className=\"underline\"\n                >\n                  NextAuth.js documentation\n                </a>{' '}\n                for complete setup instructions.\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    );\n  }\n\n  const handleSignIn = async () => {\n    try {\n      toast.loading('Signing in...', { id: 'auth-loading' });\n      await signIn();\n      toast.success('Signed in successfully!', { id: 'auth-loading' });\n    } catch (error) {\n      toast.error('Failed to sign in', { id: 'auth-loading' });\n    }\n  };\n\n  const handleSignOut = async () => {\n    try {\n      toast.loading('Signing out...', { id: 'auth-loading' });\n      await signOut();\n      toast.success('Signed out successfully!', { id: 'auth-loading' });\n    } catch (error) {\n      toast.error('Failed to sign out', { id: 'auth-loading' });\n    }\n  };\n\n  const handleRefresh = async () => {\n    try {\n      toast.loading('Refreshing session...', { id: 'refresh-loading' });\n      await refresh();\n      toast.success('Session refreshed!', { id: 'refresh-loading' });\n    } catch (error) {\n      toast.error('Failed to refresh session', { id: 'refresh-loading' });\n    }\n  };\n\n  const toggleAutoRefresh = () => {\n    if (refreshInterval) {\n      setRefreshInterval(undefined);\n      toast.info('Auto-refresh disabled');\n    } else {\n      setRefreshInterval(30000); // 30 seconds for demo purposes\n      toast.info('Auto-refresh enabled (30s interval)');\n    }\n  };\n\n  const getStatusBadgeVariant = (status: string) => {\n    switch (status) {\n      case 'authenticated':\n        return 'default' as const;\n      case 'unauthenticated':\n        return 'secondary' as const;\n      case 'loading':\n        return 'outline' as const;\n      default:\n        return 'outline' as const;\n    }\n  };\n\n  return (\n    <SessionProvider>\n      <div className=\"w-full max-w-2xl mx-auto space-y-6\">\n        {/* Status Card */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center justify-between\">\n              Authentication Status\n              <Badge variant={getStatusBadgeVariant(status)}>{status}</Badge>\n            </CardTitle>\n            <CardDescription>\n              Current authentication state and session information\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-sm font-medium\">Authenticated:</span>\n              <Badge variant={isAuthenticated ? 'default' : 'secondary'}>\n                {isAuthenticated ? 'Yes' : 'No'}\n              </Badge>\n            </div>\n\n            {lastSessionChange && (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm font-medium\">Last Change:</span>\n                <span className=\"text-sm text-muted-foreground\">\n                  {lastSessionChange}\n                </span>\n              </div>\n            )}\n\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-sm font-medium\">Auto-refresh:</span>\n              <Badge variant={refreshInterval ? 'default' : 'secondary'}>\n                {refreshInterval ? `${refreshInterval / 1000}s` : 'Disabled'}\n              </Badge>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Session Details Card */}\n        {isAuthenticated && session?.user && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Session Details</CardTitle>\n              <CardDescription>\n                Information about the current authenticated user\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"flex items-center space-x-4\">\n                <div className=\"h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center\">\n                  {session.user.image ? (\n                    <img\n                      src={session.user.image}\n                      alt={session.user.name || 'User'}\n                      className=\"h-12 w-12 rounded-full object-cover\"\n                    />\n                  ) : (\n                    <span className=\"text-sm font-semibold text-primary\">\n                      {session.user.name?.charAt(0).toUpperCase() ||\n                        session.user.email?.charAt(0).toUpperCase() ||\n                        'U'}\n                    </span>\n                  )}\n                </div>\n                <div className=\"space-y-1\">\n                  {session.user.name && (\n                    <p className=\"text-sm font-medium\">{session.user.name}</p>\n                  )}\n                  {session.user.email && (\n                    <p className=\"text-sm text-muted-foreground\">\n                      {session.user.email}\n                    </p>\n                  )}\n                </div>\n              </div>\n\n              {session.expires && (\n                <div className=\"pt-2 border-t\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-sm font-medium\">\n                      Session Expires:\n                    </span>\n                    <span className=\"text-sm text-muted-foreground\">\n                      {new Date(session.expires).toLocaleString()}\n                    </span>\n                  </div>\n                </div>\n              )}\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Actions Card */}\n        <Card>\n          <CardHeader>\n            <CardTitle>Actions</CardTitle>\n            <CardDescription>\n              Test authentication functionality and session management\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div className=\"flex flex-wrap gap-2\">\n              {!isAuthenticated ? (\n                <Button onClick={handleSignIn} className=\"flex-1 min-w-[120px]\">\n                  Sign In\n                </Button>\n              ) : (\n                <Button\n                  onClick={handleSignOut}\n                  variant=\"outline\"\n                  className=\"flex-1 min-w-[120px]\"\n                >\n                  Sign Out\n                </Button>\n              )}\n\n              <Button\n                onClick={handleRefresh}\n                variant=\"secondary\"\n                disabled={status === 'loading'}\n                className=\"flex-1 min-w-[120px]\"\n              >\n                Refresh Session\n              </Button>\n            </div>\n\n            <Button\n              onClick={toggleAutoRefresh}\n              variant=\"outline\"\n              className=\"w-full\"\n            >\n              {refreshInterval ? 'Disable' : 'Enable'} Auto-refresh\n            </Button>\n          </CardContent>\n        </Card>\n\n        {/* Debug Information */}\n        {process.env.NODE_ENV === 'development' && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Debug Information</CardTitle>\n              <CardDescription>\n                Raw session data (development only)\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <pre className=\"text-xs bg-muted p-3 rounded-md overflow-auto\">\n                {JSON.stringify({ session, status, isAuthenticated }, null, 2)}\n              </pre>\n            </CardContent>\n          </Card>\n        )}\n      </div>\n    </SessionProvider>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-next-auth-demo.tsx"
    }
  ],
  "type": "registry:example"
}