Error Handling

Common Errors

Popup Blocked

try {
  await auth.signIn();
} catch (error) {
  if (error.code === 'popup_blocked') {
    // Handle popup blocked
  }
}

Network Errors

try {
  await auth.signIn();
} catch (error) {
  if (error.code === 'network_error') {
    // Handle network issues
  }
}

Authentication Cancelled

try {
  await auth.signIn();
} catch (error) {
  if (error.code === 'auth_cancelled') {
    // Handle user cancellation
  }
}

Error Boundaries

class AuthErrorBoundary extends React.Component {
  state = { hasError: false, error: null };
 
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
 
  render() {
    if (this.state.hasError) {
      return <ErrorDisplay error={this.state.error} />;
    }
 
    return this.props.children;
  }
}

Best Practices

Always implement error handling
Use appropriate error boundaries
Provide user feedback
Log errors appropriately
Implement retry mechanisms

Example Implementation

function LoginComponent() {
  const [error, setError] = useState<Error | null>(null);
  const [retries, setRetries] = useState(0);
  const { signIn } = useReclaimAuth();
 
  const handleLogin = async () => {
    try {
      setError(null);
      await signIn();
    } catch (err) {
      setError(err);
      
      // Handle specific errors
      if (err.code === 'popup_blocked') {
        alert('Please enable popups for this site');
      } else if (err.code === 'network_error' && retries < 3) {
        setRetries(r => r + 1);
        // Implement exponential backoff
        setTimeout(handleLogin, Math.pow(2, retries) * 1000);
      } else if (err.code === 'auth_cancelled') {
        // User cancelled, no need for error display
        setError(null);
      }
    }
  };
 
  if (error) {
    return (
      <div className="error-container">
        <p>Error: {error.message}</p>
        <button onClick={handleLogin}>Try Again</button>
      </div>
    );
  }
 
  return <button onClick={handleLogin}>Sign In</button>;
}

Authentication Hooks API Reference