React

import React from 'react';
import { useRownd } from '@rownd/react';
import type { SignInOptions, UseRowndReturn } from '@rownd/react';

interface AuthButtonProps {
  onSuccess?: () => void;
  signInMethod?: SignInOptions['method'];
}

const AuthButton: React.FC<AuthButtonProps> = ({ 
  onSuccess,
  signInMethod = 'email'
}) => {
  const { 
    is_initializing,
    is_authenticated,
    requestSignIn,
    signOut 
  }: UseRowndReturn = useRownd();

  const handleSignIn = () => {
    requestSignIn({
      method: signInMethod,
      auto_sign_in: true,
      user_data: {
        source: 'auth_button'
      }
    });
  };

  return (
    <div>
      {is_initializing && is_authenticated && (
        <div>Verifying authentication...</div>
      )}

      {is_initializing && !is_authenticated && (
        <div>Loading...</div>
      )}

      {!is_initializing && is_authenticated && (
        <button onClick={signOut}>
          Sign Out
        </button>
      )}

      {!is_initializing && !is_authenticated && (
        <button onClick={handleSignIn}>
          Sign In
        </button>
      )}
    </div>
  );
};

export default AuthButton;

import React, { useEffect, useState } from 'react';
import { useRownd } from '@rownd/react';
import type { UserData, RowndUser } from '@rownd/react';

interface ProfileFormData extends UserData {
  marketing_consent?: boolean;
  preferences?: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}

const UserProfile: React.FC = () => {
  const { 
    user,
    setUser,
    setUserValue,
    is_initializing,
    is_authenticated 
  } = useRownd();

  const [formData, setFormData] = useState<ProfileFormData>({});

  useEffect(() => {
    if (user.data) {
      setFormData(user.data as ProfileFormData);
    }
  }, [user.data]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await setUser(formData);
    } catch (error) {
      console.error('Failed to update profile:', error);
    }
  };

  const handleInputChange = (
    field: keyof ProfileFormData,
    value: string | boolean
  ) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  if (is_initializing) {
    return <div>Loading profile...</div>;
  }

  if (!is_authenticated) {
    return <div>Please sign in to view your profile</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="first_name">First Name:</label>
        <input
          id="first_name"
          type="text"
          value={formData.first_name || ''}
          onChange={e => handleInputChange('first_name', e.target.value)}
        />
      </div>

      <div>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          type="email"
          value={formData.email || ''}
          onChange={e => handleInputChange('email', e.target.value)}
        />
        {user.verified_data.email === formData.email && (
          <span>✓ Verified</span>
        )}
      </div>

      <div>
        <label>
          <input
            type="checkbox"
            checked={formData.marketing_consent || false}
            onChange={e => handleInputChange('marketing_consent', e.target.checked)}
          />
          Receive marketing communications
        </label>
      </div>

      <button type="submit">Save Changes</button>
    </form>
  );
};

export default UserProfile;

import React, { useEffect, useState } from 'react';
import { useRownd } from '@rownd/react';
import type { TokenOptions } from '@rownd/react';

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface UserPreferences {
  theme: 'light' | 'dark';
  notifications: boolean;
  timezone: string;
}

const ApiExample: React.FC = () => {
  const { 
    is_initializing,
    is_authenticated,
    getAccessToken 
  } = useRownd();
  
  const [preferences, setPreferences] = useState<UserPreferences | null>(null);
  const [error, setError] = useState<string | null>(null);

  const fetchPreferences = async () => {
    try {
      const tokenOptions: TokenOptions = {
        waitForToken: true,
        timeoutMs: 5000
      };
      
      const token = await getAccessToken(tokenOptions);
      
      const response = await fetch('/api/preferences', {
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });
      
      const result: ApiResponse<UserPreferences> = await response.json();
      
      if (response.ok) {
        setPreferences(result.data);
      } else {
        throw new Error(result.message);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch preferences');
    }
  };

  useEffect(() => {
    if (!is_initializing && is_authenticated) {
      fetchPreferences();
    }
  }, [is_initializing, is_authenticated]);

  return (
    <div>
      {is_initializing && is_authenticated && (
        <div>Loading preferences...</div>
      )}

      {is_initializing && !is_authenticated && (
        <div>Checking authentication...</div>
      )}

      {!is_initializing && is_authenticated && preferences && (
        <div>
          <h2>Your Preferences</h2>
          <pre>{JSON.stringify(preferences, null, 2)}</pre>
        </div>
      )}

      {!is_initializing && !is_authenticated && (
        <div>Please sign in to view your preferences</div>
      )}

      {error && (
        <div className="error">Error: {error}</div>
      )}
    </div>
  );
};

export default ApiExample;

// Basic sign-in
const handleBasicSignIn = () => {
  requestSignIn();
};

// Pre-filled email with auto-submit
const handleAutoSignIn = () => {
  requestSignIn({
    identifier: 'user@example.com',
    auto_submit: true
  });
};

// Google sign-in with custom redirect
const handleGoogleSignIn = () => {
  requestSignIn({
    method: 'google',
    post_login_redirect: '/dashboard'  // Overrides global setting
  });
};

// Sign in with additional user data
const handleSignInWithData = () => {
  requestSignIn({
    user_data: {
      source: 'marketing_campaign',
      referral_code: 'REF123'
    }
  });
};

// Example combining React and HTML hooks
function AuthenticationExample() {
return (
    <div>
      {/* Trigger sign-in modal */}
      <button data-rownd-sign-in-trigger>
        Sign In
      </button>

      {/* Auto-display sign-in with pre-filled email */}
      <div 
        data-rownd-request-sign-in="auto-submit"
        data-rownd-default-user-identifier="user@example.com"
      />

      {/* Sign in with custom authenticated text */}
      <button
        data-rownd-sign-in-trigger
        data-rownd-authenticated-text="View Dashboard"
        data-rownd-authenticated-redirect-url="/dashboard"
      >
        Sign In
      </button>

      {/* Display user data */}
      <div data-rownd-field-interpolate>
        Welcome, {{ first_name }} {{ last_name }}!
      </div>

      {/* Individual field mapping */}
      <div>
        Email: <span data-rownd-field-mapping="email" />
        {/* Will show verification status automatically */}
      </div>
    </div>
  );
}

function HybridAuthExample() {
  const { is_authenticated, user } = useRownd();

  const handleCustomSignIn = () => {
    requestSignIn({
      method: 'email',
      identifier: user.data.email,
      post_login_redirect: '/welcome'
    });
  };

  return (
    <div>
      {/* Programmatic control */}
      <button onClick={handleCustomSignIn}>
        Custom Sign In Flow
      </button>

      {/* HTML hook with dynamic content */}
      <div 
        data-rownd-sign-in-trigger
        data-rownd-authenticated-text={`Welcome back, ${user.data.first_name}`}
      >
        Get Started
      </div>

      {/* Automatic sign-in prompt */}
      {!is_authenticated && (
        <div 
          data-rownd-request-sign-in="auto-submit"
          data-rownd-default-user-identifier={user.data.email}
        />
      )}

      {/* User data display */}
      <div data-rownd-field-interpolate>
        Account: {{ email }}
        Status: {{ subscription_status }}
      </div>
    </div>
  );
}

function ProfileManager() {
  const { manageAccount, is_authenticated } = useRownd();

  return (
    <div>
      <h2>Account Settings</h2>
      <button 
        onClick={manageAccount}
        disabled={!is_authenticated}
      >
        Manage Your Account
      </button>
    </div>
  );
}

function AccountSection() {
  const { 
    manageAccount, 
    is_authenticated,
    user,
    is_initializing 
  } = useRownd();

  if (is_initializing) {
    return <div>Loading account settings...</div>;
  }

  return (
    <div className="account-section">
      {!is_authenticated && (
<div>
          <h3>Please sign in to manage your account</h3>
          <button 
            data-rownd-sign-in-trigger
            data-rownd-authenticated-redirect-url="/account"
          >
            Sign In
          </button>
        </div>
      )}

      {is_authenticated && (
        <>
          <div className="account-summary">
            <h3>Account Overview</h3>
            <p>Welcome, {user.data.first_name}!</p>
            {user.verified_data.email && (
              <span className="verified-badge">✓ Verified Email</span>
            )}
          </div>

          <div className="account-actions">
            <button 
              onClick={manageAccount}
              className="primary-button"
            >
              Manage Account Settings
            </button>
            <p className="help-text">
              Update your profile, security settings, and connected accounts
            </p>
          </div>
        </>
      )}
    </div>
  );
}

function UserProfile() {
  const { user } = useRownd();
  
  // Access user data directly
  return (
    <div>
      <div className="firstName">{user.data.first_name}</div>
      <div className="email">{user.data.email}</div>
      <div className="customField">{user.data.custom_field}</div>
    </div>
  );
}

function UserDashboard() {
  const { user, is_authenticated } = useRownd();

  if (!is_authenticated) {
    return <div>Please sign in</div>;
  }

  return (
    <div>
      {/* Programmatic access with useRownd */}
      <h1>Welcome, {user.data.first_name}!</h1>
      
      {/* HTML hook for complex templates */}
      <div data-rownd-field-interpolate>
        Account Details:
        Email: {{ email }}
        Subscription: {{ subscription_type }}
        Member since: {{ join_date }}
      </div>

      {/* Mix both approaches */}
      <div className="profile-card">
        <h2>Profile</h2>
        {user.data.profile_picture && (
          <img 
            src={user.data.profile_picture} 
            data-rownd-field-mapping="profile_picture"
          />
        )}
        <div data-rownd-field-mapping="bio"></div>
      </div>
    </div>
  );
}