Agent skill
mobile-auth
Better Auth integration with Expo/React Native. Use when working on mobile authentication, session management, or debugging auth issues in the mobile app. Triggers on "mobile auth", "expo auth", "better-auth expo", "session provider", "SecureStore", or when editing apps/frontend/mobile auth files.
Install this agent skill to your Project
npx add-skill https://github.com/frmlabz/frm-stack/tree/main/capabilities/frontend/skills/mobile-auth
SKILL.md
Mobile Auth (Better Auth + Expo)
The mobile app uses Better Auth with @better-auth/expo plugin.
The Problem
Better Auth's session state doesn't sync reliably with React context on Expo. The plugin stores cookies in expo-secure-store, but reactive session updates don't propagate as expected.
Our Solution
Custom SessionProvider that:
- Initializes from cache - Read cached session from SecureStore on app start
- Subscribes to auth signals - Listen to
$sessionSignalfor auth state changes - Manual refresh - Call
onAuthSuccess()after sign-in/sign-up
Reading Cached Session
// src/lib/auth.ts
export function getCachedSession(): AuthSession | null {
const raw = SecureStore.getItem(SESSION_DATA_KEY);
// validate and return
}
Session Provider
// src/providers/session-provider.tsx
useEffect(() => {
const store = getAuthClient().$store;
const sessionSignal = store.atoms.$sessionSignal;
const unsubscribe = sessionSignal.subscribe(() => {
setData(getCachedSession());
});
return () => unsubscribe();
}, []);
Required Configuration
| Config | Value | Notes |
|---|---|---|
cookiePrefix |
yourcompany |
Must match backend's advanced.cookiePrefix |
scheme |
mobile |
Must match scheme in app.json |
storagePrefix |
mobile |
Prefix for device storage keys |
Key Files
- Mobile auth client:
apps/frontend/mobile/src/lib/auth.ts - Session provider:
apps/frontend/mobile/src/providers/session-provider.tsx - Backend auth config:
apps/backend/api/src/auth.ts
Known Issues
- Session expiry detection relies on parsing
expiresAtfrom cached data $sessionSignalsubscription is undocumented API and may change- Web platform falls back to standard cookie-based auth (no SecureStore)
Troubleshooting
| Issue | Check |
|---|---|
| Session not updating | Verify onAuthSuccess() called after sign-in |
| Cookie mismatch | Compare cookiePrefix between mobile and backend |
| Auth redirect fails | Check scheme matches app.json |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
testing
Shared database testing patterns with testcontainers and Vitest. Use when writing backend tests, setting up test files, debugging test failures, or configuring Vitest. Triggers on "write tests", "test setup", "testcontainers", "vitest config", "test isolation", or when creating new test suites.
db-workflow
Database workflow with Postgres, Kysely, and Atlas migrations. Use when modifying database schema, creating migrations, generating TypeScript types, or troubleshooting database issues. Triggers on "schema change", "migration", "db-migrate", "kysely", "atlas", or when editing db/schema.sql.
react-useeffect
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
resolve-pr-comments
Address GitHub PR review comments end-to-end, fetch unresolved review threads (via `gh` GraphQL), implement fixes, reply with what changed, and resolve threads using the bundled scripts. Use when asked to “address PR comments”, “resolve review threads”, or “clear requested changes”.
doc-coauthoring
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
Didn't find tool you were looking for?