22 chapters · 80 min
Skills
Chapter 21 of 22
Add Clerk authentication to Expo and React Native apps using @clerk/expo.
6 minutes · 1,273 words · 9 sections
Implement Clerk in Expo / React Native projects. This skill inlines verified patterns for the stable surface (provider, token cache, flows) and requires source inspection of the installed @clerk/expo package for anything volatile (component props, hook signatures).
Activate when either is true:
@clerk/expo, ClerkProvider, Expo Router auth, or Clerk hooks in a native app.app.json / app.config.js, expo in package.json, metro.config.js, @clerk/expo dependency).Route away when:
.xcodeproj, Package.swift) → clerk-swiftbuild.gradle without React Native) → clerk-androidMatch what the user asked for, then load the reference(s) listed. Load only what the task needs.
| User intent (examples) | Path | Reference |
|---|---|---|
| “Add auth to my app” / “add sign-in with Clerk” | Prebuilt native components (default) | references/setup.md + references/prebuilt-components.md |
| “Add auth” but Expo Go / web / custom UI required | Custom flows | references/setup.md + references/custom-flows.md |
| “Add phone / SMS auth”, “email OTP”, “passwordless” | Custom flow, phoneCode / emailCode | references/custom-flows.md |
| “Sign in with Google/Apple/GitHub”, “social login”, “SSO” | Browser SSO or native buttons | references/sso-and-native-auth.md |
| “MFA / 2FA / TOTP”, “forgot password”, “email link” | Custom flow additions | references/custom-flows.md |
| “Protect routes/screens”, “redirect if signed out” | Expo Router guards | references/protected-routes.md |
| “Show user profile”, “org switching”, “push notifications”, “sign out”, “call my backend” | App recipes | references/recipes.md |
| “Biometric login”, “Face ID”, “passkeys” | Device features | references/recipes.md |
When the user says “add auth” without specifying UI:
AuthView + UserButton from @clerk/expo/native). Fastest to working auth; UI is maintained by Clerk. Tell the developer they are in beta and require a development build.AuthView (or vice versa) without being asked.Do not blend prebuilt components and custom flows for the same auth step (e.g. AuthView plus a custom password form). Blending is allowed only when the developer explicitly asks.
npx tsc --noEmit or equivalent).npx expo run:ios / run:android for native features, npx expo start for Expo Go flows. If the build fails, fix and rebuild iteratively — build errors against the installed SDK are the ground truth when this skill and the SDK disagree. After ~5 failed fix attempts, stop and ask the developer how to proceed instead of thrashing.process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY (.env file). Never NEXT_PUBLIC_, never hardcoded. If no key exists, ask the developer for one (or run npx clerk@latest init --framework expo, which installs the SDK and writes the env file) and wait before editing files.https://dashboard.clerk.com/~/native-applications). Tell the developer to verify this during setup; it is required for any native integration.<frontendApiUrl>/v1/environment?_is_native=true, or ask the developer to check the dashboard (User & authentication). SMS in particular is instance-configuration-dependent — code written for a disabled factor fails at runtime, not build time.useSignIn() / useSignUp() from @clerk/expo (v3.4+) return { signIn, errors, fetchStatus } and use method-based flows: signIn.password(), signIn.phoneCode.sendCode(), signIn.finalize(). Never generate the legacy pattern: destructuring isLoaded/setActive from useSignIn()/useSignUp() (the current hooks don’t return them), or signIn.create() chained with prepareFirstFactor()/attemptFirstFactor() + setActive({ session }). That pattern lives at @clerk/expo/legacy and is only for maintaining existing legacy code, never for new work. Scope notes: isLoaded from useAuth()/useUser() is current API and required in guards; signIn.create() itself still exists for advanced cases — prefer the factor-specific methods.useSSO(), never useOAuth() — useOAuth is deprecated. Note the asymmetry: startSSOFlow() still returns { createdSessionId, setActive } and requires setActive({ session: createdSessionId }) — SSO does not use finalize().expo >=53 <57.setActive() after native-component auth.theme JSON file for native component styling (see references/prebuilt-components.md).@clerk/expo-google-signin package in the next major (the @clerk/expo/google import keeps working in v3; a dev warning announces the migration). Don’t preinstall the new package on v3.| Level | Issue | Prevention |
|---|---|---|
| CRITICAL | Generating legacy custom-flow code (signIn.create + prepareFirstFactor + setActive) | Use the current method-based API (Gate 4) |
| CRITICAL | Using useOAuth() | Use useSSO() (Gate 5) |
| CRITICAL | Implementing SMS/social auth without checking the factor is enabled | Check environment/dashboard first (Gate 3) |
| CRITICAL | Native components targeted at Expo Go or web | Require a dev build; offer custom flows otherwise (Gate 8) |
| CRITICAL | Sign-up screen missing <View nativeID="clerk-captcha" /> | Always include it (Gate 10) |
| HIGH | NEXT_PUBLIC_ env prefix, or env var read inside node_modules | EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY, passed explicitly to ClerkProvider |
| HIGH | Session lost on restart | tokenCache from @clerk/expo/token-cache on the provider |
| HIGH | Calling setActive() after AuthView / UserButton auth | Native components sync sessions automatically |
| HIGH | Pairing AuthView with useSignInWithGoogle/useSignInWithApple | AuthView renders enabled social providers itself |
| HIGH | Calling WebBrowser.maybeCompleteAuthSession() manually | ClerkProvider handles it |
| HIGH | Splitting sign-in / sign-up without being asked | Combined flow by default (Gate 9) |
| MEDIUM | Missing isLoaded check before isSignedIn in guards | Always gate on isLoaded first |
| MEDIUM | Using yalc/pnpm link for local @clerk/expo development | Use Verdaccio or pkg.pr.new |
clerk — top-level routerclerk-swift / clerk-android — native mobile SDKsclerk-orgs, clerk-billing, clerk-webhooks — feature skills (hooks work the same in Expo)node_modules/@clerk/expo/Install this repository
npx skills add clerk/skills/plugin marketplace add clerk/skillsSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
Add Clerk authentication to Expo and React Native apps using @clerk/expo. Use for Expo setup, prebuilt native components (AuthView, UserButton), custom sign-in/sign-up flows (email, password, SMS/phone OTP, MFA), OAuth/SSO, native Google/Apple sign-in, Expo Router protected routes, biometrics, and push notifications. Do not use for native Swift/iOS, native Android/Kotlin, or web-only framework projects.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
WebFetchskills/mobile/clerk-expo/SKILL.mdmain, last pushed 6 August 2026.SKILL.md, not by matching a directory convention. 5 distinct layouts observed: .agents/skills/*/SKILL.md, skills/core/*/SKILL.md, skills/features/*/SKILL.md, skills/frameworks/*/SKILL.md, skills/mobile/*/SKILL.md.h1 and no skipped levels:tokenCache@clerk/expo/token-cacheClerkProviderexpo-secure-storeresourceCache, never secureStore — if offline resource caching comes up, @clerk/expo/secure-store is deprecated; use resourceCache from @clerk/expo/resource-cache.@clerk/expo/native) and native hooks (useSignInWithGoogle, useSignInWithApple, useLocalCredentials) require a development build (npx expo run:ios / run:android), not Expo Go, and don’t exist on web. For web targets use @clerk/expo/web components or custom flows. State the build requirement before implementing a native-only feature.<View nativeID="clerk-captcha" />; Clerk’s bot protection is on by default and needs this mount point.node_modules/@clerk/expo/dist/native/*.d.ts and package.json exports. The installed version wins over this skill if they disagree.@clerk/expo 3.6.x. Check the installed version (node_modules/@clerk/expo/package.json). If it is a newer minor or major, treat this skill’s code snippets as suspect: re-verify against the docs URL cited next to each snippet (every reference section carries one) or the installed .d.ts before using them. If it is older than 3.4, the method-based custom-flows API may not exist — offer an upgrade instead of writing legacy code..claude-plugin/marketplace.json by Clerk, declaring 4 plugins. It is read for editorial metadata only — never as the skill index, which is always the repository tree./clerk/skills.md, and each chapter at its own .md URL.7 files · 39 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of chapter 21.
Documentation the agent loads on demand, rather than up front.
Everything else published alongside the skill.