mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Prettier
This commit is contained in:
1 parent
2fb7224c99
commit
ae34650368
4 files changed
+48
-31
No files matched your search
@@ -1,5 +1,5 @@
|
||||
# Supabase UI Library
|
||||
Last updated: 2026-01-15T20:05:35.338Z
|
||||
Last updated: 2026-01-16T13:04:15.624Z
|
||||
|
||||
## Overview
|
||||
Library of components for your project. The components integrate with Supabase and are shadcn compatible.
|
||||
|
||||
@@ -7,6 +7,7 @@ This is a complete passwordless authentication solution for Next.js applications
|
||||
## Documentation Files
|
||||
|
||||
### 📚 Getting Started
|
||||
|
||||
- **[GETTING_STARTED.md](./GETTING_STARTED.md)** - Step-by-step setup guide (10 minutes)
|
||||
- Installation instructions
|
||||
- Configuration steps
|
||||
@@ -14,6 +15,7 @@ This is a complete passwordless authentication solution for Next.js applications
|
||||
- Troubleshooting
|
||||
|
||||
### 📖 Main Documentation
|
||||
|
||||
- **[README.md](./README.md)** - Complete feature documentation
|
||||
- Features overview
|
||||
- Components reference
|
||||
@@ -22,6 +24,7 @@ This is a complete passwordless authentication solution for Next.js applications
|
||||
- Security considerations
|
||||
|
||||
### 🎯 Quick Reference
|
||||
|
||||
- **[QUICK_REFERENCE.md](./QUICK_REFERENCE.md)** - Quick lookup guide
|
||||
- Component comparison table
|
||||
- API reference
|
||||
@@ -30,6 +33,7 @@ This is a complete passwordless authentication solution for Next.js applications
|
||||
- Error messages reference
|
||||
|
||||
### 📘 Usage Guide
|
||||
|
||||
- **[USAGE.md](./USAGE.md)** - Detailed usage instructions
|
||||
- Authentication methods comparison
|
||||
- Component API
|
||||
@@ -38,6 +42,7 @@ This is a complete passwordless authentication solution for Next.js applications
|
||||
- Migration guides
|
||||
|
||||
### 🔧 Integration Examples
|
||||
|
||||
- **[INTEGRATION_EXAMPLES.md](./INTEGRATION_EXAMPLES.md)** - Real-world implementations
|
||||
- E-commerce application
|
||||
- SaaS dashboard
|
||||
@@ -50,6 +55,7 @@ This is a complete passwordless authentication solution for Next.js applications
|
||||
### Core Components
|
||||
|
||||
#### 1. PasswordlessLoginForm (Recommended)
|
||||
|
||||
A unified form supporting both Magic Link and OTP authentication via the `method` prop.
|
||||
|
||||
**File**: `components/passwordless-login-form.tsx`
|
||||
@@ -67,6 +73,7 @@ import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form
|
||||
```
|
||||
|
||||
#### 2. MagicLinkForm
|
||||
|
||||
Standalone Magic Link authentication form.
|
||||
|
||||
**File**: `components/magic-link-form.tsx`
|
||||
@@ -78,6 +85,7 @@ import { MagicLinkForm } from '@/components/auth/magic-link-form'
|
||||
```
|
||||
|
||||
#### 3. OTPRequestForm
|
||||
|
||||
Request a one-time password via email.
|
||||
|
||||
**File**: `components/otp-request-form.tsx`
|
||||
@@ -89,6 +97,7 @@ import { OTPRequestForm } from '@/components/auth/otp-request-form'
|
||||
```
|
||||
|
||||
#### 4. OTPVerifyForm
|
||||
|
||||
Verify the OTP code received via email.
|
||||
|
||||
**File**: `components/otp-verify-form.tsx`
|
||||
@@ -117,33 +126,39 @@ import { OTPVerifyForm } from '@/components/auth/otp-verify-form'
|
||||
## Key Features
|
||||
|
||||
✅ **Magic Link Authentication**
|
||||
|
||||
- One-click email authentication
|
||||
- Automatic session creation
|
||||
- Configurable redirect URLs
|
||||
|
||||
✅ **OTP Authentication**
|
||||
|
||||
- 6-digit code verification
|
||||
- Resend functionality
|
||||
- Auto-format input
|
||||
|
||||
✅ **Unified Form**
|
||||
|
||||
- Prop-based method selection
|
||||
- Single integration point
|
||||
- Consistent UI/UX
|
||||
|
||||
✅ **Security**
|
||||
|
||||
- Rate limiting
|
||||
- Token expiration
|
||||
- HTTPS enforcement
|
||||
- Secure session management
|
||||
|
||||
✅ **User Experience**
|
||||
|
||||
- Clear error messages
|
||||
- Loading states
|
||||
- Success confirmations
|
||||
- Responsive design
|
||||
|
||||
✅ **TypeScript**
|
||||
|
||||
- Full type safety
|
||||
- IntelliSense support
|
||||
- Type definitions included
|
||||
@@ -151,22 +166,26 @@ import { OTPVerifyForm } from '@/components/auth/otp-verify-form'
|
||||
## Quick Start
|
||||
|
||||
### 1. Install Dependencies
|
||||
|
||||
```bash
|
||||
npm install @supabase/supabase-js @supabase/ssr
|
||||
```
|
||||
|
||||
### 2. Set Environment Variables
|
||||
|
||||
```env
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-project-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
```
|
||||
|
||||
### 3. Configure Supabase
|
||||
|
||||
- Add redirect URLs in Dashboard
|
||||
- Configure email template
|
||||
- Enable email authentication
|
||||
|
||||
### 4. Add Component
|
||||
|
||||
```tsx
|
||||
import { PasswordlessLoginForm } from '@/components/auth/passwordless-login-form'
|
||||
|
||||
@@ -223,53 +242,57 @@ Do you need passwordless auth?
|
||||
|
||||
## Common Use Cases
|
||||
|
||||
| Use Case | Recommended Component | Documentation |
|
||||
|----------|----------------------|---------------|
|
||||
| Simple login | `PasswordlessLoginForm` | GETTING_STARTED.md |
|
||||
| E-commerce | `MagicLinkForm` | INTEGRATION_EXAMPLES.md |
|
||||
| Mobile app | `OTPRequestForm` + `OTPVerifyForm` | USAGE.md |
|
||||
| SaaS platform | `PasswordlessLoginForm` | INTEGRATION_EXAMPLES.md |
|
||||
| Blog comments | `MagicLinkForm` | INTEGRATION_EXAMPLES.md |
|
||||
| Admin panel | `OTPRequestForm` + `OTPVerifyForm` | USAGE.md |
|
||||
| Use Case | Recommended Component | Documentation |
|
||||
| ------------- | ---------------------------------- | ----------------------- |
|
||||
| Simple login | `PasswordlessLoginForm` | GETTING_STARTED.md |
|
||||
| E-commerce | `MagicLinkForm` | INTEGRATION_EXAMPLES.md |
|
||||
| Mobile app | `OTPRequestForm` + `OTPVerifyForm` | USAGE.md |
|
||||
| SaaS platform | `PasswordlessLoginForm` | INTEGRATION_EXAMPLES.md |
|
||||
| Blog comments | `MagicLinkForm` | INTEGRATION_EXAMPLES.md |
|
||||
| Admin panel | `OTPRequestForm` + `OTPVerifyForm` | USAGE.md |
|
||||
|
||||
## Configuration Matrix
|
||||
|
||||
| Feature | MagicLinkForm | OTPRequestForm + OTPVerifyForm | PasswordlessLoginForm |
|
||||
|---------|---------------|--------------------------------|----------------------|
|
||||
| One-click login | ✅ | ❌ | ✅ (with `method="magic-link"`) |
|
||||
| Code entry | ❌ | ✅ | ✅ (with `method="otp"`) |
|
||||
| Method selection | Fixed | Fixed | Via prop |
|
||||
| Email template changes | Optional | Required | Depends on method |
|
||||
| Pages needed | 1 | 2 | 1 |
|
||||
| Complexity | Low | Medium | Low |
|
||||
| Feature | MagicLinkForm | OTPRequestForm + OTPVerifyForm | PasswordlessLoginForm |
|
||||
| ---------------------- | ------------- | ------------------------------ | ------------------------------- |
|
||||
| One-click login | ✅ | ❌ | ✅ (with `method="magic-link"`) |
|
||||
| Code entry | ❌ | ✅ | ✅ (with `method="otp"`) |
|
||||
| Method selection | Fixed | Fixed | Via prop |
|
||||
| Email template changes | Optional | Required | Depends on method |
|
||||
| Pages needed | 1 | 2 | 1 |
|
||||
| Complexity | Low | Medium | Low |
|
||||
|
||||
## Support
|
||||
|
||||
### Documentation
|
||||
|
||||
- Start with **GETTING_STARTED.md** for setup
|
||||
- Use **QUICK_REFERENCE.md** for quick lookups
|
||||
- Read **USAGE.md** for detailed usage
|
||||
- Check **INTEGRATION_EXAMPLES.md** for real-world patterns
|
||||
|
||||
### External Resources
|
||||
|
||||
- [Supabase Auth Docs](https://supabase.com/docs/guides/auth)
|
||||
- [Next.js Documentation](https://nextjs.org/docs)
|
||||
- [Supabase Discord](https://discord.supabase.com)
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
See the Troubleshooting sections in:
|
||||
|
||||
- GETTING_STARTED.md (setup issues)
|
||||
- USAGE.md (usage issues)
|
||||
- QUICK_REFERENCE.md (error messages)
|
||||
|
||||
## Version Compatibility
|
||||
|
||||
| Package | Version |
|
||||
|---------|---------|
|
||||
| Next.js | 13.x, 14.x, 15.x |
|
||||
| React | 18.x |
|
||||
| @supabase/supabase-js | 2.x |
|
||||
| @supabase/ssr | 0.x |
|
||||
| Package | Version |
|
||||
| --------------------- | ---------------- |
|
||||
| Next.js | 13.x, 14.x, 15.x |
|
||||
| React | 18.x |
|
||||
| @supabase/supabase-js | 2.x |
|
||||
| @supabase/ssr | 0.x |
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -63,6 +63,7 @@ export default function LoginPage() {
|
||||
```
|
||||
|
||||
**Props:**
|
||||
|
||||
- `method?: 'magic-link' | 'otp'` - Authentication method (default: `'magic-link'`)
|
||||
|
||||
**Examples:**
|
||||
|
||||
@@ -172,14 +172,7 @@ export interface FileRouteTypes {
|
||||
| '/auth/confirm'
|
||||
| '/auth/error'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
| '/'
|
||||
| ''
|
||||
| '/passwordless'
|
||||
| '/verify-otp'
|
||||
| '/protected'
|
||||
| '/auth/confirm'
|
||||
| '/auth/error'
|
||||
to: '/' | '' | '/passwordless' | '/verify-otp' | '/protected' | '/auth/confirm' | '/auth/error'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
|
||||
Reference in new issue
Block a user