Wocha Docs

React Native SDK

React Native and Expo hooks for mobile OAuth authentication.

@wocha/react-native provides React Native and Expo hooks for Wocha authentication. Implements OAuth 2.0 authorisation code with PKCE as a public client — no client secret required.

Installation

pnpm add @wocha/react-native
Or scaffold with the CLI
npx @wocha/cli init --framework react-native

Recommended Expo peers:

npx expo install expo-web-browser expo-secure-store expo-linking

Setup

Register a custom URL scheme in the Wocha Console (e.g. myapp://auth/callback).

import { WochaProvider } from "@wocha/react-native";
 
export default function App() {
  return (
    <WochaProvider
      config={{
        issuer: "https://my-tenant.auth.wocha.ai",
        clientId: "your-client-id",
        redirectUri: "myapp://auth/callback",
      }}
    >
      <RootNavigator />
    </WochaProvider>
  );
}

Authentication flow

  1. signIn() opens the system browser via expo-web-browser
  2. User authenticates on the hosted login UI
  3. Deep link callback delivers the auth code
  4. SDK exchanges the code and stores tokens in expo-secure-store

Hooks

import { useSession, useUser, useOrg, useWochaAuth, usePermission } from "@wocha/react-native";
 
const { data, status } = useSession();
const { user } = useUser();
const { orgId, switchOrg } = useOrg();
const { signIn, signOut } = useWochaAuth();
 
const { allowed } = usePermission({
  resource: { type: "document", id: "doc_123" },
  permission: "read",
});

UI components

Import from @wocha/react-native/components:

import {
  SignInButton,
  SignOutButton,
  UserInfo,
  AuthGuard,
  OrgSwitcher,
} from "@wocha/react-native/components";
 
<AuthGuard fallback={<SignInButton />}>
  <UserInfo />
  <OrgSwitcher />
  <SignOutButton />
</AuthGuard>

Learn more

On this page