7c92e60a53
- useAuth와 useUser에서 react-hooks/rules-of-hooks 규칙 비활성화 - Clerk이 비활성화된 상황에서의 조건부 Hook 호출은 의도된 동작
139 lines
4.3 KiB
JavaScript
139 lines
4.3 KiB
JavaScript
#!/usr/bin/env node
|
||
|
||
/**
|
||
* Clerk JWT Template 설정 스크립트
|
||
* Clerk 대시보드에서 수동으로 설정해야 하는 내용들을 가이드합니다.
|
||
*/
|
||
|
||
import fs from "fs";
|
||
import path from "path";
|
||
import { fileURLToPath } from "url";
|
||
|
||
const __filename = fileURLToPath(import.meta.url);
|
||
const __dirname = path.dirname(__filename);
|
||
|
||
console.log("🔧 Clerk JWT Template 설정 가이드");
|
||
console.log("=====================================\n");
|
||
|
||
// 환경 변수 로드
|
||
import dotenv from "dotenv";
|
||
dotenv.config();
|
||
|
||
const CLERK_PUBLISHABLE_KEY = process.env.VITE_CLERK_PUBLISHABLE_KEY;
|
||
const CLERK_SECRET_KEY = process.env.CLERK_SECRET_KEY;
|
||
|
||
if (!CLERK_PUBLISHABLE_KEY || !CLERK_SECRET_KEY) {
|
||
console.error(
|
||
"❌ 오류: CLERK_PUBLISHABLE_KEY 또는 CLERK_SECRET_KEY가 설정되지 않았습니다."
|
||
);
|
||
console.error(" .env 파일에 다음 변수들을 설정해주세요:");
|
||
console.error(" - VITE_CLERK_PUBLISHABLE_KEY");
|
||
console.error(" - CLERK_SECRET_KEY");
|
||
process.exit(1);
|
||
}
|
||
|
||
console.log("✅ 환경 변수 확인 완료");
|
||
console.log(`📋 Publishable Key: ${CLERK_PUBLISHABLE_KEY.substring(0, 20)}...`);
|
||
console.log(`🔑 Secret Key: ${CLERK_SECRET_KEY.substring(0, 20)}...\n`);
|
||
|
||
// JWT 템플릿 구성
|
||
const jwtTemplate = {
|
||
name: "supabase",
|
||
claims: {
|
||
aud: "authenticated",
|
||
role: "authenticated",
|
||
email: "{{user.primary_email_address}}",
|
||
email_verified: true,
|
||
phone: "{{user.primary_phone_number}}",
|
||
app_metadata: {
|
||
provider: "clerk",
|
||
providers: ["clerk"],
|
||
},
|
||
user_metadata: {
|
||
name: "{{user.full_name}}",
|
||
username: "{{user.username}}",
|
||
avatar_url: "{{user.image_url}}",
|
||
},
|
||
},
|
||
lifetime: 3600,
|
||
};
|
||
|
||
console.log("📝 Clerk 대시보드에서 다음 설정을 해주세요:");
|
||
console.log("============================================\n");
|
||
|
||
console.log("1. 🌐 Clerk 대시보드 접속");
|
||
console.log(" https://dashboard.clerk.com\n");
|
||
|
||
console.log("2. 📊 프로젝트 선택");
|
||
console.log(" 프로젝트: joint-cheetah-86\n");
|
||
|
||
console.log("3. 🔧 JWT Templates 섹션으로 이동");
|
||
console.log(' 좌측 메뉴에서 "JWT Templates" 클릭\n');
|
||
|
||
console.log("4. ➕ Create Template 클릭");
|
||
console.log(' "New Template" 또는 "Create Template" 버튼 클릭\n');
|
||
|
||
console.log("5. 📋 다음 JSON 설정 붙여넣기:");
|
||
console.log(" Template Name: supabase");
|
||
console.log(" JSON 설정:");
|
||
console.log("```json");
|
||
console.log(JSON.stringify(jwtTemplate, null, 2));
|
||
console.log("```\n");
|
||
|
||
console.log("6. 🌍 허용된 도메인 설정");
|
||
console.log(" Settings > Domains에서 다음 도메인 추가:");
|
||
console.log(" - http://localhost:3000 (개발 환경)");
|
||
console.log(" - http://localhost:3001 (개발 환경)");
|
||
console.log(" - https://zellyy-finance-psi.vercel.app (프로덕션)");
|
||
console.log(" - https://zellyy-finance.vercel.app (프로덕션)\n");
|
||
|
||
console.log("7. 🔄 Webhooks 설정 (선택사항)");
|
||
console.log(" Settings > Webhooks에서 다음 이벤트 추가:");
|
||
console.log(" - user.created");
|
||
console.log(" - user.updated");
|
||
console.log(" - user.deleted");
|
||
console.log(
|
||
" Endpoint URL: https://zellyy-finance-psi.vercel.app/api/webhooks/clerk\n"
|
||
);
|
||
|
||
// 현재 설정 확인을 위한 테스트 코드 생성
|
||
const testCode = `
|
||
// Clerk 설정 테스트 코드
|
||
import { useAuth } from '@clerk/clerk-react';
|
||
|
||
function TestClerkSetup() {
|
||
const { getToken } = useAuth();
|
||
|
||
const testJWTTemplate = async () => {
|
||
try {
|
||
const token = await getToken({ template: 'supabase' });
|
||
console.log('✅ JWT 템플릿 테스트 성공:', token);
|
||
} catch (error) {
|
||
console.error('❌ JWT 템플릿 테스트 실패:', error);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<button onClick={testJWTTemplate}>JWT 템플릿 테스트</button>
|
||
</div>
|
||
);
|
||
}
|
||
`;
|
||
|
||
// 테스트 코드 파일 생성
|
||
fs.writeFileSync(
|
||
path.join(__dirname, "..", "src", "components", "test", "ClerkSetupTest.tsx"),
|
||
testCode
|
||
);
|
||
|
||
console.log("📁 테스트 파일 생성 완료:");
|
||
console.log(" src/components/test/ClerkSetupTest.tsx\n");
|
||
|
||
console.log("⚡ 설정 완료 후 다음 명령어로 테스트:");
|
||
console.log(" npm run dev");
|
||
console.log(" 브라우저에서 http://localhost:3000 접속\n");
|
||
|
||
console.log("🎯 설정이 완료되면 다음 스크립트를 실행하세요:");
|
||
console.log(" node scripts/test-clerk-integration.js\n");
|