Pre-built Components

'use client';

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

interface SignInButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  redirectTo?: string; // Redirect URL after sign in
  children?: ReactNode; // Custom label (default: "Sign In")
}

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

export function Header() {
  return <SignInButton>Sign In</SignInButton>;
}

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

export function LandingPage() {
  return <SignInButton redirectTo="/dashboard">Get Started</SignInButton>;
}

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

export function CTAButton() {
  return (
    <SignInButton
      redirectTo="/onboarding"
      className="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition"
    >
      Start Free Trial
    </SignInButton>
  );
}

import { SignInButton } from 'authsafe-nextjs/client';
import { useAuth } from 'authsafe-nextjs/client';

export function LoginButton() {
  const { isLoading } = useAuth();

  return (
    <SignInButton disabled={isLoading}>
      {isLoading ? 'Redirecting...' : 'Sign In'}
    </SignInButton>
  );
}

'use client';

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

interface SignOutButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  redirectTo?: string; // Redirect URL after sign out
  children?: ReactNode; // Custom label (default: "Sign Out")
}

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

export function UserMenu() {
  return <SignOutButton>Logout</SignOutButton>;
}

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

export function NavBar() {
  return <SignOutButton redirectTo="/">Sign Out</SignOutButton>;
}

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

export function ProfilePage() {
  return (
    <SignOutButton
      redirectTo="/goodbye"
      className="text-red-600 hover:text-red-800 underline"
    >
      Logout
    </SignOutButton>
  );
}

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

export function LogoutButton() {
  const handleClick = (e: React.MouseEvent) => {
    if (!confirm('Are you sure you want to sign out?')) {
      e.preventDefault();
    }
  };

  return <SignOutButton onClick={handleClick}>Sign Out</SignOutButton>;
}

'use client';

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

interface UserButtonProps {
  showEmail?: boolean; // Show email (default: true)
  showSignOut?: boolean; // Show sign out button (default: true)
  children?: (user: { email: string; name?: string }) => ReactNode; // Custom renderer
}

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

export function Header() {
  return <UserButton showEmail showSignOut />;
}

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

export function CustomUserButton() {
  return (
    <UserButton>
      {(user) => (
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
            {user.name?.[0] || user.email[0]}
          </div>
          <span>{user.email}</span>
        </div>
      )}
    </UserButton>
  );
}

'use client';

import { useAuth } from 'authsafe-nextjs/client';
import { useState } from 'react';

export function UserDropdown() {
  const { user, signOut } = useAuth();
  const [isOpen, setIsOpen] = useState(false);

  if (!user) return null;

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100"
      >
        <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold">
          {user.name?.[0] || user.email[0]}
        </div>
        <span className="text-sm font-medium">{user.email}</span>
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border py-1">
          <a
            href="/profile"
            className="block px-4 py-2 text-sm hover:bg-gray-100"
          >
            Profile
          </a>
          <a
            href="/settings"
            className="block px-4 py-2 text-sm hover:bg-gray-100"
          >
            Settings
          </a>
          <hr className="my-1" />
          <button
            onClick={() => signOut()}
            className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
          >
            Sign Out
          </button>
        </div>
      )}
    </div>
  );
}

'use client';

import { useAuth, SignInButton, SignOutButton } from 'authsafe-nextjs/client';
import Link from 'next/link';
import { useState } from 'react';

export function NavigationBar() {
  const { isAuthenticated, user, isLoading } = useAuth();
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  return (
    <nav className="bg-white shadow-sm border-b">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          {/* Logo */}
          <div className="flex items-center">
            <Link href="/" className="text-2xl font-bold text-blue-600">
              MyApp
            </Link>
          </div>

          {/* Navigation Links */}
          <div className="flex items-center gap-6">
            <Link href="/about" className="text-gray-700 hover:text-gray-900">
              About
            </Link>
            <Link href="/pricing" className="text-gray-700 hover:text-gray-900">
              Pricing
            </Link>

            {/* Auth Section */}
            {isLoading ? (
              <div className="w-20 h-10 bg-gray-200 animate-pulse rounded"></div>
            ) : isAuthenticated && user ? (
              <div className="relative">
                <button
                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                  className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100"
                >
                  <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold">
                    {user.name?.[0]?.toUpperCase() ||
                      user.email[0].toUpperCase()}
                  </div>
                  <span className="text-sm font-medium">
                    {user.name || user.email}
                  </span>
                  <svg
                    className="w-4 h-4"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clipRule="evenodd"
                    />
                  </svg>
                </button>

                {isDropdownOpen && (
                  <>
                    <div
                      className="fixed inset-0 z-10"
                      onClick={() => setIsDropdownOpen(false)}
                    ></div>
                    <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border py-1 z-20">
                      <div className="px-4 py-3 border-b">
                        <p className="text-sm font-medium text-gray-900">
                          {user.name}
                        </p>
                        <p className="text-xs text-gray-500">{user.email}</p>
                      </div>
                      <Link
                        href="/dashboard"
                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        onClick={() => setIsDropdownOpen(false)}
                      >
                        Dashboard
                      </Link>
                      <Link
                        href="/profile"
                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        onClick={() => setIsDropdownOpen(false)}
                      >
                        Profile
                      </Link>
                      <Link
                        href="/settings"
                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                        onClick={() => setIsDropdownOpen(false)}
                      >
                        Settings
                      </Link>
                      <hr className="my-1" />
                      <div className="px-2 py-1">
                        <SignOutButton
                          redirectTo="/"
                          className="w-full text-left px-2 py-2 text-sm text-red-600 hover:bg-red-50 rounded"
                        >
                          Sign Out
                        </SignOutButton>
                      </div>
                    </div>
                  </>
                )}
              </div>
            ) : (
              <SignInButton
                redirectTo="/dashboard"
                className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition"
              >
                Sign In
              </SignInButton>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
}

<SignInButton
  className="your-custom-classes"
  style={
    {
      /* your custom styles */
    }
  }
  onClick={handleClick}
  disabled={someCondition}
>
  Custom Label
</SignInButton>