dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
d7d270510f
fitaiProto/docs/CLERK_QUICKSTART.md
echo 892cf1a040 organize docs
2025-11-19 05:12:19 +01:00

4.4 KiB
Raw Blame History

Clerk Quick Start Guide

⚡ 5-Minute Setup Reference

🚀 Quick Setup Steps

1️⃣ Create Clerk Account (2 minutes)

  1. Go to https://dashboard.clerk.com
  2. Sign up or sign in
  3. Click "Add application"
  4. Name it "FitAI"
  5. Enable "Email" authentication
  6. Click "Create application"
  7. Copy your API keys (you'll need these next!)

2️⃣ Configure Admin App (1 minute)

# Navigate to admin app
cd apps/admin

# Create environment file
cp .env.local.example .env.local

# Edit .env.local and paste your keys:
# NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE
# CLERK_SECRET_KEY=sk_test_YOUR_SECRET_KEY_HERE

# Start the app
npm run dev

✅ Visit http://localhost:3000 - You should see Clerk's sign-in page!

3️⃣ Configure Mobile App (1 minute)

# Navigate to mobile app
cd apps/mobile

# Create environment file
cp .env.example .env

# Edit .env and paste your publishable key:
# EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YOUR_KEY_HERE

# Start the app
npm start

✅ Scan QR code with Expo Go - You should see the sign-in screen!

🧪 Test It Out

Admin App

  1. Go to http://localhost:3000
  2. Click "Sign up"
  3. Enter email & password
  4. Check email for verification code
  5. Enter code
  6. ✅ You're in!

Mobile App

  1. Open app in Expo Go
  2. Tap "Sign Up"
  3. Fill in your details
  4. Enter verification code from email
  5. ✅ You're in!

🆘 Quick Troubleshooting

"Missing Clerk Publishable Key"

  • ✅ Check .env.local (admin) or .env (mobile) exists
  • ✅ Restart dev server after adding keys

"Invalid API key"

  • ✅ Copy keys from Clerk Dashboard (don't type them!)
  • ✅ Make sure no extra spaces in .env file

"Unable to resolve react-dom"

  • ✅ Install: npm install react-dom react-native-web
  • ✅ Clear cache: npx expo start -c

Mobile app blank screen

  • ✅ Install Clerk package: npm install @clerk/clerk-expo --legacy-peer-deps
  • ✅ Clear cache: npx expo start -c

Can't receive verification email

  • ✅ Check spam folder
  • ✅ Check Clerk Dashboard > Logs to see if email was sent
  • ✅ For testing, enable "Development mode" in Clerk to skip verification

📋 Environment Variables Checklist

Admin App (.env.local)

✅ NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
✅ CLERK_SECRET_KEY=sk_test_...
✅ NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
✅ NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Mobile App (.env)

✅ EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...

Required Dependencies

All Clerk mobile dependencies must be installed:

cd apps/mobile
npm install @clerk/clerk-expo expo-web-browser expo-auth-session expo-secure-store expo-crypto react-dom react-native-web

Complete List:

  • @clerk/clerk-expo - Core Clerk SDK
  • expo-web-browser - OAuth flows
  • expo-auth-session - SSO and sessions
  • expo-secure-store - Token storage
  • expo-crypto - Cryptographic functions
  • react-dom - Web compatibility
  • react-native-web - React Native web layer

🎯 What's Protected?

Admin App

  • ✅ Dashboard (/)
  • ✅ Users (/users)
  • ✅ Analytics (/analytics)
  • ✅ All API routes

Mobile App

  • ✅ Home tab
  • ✅ Profile tab
  • ✅ Attendance tab

🔗 Useful Links

✨ Next Steps

After authentication works:

  1. Customize the UI

    • Update colors in Clerk Dashboard
    • Customize email templates

  2. Verify All Dependencies

    cd apps/mobile
npm list @clerk/clerk-expo expo-web-browser expo-auth-session react-dom react-native-web

  3. Add Social Login

    • Enable Google/GitHub in Clerk Dashboard
    • No code changes needed!

  4. Sync Users to Database

  5. Enable MFA

    • Turn on in Clerk Dashboard > Authentication
    • Users can enable in their profile

🎉 That's It!

You now have enterprise-grade authentication in both apps!

Questions? See CLERK_SETUP.md for detailed guide.

Issues? Check the troubleshooting section above.

Last Updated: January 2025
Setup Time: ~5 minutes
Difficulty: ⭐ Easy