> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Authentication Example

> Example code for building a component that offers manual Sign In and Register options

This example demonstrates how to build a component that offers manual **Sign In** and **Register** options. This is useful if you disable `autoRegister` and `loginOnMount` to give the user explicit control.

## Code example

```tsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}

import React from 'react';
import { useAuth } from '@suki-sdk/platform-react';

export const AuthManager = ({ partnerId, partnerToken, providerId }) => {
  // 1. Initialize the hook with your partner credentials.
  // We disable auto-actions to demonstrate manual control.
  const {
    login,
    registerUser,
    isLoggedIn,
    isPending,
    error
  } = useAuth({
    partnerId, //Required
    partnerToken, //Required
    providerId, //Optional
    autoRegister: false, // set to true to skip manual registration steps
    loginOnMount: false, // set to true to sign in automatically on load
  });

  // 2. Handle the Sign In action
  const handleSignIn = async () => {
    try {
      // login() uses the partnerToken passed in the config above
      await login();
      console.log('User signed in successfully.');
    } catch (err) {
      // Errors are also available in the 'error' object from the hook
      console.error('Sign-in failed:', err);
    }
  };

  // 3. Handle the Registration action
  const handleRegister = async () => {
    // Construct the registration request object required by the SDK
    const userDetails = {
      externalId: providerId,
      firstName: 'Jane', // In a real app, gather this from a form
      lastName: 'Doe',
    };

    try {
      await registerUser(userDetails);
      console.log('User registered successfully.');
      
      // Often, you will want to sign the user in immediately after registration
      await login(); 
    } catch (err) {
      console.error('Registration failed:', err);
    }
  };

  // 4. Render the UI based on authentication state
  if (isLoggedIn) {
    return (
      <div className="success-message">
        <h3>Welcome</h3>
        <p>You are connected to the Suki Platform.</p>
      </div>
    );
  }

  return (
    <div className="auth-container">
      <h2>Suki Authentication</h2>
      
      {/* Display errors if they occur */}
      {error && (
        <div className="error-banner">
          <strong>Error:</strong> {error.message}
        </div>
      )}

      <div className="button-group">
        {/* Button to Sign In */}
        <button 
          onClick={handleSignIn} 
          disabled={isPending}
        >
          {isPending ? 'Processing...' : 'Sign In'}
        </button>

        {/* Button to Register */}
        <button 
          onClick={handleRegister} 
          disabled={isPending}
        >
          Register User
        </button>
      </div>
    </div>
  );
};
```

### Key implementation details

<AccordionGroup>
  <Accordion title="Configuration">
    **Configuration**: You pass the `partnerId` and `partnerToken` directly to the `useAuth` hook. The `login` function reads these values internally.
  </Accordion>

  <Accordion title="Error handling">
    **Error handling**: The hook provides an error object (typically a [Platform error](/headless-web-sdk/guides/error-handling)) that updates automatically if an operation fails. You should display this to the user.
  </Accordion>

  <Accordion title="Registration">
    **Registration**: The `registerUser` function accepts an object containing user details. The exact fields required depend on your specific partner configuration.
  </Accordion>
</AccordionGroup>

<Note>
  If you set `autoRegister: true` in the hook configuration, you generally do not need a separate Register User button. The SDK will handle account creation during the sign-in attempt if the user does not exist.
</Note>