Expert in Clerk authentication for React Native/Expo apps. Handles user authentication, session management, protected routes, and integration with backend services.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: clerk-auth-expert description: Expert in Clerk authentication for React Native/Expo apps. Handles user authentication, session management, protected routes, and integration with backend services.
Clerk Authentication Expert
You are a Clerk authentication expert with deep knowledge of the Clerk ecosystem for React Native and Expo applications. This skill enables you to implement secure, production-ready authentication flows for the N8ture AI App.
Core Responsibilities
- Implement Clerk SDK - Set up
@clerk/clerk-expowith proper configuration - Authentication flows - Build sign-in, sign-up, password reset, and social auth
- Session management - Handle user sessions, token refresh, and persistence
- Protected routes - Create authentication guards for navigation
- User management - Access and update user profiles and metadata
- Backend integration - Pass Clerk JWT tokens to Firebase Cloud Functions
Quick Start
Installation
npx expo install @clerk/clerk-expo expo-secure-store
Basic Setup
// App.js
import { ClerkProvider } from '@clerk/clerk-expo';
import * as SecureStore from 'expo-secure-store';
const tokenCache = {
async getToken(key) {
return SecureStore.getItemAsync(key);
},
async saveToken(key, value) {
return SecureStore.setItemAsync(key, value);
},
};
export default function App() {
return (
<ClerkProvider
publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
tokenCache={tokenCache}
>
<RootNavigator />
</ClerkProvider>
);
}
Common Patterns
Protected Route
import { useAuth } from '@clerk/clerk-expo';
export function useProtectedRoute() {
const { isSignedIn, isLoaded } = useAuth();
const navigation = useNavigation();
useEffect(() => {
if (isLoaded && !isSignedIn) {
navigation.navigate('SignIn');
}
}, [isSignedIn, isLoaded]);
return { isSignedIn, isLoaded };
}
User Profile Access
import { useUser } from '@clerk/clerk-expo';
export function ProfileScreen() {
const { user } = useUser();
const updateProfile = async () => {
await user.update({
firstName: 'John',
lastName: 'Doe',
});
};
return (
<View>
<Text>Welcome, {user.firstName}!</Text>
<Text>Email: {user.primaryEmailAddress.emailAddress}</Text>
</View>
);
}
Backend Token Passing
import { useAuth } from '@clerk/clerk-expo';
export function useAuthenticatedRequest() {
const { getToken } = useAuth();
const makeRequest = async (endpoint, data) => {
const token = await getToken();
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
return response.json();
};
return { makeRequest };
}
N8ture AI App Integration
Trial Management
Store user trial count in Clerk user metadata:
// Update trial count
await user.update({
unsafeMetadata: {
trialCount: 3,
totalIdentifications: 0,
},
});
// Check trial status
const trialCount = user.unsafeMetadata.trialCount || 0;
const canIdentify = user.publicMetadata.isPremium || trialCount > 0;
Premium Subscription Status
// Store subscription status
await user.update({
publicMetadata: {
isPremium: true,
subscriptionId: 'sub_xxx',
},
});
Best Practices
- Use token cache - Always implement SecureStore token caching
- Handle loading states - Check
isLoadedbefore rendering auth-dependent UI - Secure metadata - Use
publicMetadatafor non-sensitive data,privateMetadatafor sensitive data - Error handling - Implement proper error handling for auth failures
- Social auth - Configure OAuth providers in Clerk Dashboard before implementing
Environment Variables
# .env
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx
Common Issues
Issue: "Clerk is not loaded"
Solution: Always check isLoaded before accessing auth state
Issue: Token not persisting
Solution: Ensure SecureStore token cache is properly configured
Issue: Social auth not working
Solution: Configure OAuth redirect URLs in Clerk Dashboard and app.json
Resources
Use this skill when implementing authentication, managing user sessions, or integrating Clerk with the N8ture AI App backend.
More by NeverSight
View allView investment accounts, check portfolio, monitor positions, and research investments on Charles Schwab
Comprehensive expertise in decentralized autonomous organization governance systems, including Snapshot off-chain voting, OpenZeppelin Governor on-chain execution, treasury multi-sigs, proposal lifecycles, delegation, and governance attack prevention. Use when "DAO governance, on-chain voting, Snapshot, Governor contract, governance proposal, treasury management, multi-sig, token voting, delegation, quorum, timelock, governance attack, " mentioned.
Comprehensive database design tool creating complete schemas with tables, fields, indexes, and ER diagrams. Use when users request database design for any system. Generates Markdown docs, SQL scripts, and DrawDB-compatible JSON/DBML files. Supports MySQL, PostgreSQL, SQL Server. Triggers: database design, schema, ER diagram, SQL, data model. | 全面的数据库设计工具,创建完整的数据库架构。触发词:数据库设计、数据库架构、ER图、SQL、数据模型、表设计。
Advanced distributed event patterns for ABP microservices including idempotent handlers, cross-tenant events, event sourcing lite, and saga patterns. Use when: (1) implementing event handlers across services, (2) ensuring idempotent event processing, (3) cross-tenant event handling, (4) designing event-driven architectures.
