@authjoy/react

React components and hooks for AuthJoy - making authentication easy and delightful.

Installation

npm install @authjoy/react @authjoy/core
# or
pnpm add @authjoy/react @authjoy/core
# or
yarn add @authjoy/react @authjoy/core

Quick Start

import { AuthJoyProvider, SignIn } from '@authjoy/react';

// 1. Wrap your app with AuthJoyProvider
function App() {
  return (
    <AuthJoyProvider
      config={{
        tenantId: 'your-tenant-uuid',        // From AuthJoy dashboard
        apiKey: 'aj_live_xxx',               // API key from dashboard
        apiUrl: 'http://localhost:3001',     // or https://api.authjoy.io
      }}
    >
      <YourApp />
    </AuthJoyProvider>
  );
}

// 2. Use prebuilt components or hooks
function YourApp() {
  const { user } = useAuth();

  if (!user) {
    return <SignIn variant="default" />;
  }

  return (
    <div>
      <h1>Welcome, {user.displayName}!</h1>
      <UserButton />
    </div>
  );
}

Features

• Drop-in Components: Pre-built SignIn, SignUp, UserButton, and more
• Powerful Hooks: useAuth, useUser, useMFA
• Styled or Unstyled: Choose between default Tailwind styles or bring your own
• Full TypeScript Support: Complete type safety
• SSR Compatible: Works with Next.js and other React frameworks
• Dark Mode Ready: Built-in dark mode support

Prebuilt Components

SignIn

Full-featured sign-in component with email/password, social providers, and magic links.

import { SignIn } from '@authjoy/react';

<SignIn
  variant="default"
  socialProviders={['google', 'github']}
  enableMagicLink
  onSuccess={(user) => console.log('Signed in:', user)}
/>

Props:

• variant: 'default' | 'unstyled' | 'minimal'
• socialProviders: Array of social providers to enable
• enableMagicLink: Show magic link option
• enableRememberMe: Show "Remember me" checkbox
• onSuccess: Callback after successful sign-in
• onError: Callback on error
• redirectUrl: URL to redirect to after sign-in

SignUp

Complete sign-up form with password strength meter and validation.

import { SignUp } from '@authjoy/react';

<SignUp
  variant="default"
  passwordStrengthMeter
  requireTermsAcceptance
  onSuccess={(user) => console.log('Signed up:', user)}
/>

Props:

• variant: 'default' | 'unstyled' | 'minimal'
• socialProviders: Array of social providers
• requireDisplayName: Require full name field
• requireTermsAcceptance: Show terms checkbox
• passwordStrengthMeter: Show password strength indicator
• minPasswordLength: Minimum password length (default: 8)
• onSuccess: Callback after successful sign-up

UserButton

User avatar dropdown with account menu.

import { UserButton } from '@authjoy/react';

<UserButton
  showEmail
  onSignOut={() => console.log('Signed out')}
/>

Props:

• showEmail: Display user email in dropdown
• menuItems: Custom menu items
• onSignOut: Sign-out callback

ProtectedRoute

Route guard component for authentication.

import { ProtectedRoute } from '@authjoy/react';

<ProtectedRoute requireEmailVerified>
  <Dashboard />
</ProtectedRoute>

Hooks

useAuth

Access authentication state and methods.

import { useAuth } from '@authjoy/react';

function MyComponent() {
  const {
    user,           // Current user object or null
    loading,        // Loading state
    signIn,         // (email, password) => Promise<void>
    signUp,         // (email, password, options) => Promise<void>
    signOut,        // () => Promise<void>
    sendMagicLink,  // (email, options) => Promise<void>
  } = useAuth();

  // Use authentication state
}

useUser

Get current user (shorthand for useAuth().user).

import { useUser } from '@authjoy/react';

function Profile() {
  const { user, loading } = useUser();

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Not signed in</div>;

  return <div>Welcome, {user.displayName}!</div>;
}

useMFA

Multi-factor authentication methods.

import { useMFA } from '@authjoy/react';

function MFASetup() {
  const { enrollTOTP, verifyTOTP, getEnrolledFactors } = useMFA();

  // Implement MFA flows
}

Styling

Default Variant (Tailwind)

Components come pre-styled with Tailwind CSS:

<SignIn variant="default" />

Unstyled Variant

Bring your own styles:

<SignIn variant="unstyled" className="my-custom-form" />

Dark Mode

Components automatically adapt to dark mode when using the default variant.

Examples

Complete Auth Flow

import { AuthJoyProvider, SignIn, SignUp, UserButton } from '@authjoy/react';
import { useState } from 'react';

function App() {
  return (
    <AuthJoyProvider
      config={{
        tenantId: 'your-tenant-uuid',
        apiKey: 'aj_live_xxx',
        apiUrl: 'http://localhost:3001',
      }}
    >
      <AuthDemo />
    </AuthJoyProvider>
  );
}

function AuthDemo() {
  const { user } = useAuth();
  const [showSignUp, setShowSignUp] = useState(false);

  if (!user) {
    return showSignUp ? (
      <SignUp
        variant="default"
        onSuccess={() => console.log('Account created!')}
        showSignInLink
        signInUrl="#"
        onSignInClick={() => setShowSignUp(false)}
      />
    ) : (
      <SignIn
        variant="default"
        socialProviders={['google', 'github']}
        onSuccess={() => console.log('Signed in!')}
        showSignUpLink
        signUpUrl="#"
        onSignUpClick={() => setShowSignUp(true)}
      />
    );
  }

  return (
    <div>
      <nav>
        <UserButton showEmail />
      </nav>
      <h1>Welcome back!</h1>
    </div>
  );
}

Documentation

For complete documentation, see the main README and QUICKSTART guide.

License

MIT