Authentication Button
page.tsx
import AuthenticationButton from '@/components/AuthenticationButton';

​
Properties

status
'authenticated' | 'loading' | 'unauthenticated'
required

The current authentication status of the user

type
'login' | 'signup'
required

The type of authentication action this button should perform

className
string

Custom CSS classes to apply to the button

text
string

Custom text to display on the button

animation
'shimmer' | 'pulsating'

Optional animation effect for the button

​
Usage

example.tsx
import { useSession } from "next-auth/react";

export default function Example() {
  const { status } = useSession();

  return (
    <AuthenticationButton
      status={status}
      type="login"
      text="Sign In"
      animation="shimmer"
    />
  );
}

This AuthenticationButton component can be used in various parts of your application where user authentication is required. It automatically adapts its appearance and functionality based on the current authentication status, providing a seamless user experience.

If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.

Was this page helpful?

AnimatedBig Icon