useAuthCallback()

import { useAuthCallback } from 'authsafe-react';

function CallbackPage() {
  const { isLoading, error } = useAuthCallback();

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

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

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

import { useAuthCallback } from 'authsafe-react';
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

function CallbackPage() {
  const { isLoading, error, isSuccess } = useAuthCallback();
  const navigate = useNavigate();

  useEffect(() => {
    if (isSuccess) {
      // Redirect to dashboard after successful authentication
      navigate('/dashboard');
    }
  }, [isSuccess, navigate]);

  if (isLoading) {
    return (
      <div>
        <h2>Completing login...</h2>
        <p>Please wait while we verify your credentials.</p>
      </div>
    );
  }

  if (error) {
    return (
      <div>
        <h2>Authentication Failed</h2>
        <p>Error: {error.message}</p>
        <button onClick={() => navigate('/login')}>
          Try Again
        </button>
      </div>
    );
  }

  return <div>Success! Redirecting to dashboard...</div>;
}

// React Router setup
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import CallbackPage from './pages/CallbackPage';
import Dashboard from './pages/Dashboard';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/callback" element={<CallbackPage />} />
        <Route path="/dashboard" element={<Dashboard />} />
        {/* other routes */}
      </Routes>
    </BrowserRouter>
  );
}

interface useAuthCallbackReturn {
  isLoading: boolean;
  error: Error | null;
  isSuccess: boolean;
}