Remix SDK

@wocha/remix is the Remix / React Router v7 adapter for Wocha authentication using the BFF pattern. OAuth token exchange happens on the server; sessions are stored in encrypted httpOnly cookies.

Installation

pnpm add @wocha/remix

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

Peer dependencies: @remix-run/node or react-router (>=7), React (>=18).

Environment variables

.env

WOCHA_CLIENT_ID=your-client-id
WOCHA_CLIENT_SECRET=your-client-secret
WOCHA_ISSUER=https://my-tenant.auth.wocha.ai
WOCHA_API_URL=https://my-tenant.api.wocha.ai  # optional

Auth route handler

Create app/routes/auth.$.tsx:

import { createWochaHandler, wochaAuthConfigFromEnv } from "@wocha/remix";
 
const config = wochaAuthConfigFromEnv()!;
const handler = createWochaHandler(config);
 
export const loader = handler.loader;
export const action = handler.action;

Exposes /auth/login, /auth/callback, /auth/logout, /auth/session, /auth/switch-org.

Root loader

import { getSession, WOCHA_ROOT_LOADER_ID } from "@wocha/remix";
 
export async function loader({ request }: LoaderFunctionArgs) {
  const session = await getSession(request);
  return { session };
}
 
export const id = WOCHA_ROOT_LOADER_ID;

Route protection

import { greetMiddleware } from "@wocha/remix";
 
export const unstable_middleware = [
  greetMiddleware(undefined, { publicPaths: ["/", "/about"] }),
];

Client hooks

import { useSession, useOrg, useWochaAuth } from "@wocha/remix/client";
 
const { session, status } = useSession();
const { orgId, switchOrg } = useOrg();
const { signIn, signOut } = useWochaAuth();