REACT_APP_SIGMA_CLIENT_ID=your-app-name
REACT_APP_SIGMA_ISSUER=https://auth.sigmaidentity.com
REACT_APP_REDIRECT_URI=http://localhost:3000/callback

import { useState, useEffect } from 'react';

interface User {
  id: string;
  address: string;
  name?: string;
  email?: string;
}

export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = localStorage.getItem('access_token');
    if (token) {
      fetchUser(token);
    } else {
      setLoading(false);
    }
  }, []);

  const fetchUser = async (token: string) => {
    try {
      const response = await fetch('https://auth.sigmaidentity.com/userinfo', {
        headers: { Authorization: `Bearer ${token}` }
      });
      const userData = await response.json();
      setUser({
        id: userData.sub,
        address: userData.address,
        name: userData.name,
        email: userData.email
      });
    } catch (error) {
      localStorage.removeItem('access_token');
    } finally {
      setLoading(false);
    }
  };

  const signIn = () => {
    const authUrl = 'https://auth.sigmaidentity.com/authorize?' + 
      new URLSearchParams({
        client_id: process.env.REACT_APP_SIGMA_CLIENT_ID!,
        redirect_uri: process.env.REACT_APP_REDIRECT_URI!,
        response_type: 'code',
        provider: 'sigma'
      });
    window.location.href = authUrl;
  };

  const signOut = () => {
    localStorage.removeItem('access_token');
    setUser(null);
  };

  return { user, loading, signIn, signOut, isAuthenticated: !!user };
}

import { useAuth } from '../hooks/useAuth';

export function LoginButton() {
  const { signIn, signOut, user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;

  if (user) {
    return (
      <div>
        <span>Welcome, {user.address.slice(0, 8)}...</span>
        <button onClick={signOut}>Sign Out</button>
      </div>
    );
  }

  return (
    <button onClick={signIn}>
      Sign In with Bitcoin
    </button>
  );
}

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

export function CallbackPage() {
  const navigate = useNavigate();

  useEffect(() => {
    const handleCallback = async () => {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');

      if (!code) {
        navigate('/');
        return;
      }

      try {
        // Exchange code for token
        const response = await fetch('https://auth.sigmaidentity.com/token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: new URLSearchParams({
            grant_type: 'authorization_code',
            code,
            client_id: process.env.REACT_APP_SIGMA_CLIENT_ID!,
            redirect_uri: process.env.REACT_APP_REDIRECT_URI!
          })
        });

        const { access_token } = await response.json();
        localStorage.setItem('access_token', access_token);
        navigate('/dashboard');
      } catch (error) {
        console.error('Auth failed:', error);
        navigate('/');
      }
    };

    handleCallback();
  }, [navigate]);

  return <div>Completing sign in...</div>;
}

import { useAuth } from '../hooks/useAuth';

interface ProtectedRouteProps {
  children: React.ReactNode;
}

export function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Please sign in to access this page.</div>;

  return <>{children}</>;
}

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { LoginButton } from './components/LoginButton';
import { CallbackPage } from './pages/CallbackPage';
import { ProtectedRoute } from './components/ProtectedRoute';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginButton />} />
        <Route path="/callback" element={<CallbackPage />} />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <div>Protected Dashboard</div>
            </ProtectedRoute>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { useQuery } from '@tanstack/react-query';

export function useAuthQuery() {
  return useQuery({
    queryKey: ['auth'],
    queryFn: async () => {
      const token = localStorage.getItem('access_token');
      if (!token) return null;

      const response = await fetch('https://auth.sigmaidentity.com/userinfo', {
        headers: { Authorization: `Bearer ${token}` }
      });
      return response.json();
    },
    staleTime: 5 * 60 * 1000, // 5 minutes
  });
}

// For Next.js apps, you can use NextAuth.js with Sigma Auth as a custom provider
export const authConfig = {
  providers: [
    {
      id: 'sigma',
      name: 'Sigma Auth',
      type: 'oauth',
      authorization: 'https://auth.sigmaidentity.com/authorize?provider=sigma',
      token: 'https://auth.sigmaidentity.com/token',
      userinfo: 'https://auth.sigmaidentity.com/userinfo',
      clientId: process.env.SIGMA_CLIENT_ID,
      profile: (profile: any) => ({
        id: profile.sub,
        name: profile.name || profile.address,
        email: profile.email,
      })
    }
  ]
};