Pre-built Components

Ready-to-use authentication components for quick integration.

Overview

AuthSafe provides pre-styled authentication components: SignInButton (redirects to sign in flow), SignOutButton (signs out and clears session), and UserButton (user dropdown with info and sign out). All components accept standard HTML button props and can be fully customized.

Basic Usage

import { SignInButton, SignOutButton, UserButton } from 'authsafe-nextjs';

export default function NavBar({ isAuthenticated }) {
  return (
    <nav>
      {isAuthenticated ? (
        <>
          <UserButton />
          <SignOutButton>Log Out</SignOutButton>
        </>
      ) : (
        <SignInButton>Sign In</SignInButton>
      )}
    </nav>
  );
}