205 lines
4.4 KiB
Markdown
205 lines
4.4 KiB
Markdown
# 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 |