React Native quickstart

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

EXPO_PUBLIC_WOCHA_ISSUER=https://your-tenant.auth.wocha.ai
EXPO_PUBLIC_WOCHA_CLIENT_ID=your-client-id
 
# Optional — self-hosted or custom API host
EXPO_PUBLIC_WOCHA_API_URL=https://your-tenant.api.wocha.ai/v1

{
  "expo": {
    "scheme": "myapp",
    "ios": {
      "bundleIdentifier": "com.example.myapp"
    },
    "android": {
      "package": "com.example.myapp"
    }
  }
}

import { WochaProvider } from "@wocha/react-native";
import { NavigationContainer } from "@react-navigation/native";
import { RootNavigator } from "./navigation";
 
const greetConfig = {
  issuer: process.env.EXPO_PUBLIC_WOCHA_ISSUER!,
  clientId: process.env.EXPO_PUBLIC_WOCHA_CLIENT_ID!,
  redirectUri: "myapp://auth/callback",
  apiUrl: process.env.EXPO_PUBLIC_WOCHA_API_URL,
  onRedirectCallback: (appState) => {
    console.log("Signed in", appState);
  },
};
 
export default function App() {
  return (
    <WochaProvider config={greetConfig}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </WochaProvider>
  );
}

import { useWochaAuth, useSession, useOrg } from "@wocha/react-native";
import { ActivityIndicator, Button, Text, View } from "react-native";
 
export function HomeScreen() {
  const { signIn, signUp, signOut } = useWochaAuth();
  const { data, status, error } = useSession();
  const { orgId, orgIds, switchOrg, isSwitching } = useOrg();
 
  if (status === "loading") {
    return <ActivityIndicator />;
  }
 
  if (status === "authenticated" && data) {
    return (
      <View style={{ padding: 24, gap: 12 }}>
        <Text>Signed in as {data.email}</Text>
        <Text>Organisation: {orgId ?? "—"}</Text>
        {orgIds?.map((id) => (
          <Button
            key={id}
            title={`Switch to ${id}`}
            disabled={isSwitching || id === orgId}
            onPress={() => void switchOrg(id)}
          />
        ))}
        <Button title="Sign out" onPress={() => void signOut()} />
      </View>
    );
  }
 
  return (
    <View style={{ padding: 24, gap: 12 }}>
      {error ? <Text>{error.message}</Text> : null}
      <Button title="Sign in" onPress={() => void signIn()} />
      <Button title="Create account" onPress={() => void signUp()} />
    </View>
  );
}

import { useAccessToken } from "@wocha/react-native";
 
export function useAuthenticatedFetch() {
  const { getAccessToken } = useAccessToken();
 
  return async (url: string, init?: RequestInit) => {
    const token = await getAccessToken();
    if (!token) throw new Error("Not authenticated");
 
    return fetch(url, {
      ...init,
      headers: {
        ...init?.headers,
        Authorization: `Bearer ${token}`,
      },
    });
  };
}