# 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)

```bash
# 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)

```bash
# 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`)
```env
✅ 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`)
```env
✅ EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
```

### Required Dependencies

All Clerk mobile dependencies must be installed:
```bash
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

- 📖 **Full Setup Guide**: [CLERK_SETUP.md](./CLERK_SETUP.md)
- 🎯 **Integration Summary**: [CLERK_INTEGRATION_SUMMARY.md](./CLERK_INTEGRATION_SUMMARY.md)
- 🌐 **Clerk Dashboard**: https://dashboard.clerk.com
- 📚 **Clerk Docs**: https://clerk.com/docs
- 💬 **Get Help**: https://clerk.com/discord

---

## ✨ Next Steps

After authentication works:

1. **Customize the UI**
   - Update colors in Clerk Dashboard
   - Customize email templates

2. **Verify All Dependencies**
   ```bash
   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**
   - Implement webhooks
   - See [CLERK_SETUP.md](./CLERK_SETUP.md) for details

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](./CLERK_SETUP.md) for detailed guide.

**Issues?** Check the troubleshooting section above.

---

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