Skip to main content

Authentication

The useCustomer hook provides full authentication lifecycle management.

Hook API

function useCustomer(): {
  customer: unknown | null;                        // full customer profile
  loading: boolean;
  error: Error | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
  createAccount: (input: {
    email: string;
    password: string;
    firstName?: string;
    lastName?: string;
    phone?: string;
    acceptsMarketing?: boolean;
  }) => Promise<void>;
  recoverPassword: (email: string) => Promise<void>;
  refetch: () => Promise<void>;
}

Login

import { useCustomer } from 'react-native-stackfront-sdk';

function LoginScreen() {
  const { login, loading, error } = useCustomer();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      await login(email, password);
      // On success: token is stored, customer data is fetched,
      // cart buyer identity is linked, and 'login' event is tracked
      navigateToHome();
    } catch {
      // error state is set automatically
    }
  };

  return (
    <View>
      <Input value={email} onChangeText={setEmail} placeholder="Email" />
      <Input value={password} onChangeText={setPassword} placeholder="Password" secureTextEntry />
      {error && <Text style={errorText}>{error.message}</Text>}
      <Button title="Log In" onPress={handleLogin} disabled={loading} />
    </View>
  );
}

Register

const { createAccount, loading, error } = useCustomer();

const handleRegister = async () => {
  try {
    await createAccount({
      email: 'user@example.com',
      password: 'securePassword123',
      firstName: 'Jane',
      lastName: 'Doe',
      acceptsMarketing: true,
    });
    // 'account_created' event is tracked automatically
    navigateToLogin();
  } catch {
    // handle errors
  }
};
Registration creates the customer but does NOT log them in. Call login separately after registration.

Logout

const { logout } = useCustomer();

const handleLogout = async () => {
  await logout();
  // Token is deleted from Shopify and cleared locally
  // 'logout' event is tracked
  // customer data resets to null
};

Password Recovery

const { recoverPassword } = useCustomer();
await recoverPassword('user@example.com');
// Shopify sends a password reset email

Service API

For imperative access:
const { customer } = useStackfront();

await customer.login({ email, password });
await customer.logout();
await customer.create({ email, password, firstName });
await customer.getCustomer();
await customer.recoverPassword(email);
customer.setAccessToken(token);
customer.getAccessToken();       // returns string | null