https://github.com/joshuabaker/authkit-react-native
🔐 WorkOS AuthKit for Expo / React Native
https://github.com/joshuabaker/authkit-react-native
authkit expo expo-auth expo-auth-session react-native react-native-authentication workos workos-authkit
Last synced: 8 days ago
JSON representation
🔐 WorkOS AuthKit for Expo / React Native
- Host: GitHub
- URL: https://github.com/joshuabaker/authkit-react-native
- Owner: joshuabaker
- License: mit
- Created: 2026-03-17T16:03:52.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-04-14T05:51:45.000Z (15 days ago)
- Last Synced: 2026-04-14T07:32:48.808Z (15 days ago)
- Topics: authkit, expo, expo-auth, expo-auth-session, react-native, react-native-authentication, workos, workos-authkit
- Language: TypeScript
- Homepage:
- Size: 699 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# AuthKit for React Native
WorkOS AuthKit integration for React Native, built on Zustand and Expo modules.
- 🔒 Secure token storage (Keychain/Keystore)
- 🔄 Automatic session restoration and token refresh
- 🔏 PKCE for added security
- 🧩 Zustand-based — no nested providers or layouts required
## Installation
```bash
npx expo install authkit-react-native zustand expo-auth-session expo-secure-store expo-web-browser @react-native-async-storage/async-storage
```
## Usage
### Create the hook
Create a `useAuth` hook that your app imports everywhere. The store is created at module scope so the session begins restoring immediately on app launch.
```typescript
// hooks/useAuth.ts
import { createAuthStore } from "authkit-react-native";
import { useStore } from "zustand";
const authStore = createAuthStore({
// Provide authorizationEndpoint or clientId
authorizationEndpoint: "https://api.example.com/v1/auth/authorize",
tokenEndpoint: "https://api.example.com/v1/auth/token",
revocationEndpoint: "https://api.example.com/v1/auth/revoke",
});
export function useAuth() {
return useStore(authStore);
}
```
### Protected routes
Use `Stack.Protected` to gate routes based on auth state. Because the store lives outside React, there's no provider to wrap your app in — just call `useAuth()` in your root layout.
> Requires Expo SDK 53+ (Expo Router v5).
```tsx
// app/_layout.tsx
import { useAuth } from "@/hooks/useAuth";
import { Loading } from "@/components/Loading";
import { Stack } from "expo-router";
export default function RootLayout() {
const { user, isLoading } = useAuth();
if (isLoading) return ;
return (
);
}
```
### Sign in
Call `signIn()` to open the WorkOS AuthKit sign-in page. Returns `true` on success, `false` if the user cancelled.
```tsx
import { useAuth } from "@/hooks/useAuth";
function SignInScreen() {
const { signIn } = useAuth();
return (
<>
signIn()} />
signIn({ screenHint: "sign-up" })}
/>
>
);
}
```
### Sign out
`signOut()` revokes the token and clears storage. It does not show any confirmation UI — add that in your app:
```tsx
import { useAuth } from "@/hooks/useAuth";
import { Alert } from "react-native";
function SignOutButton() {
const { user, signOut } = useAuth();
const handleSignOut = () => {
Alert.alert(
`Are you sure you want to sign out as ${user.email}?`,
undefined,
[
{ text: "Cancel", style: "cancel" },
{ text: "Sign out", style: "destructive", onPress: () => signOut() },
],
);
};
return ;
}
```
## Configuration
| Option | Required | Default | Description |
| ----------------------- | -------- | ------------------- | ------------------------------------------------------------------------- |
| `authorizationEndpoint` | \* | WorkOS default | OAuth authorize URL. Required unless `clientId` is provided. |
| `clientId` | \* | — | WorkOS client ID. Required when using the default authorization endpoint. |
| `tokenEndpoint` | Yes | — | Token exchange URL. |
| `revocationEndpoint` | Yes | — | Token revocation URL. |
| `redirectUri` | No | `makeRedirectUri()` | OAuth redirect URI. |
| `storageKeyPrefix` | No | `"workos"` | Prefix for SecureStore/AsyncStorage keys. |
| `devMode` | No | `false` | Logs errors to the console when enabled. |
## Examples
See the [`examples/`](examples/) directory for complete, copy-paste-ready projects:
- **[Expo](examples/expo/)** — Minimal client app with `useAuth` hook
- **[Hono](examples/hono/)** — Auth proxy server on Cloudflare Workers
- **[Next.js](examples/nextjs/)** — Auth proxy server with App Router route handlers