Authentication Example

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>
  );
};