How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/kelvincushman/n8ture-ai-app --skill clerk-auth-expertBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
bash
npx expo install @clerk/clerk-expo expo-secure-storeBasic Setup
javascript
// 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
javascript
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
javascript
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
javascript
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:
javascript
// 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
javascript
// 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
bash
# .env
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxCommon 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.
