Quick Start Guide

# Using npm
npm install authsafe-react

# Using yarn
yarn add authsafe-react

# Using pnpm
pnpm add authsafe-react

// app/layout.tsx or App.tsx
import { AuthProvider } from 'authsafe-react';

export default function RootLayout({ children }) {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id-here',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production',
      }}
    >
      {children}
    </AuthProvider>
  );
}

// app/callback/page.tsx
'use client';

import { useOAuthCallback } from 'authsafe-react';

export default function CallbackPage() {
  const { isLoading, error } = useOAuthCallback();

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>Login successful! Redirecting...</div>;
}

'use client';

import { useLogin, useLogout, useAuth } from 'authsafe-react';

export default function AuthButtons() {
  const { signinRedirect, isLoading: loginLoading } = useLogin();
  const { logout, isLoading: logoutLoading } = useLogout();
  const { isAuthenticated, user } = useAuth();

  if (isAuthenticated) {
    return (
      <div>
        <p>Welcome, {user?.name || user?.email}!</p>
        <button 
          onClick={() => logout()} 
          disabled={logoutLoading}
        >
          {logoutLoading ? 'Logging out...' : 'Logout'}
        </button>
      </div>
    );
  }

  return (
    <button 
      onClick={() => signinRedirect()} 
      disabled={loginLoading}
    >
      {loginLoading ? 'Logging in...' : 'Login with AuthSafe'}
    </button>
  );
}

'use client';

import { useAuth } from 'authsafe-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function ProtectedPage() {
  const { isAuthenticated, isLoading } = useAuth();
  const router = useRouter();

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

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

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div>
      <h1>Protected Content</h1>
      <p>Only authenticated users can see this!</p>
    </div>
  );
}