@cabin-id/expo

CabinID SDK for React Native/Expo applications. Provides authentication functionality including sign-in, sign-up, OTP verification, and password reset flows.

Installation

npm install @cabin-id/expo expo-secure-store
# or
yarn add @cabin-id/expo expo-secure-store

Quick Start

1. Setup Provider

Wrap your app with CabinIDProvider:

import { CabinIDProvider } from '@cabin-id/expo';

const config = {
  apiUrl: 'https://api.cabinid.dev',
  projectId: 'your-project-id',
};

export default function App() {
  return (
    <CabinIDProvider config={config}>
      <YourApp />
    </CabinIDProvider>
  );
}

2. Use Authentication Hooks

import { useAuth, useUser } from '@cabin-id/expo';

function ProfileScreen() {
  const { signOut, isSignedIn } = useAuth();
  const { user } = useUser();

  if (!isSignedIn) {
    return <LoginScreen />;
  }

  return (
    <View>
      <Text>Welcome, {user?.firstName}!</Text>
      <Button title="Sign Out" onPress={signOut} />
    </View>
  );
}

3. Sign In

import { useSignIn } from '@cabin-id/expo';

function SignInScreen() {
  const { signIn, isLoading, error } = useSignIn();

  const handleSignIn = async () => {
    try {
      await signIn({
        phoneNumber: '+84987654321',
        password: 'yourPassword',
      });
      // User is now signed in
    } catch (err) {
      // Handle error
    }
  };

  return (
    <View>
      {error && <Text style={{ color: 'red' }}>{error}</Text>}
      <Button 
        title={isLoading ? 'Signing in...' : 'Sign In'} 
        onPress={handleSignIn}
        disabled={isLoading}
      />
    </View>
  );
}

4. Sign Up with OTP

import { useSignUp, useOTP } from '@cabin-id/expo';

function SignUpScreen() {
  const { signUp, isLoading } = useSignUp();
  const { sendOTP, verifyOTP, isLoading: otpLoading } = useOTP();

  const handleSendOTP = async (phoneNumber: string) => {
    await sendOTP({ phoneNumber, type: 'sign_up' });
  };

  const handleVerifyAndSignUp = async (phoneNumber: string, otp: string, password: string) => {
    await verifyOTP({ phoneNumber, otp });
    await signUp({ phoneNumber, password });
  };
}

5. Password Reset

import { useResetPassword } from '@cabin-id/expo';

function ForgotPasswordScreen() {
  const { 
    sendResetOTP, 
    verifyResetOTP, 
    resetPassword, 
    step,
    isLoading, 
    error 
  } = useResetPassword();

  // step: 'phone' | 'otp' | 'password' | 'complete'
  
  const handleSendOTP = () => sendResetOTP({ phoneNumber: '+84...' });
  const handleVerifyOTP = () => verifyResetOTP({ phoneNumber: '+84...', otp: '123456' });
  const handleResetPassword = () => resetPassword({ otp: '123456', newPassword: 'newPass' });
}

Components

SignedIn / SignedOut

Conditional rendering based on auth state:

import { SignedIn, SignedOut } from '@cabin-id/expo';

function App() {
  return (
    <>
      <SignedIn>
        <HomeScreen />
      </SignedIn>
      <SignedOut>
        <LoginScreen />
      </SignedOut>
    </>
  );
}

ProtectedRoute

Route protection with loading state:

import { ProtectedRoute } from '@cabin-id/expo';

function ProtectedScreen() {
  return (
    <ProtectedRoute 
      fallback={<LoginScreen />}
      loadingComponent={<LoadingSpinner />}
    >
      <DashboardScreen />
    </ProtectedRoute>
  );
}

API Reference

Hooks

| Hook | Description | |------|-------------| | useAuth() | Main auth hook with signIn, signUp, signOut | | useUser() | Access current user data | | useSignIn() | Sign in with loading state | | useSignUp() | Sign up with loading state | | useOTP() | Send and verify OTP | | useResetPassword() | Complete password reset flow |

Types

interface CabinIDConfig {
  apiUrl: string;
  projectId?: string;
  apiVersion?: string; // default: 'v2'
}

interface User {
  id: string;
  phoneNumber: string;
  firstName?: string;
  lastName?: string;
  email?: string;
}

Token Storage

The SDK automatically stores tokens securely using expo-secure-store on native platforms and falls back to localStorage on web.

License

MIT