Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/kelvincushman/n8ture-ai-app --skill clerk-auth-expertVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
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.
