사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/kelvincushman/n8ture-ai-app --skill clerk-auth-expert시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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.
