useSession()

'use client';

import { useSession } from 'authsafe-nextjs/client';

interface UseSessionReturn {
  session: AuthSession | null;
  isLoading: boolean;
  error: Error | null;
}

interface AuthSession {
  userId: string;
  email: string;
  name?: string;
  emailVerified: boolean;
  organizationId: string;
  issuedAt: number;
  expiresAt: number;
}

'use client';

import { useSession } from 'authsafe-nextjs/client';

export function UserGreeting() {
  const { session } = useSession();

  if (!session) return null;

  return <div>Welcome back, {session.name}!</div>;
}

'use client';

import { useSession } from 'authsafe-nextjs/client';

export function ConditionalNav() {
  const { session, isLoading } = useSession();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <nav>
      {session ? (
        <>
          <Link href="/dashboard">Dashboard</Link>
          <Link href="/profile">Profile</Link>
          <span>{session.email}</span>
        </>
      ) : (
        <Link href="/api/auth/signin">Sign In</Link>
      )}
    </nav>
  );
}

'use client';

import { useSession } from 'authsafe-nextjs/client';

export function SessionInfo() {
  const { session } = useSession();

  if (!session) {
    return <div>Not signed in</div>;
  }

  const expiresIn = session.expiresAt - Math.floor(Date.now() / 1000);
  const minutesLeft = Math.floor(expiresIn / 60);

  return (
    <div>
      <p>User ID: {session.userId}</p>
      <p>Organization: {session.organizationId}</p>
      <p>Email Verified: {session.emailVerified ? 'Yes' : 'No'}</p>
      <p>Session expires in: {minutesLeft} minutes</p>
    </div>
  );
}

'use client';

import { useSession } from 'authsafe-nextjs/client';

export function UserAvatar() {
  const { session } = useSession();

  if (!session) return null;

  const initials = session.name
    ? session.name
        .split(' ')
        .map((n) => n[0])
        .join('')
        .toUpperCase()
    : session.email[0].toUpperCase();

  return (
    <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
      {initials}
    </div>
  );
}

'use client';

import { useSession } from 'authsafe-nextjs/client';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export function ProtectedContent() {
  const { session, isLoading } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !session) {
      router.push('/api/auth/signin');
    }
  }, [session, isLoading, router]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!session) {
    return null; // Redirecting...
  }

  return (
    <div>
      <h1>Protected Content</h1>
      <p>Only visible to {session.email}</p>
    </div>
  );
}

'use client';

import { useSession } from 'authsafe-nextjs/client';

export function EmailVerificationBanner() {
  const { session } = useSession();

  if (!session || session.emailVerified) {
    return null;
  }

  return (
    <div className="bg-yellow-100 border border-yellow-400 text-yellow-800 px-4 py-3 rounded">
      <p>
        <strong>Email not verified.</strong> Please check your inbox for a
        verification email.
      </p>
    </div>
  );
}

'use client';

import { useSession } from 'authsafe-nextjs/client';

export function UserCard() {
  const { session, isLoading, error } = useSession();

  if (isLoading) {
    return (
      <div className="animate-pulse">
        <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-red-600 p-4 border border-red-200 rounded">
        Failed to load session: {error.message}
      </div>
    );
  }

  if (!session) {
    return <div className="text-gray-500 p-4">No active session</div>;
  }

  return (
    <div className="bg-white shadow rounded-lg p-6">
      <div className="flex items-center space-x-4">
        <div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-2xl font-bold">
          {session.name?.[0]?.toUpperCase() || session.email[0].toUpperCase()}
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-gray-900">
            {session.name || 'User'}
          </h3>
          <p className="text-sm text-gray-600">{session.email}</p>
          {session.emailVerified ? (
            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
              ✓ Verified
            </span>
          ) : (
            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
              ⚠ Unverified
            </span>
          )}
        </div>
      </div>
      <div className="mt-4 pt-4 border-t border-gray-200 text-xs text-gray-500">
        <p>User ID: {session.userId}</p>
        <p>Organization: {session.organizationId}</p>
      </div>
    </div>
  );
}