Initial commit from template
This commit is contained in:
152
.claude/skills/supabase-auth/SKILL.md
Normal file
152
.claude/skills/supabase-auth/SKILL.md
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
name: supabase-auth
|
||||
description: Supabase Authentication Setup und User Management. Nutze diesen Skill fuer Login, Signup, OAuth, Sessions, Password Reset und geschuetzte Routen. Aktiviert bei Begriffen wie "Login", "Anmeldung", "Registrierung", "Signup", "Auth", "Authentication", "User", "Benutzer", "Session", "Passwort", "OAuth", "Google Login", "geschuetzt", "protected route".
|
||||
---
|
||||
|
||||
# Supabase Authentication Skill
|
||||
|
||||
Dieser Skill hilft bei Authentication mit Supabase.
|
||||
|
||||
## Auth Client Setup
|
||||
|
||||
```typescript
|
||||
// lib/supabase.ts - Browser Client
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
|
||||
export const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
);
|
||||
|
||||
// lib/supabase-admin.ts - Server Client
|
||||
export const supabaseAdmin = createClient(
|
||||
process.env.SUPABASE_URL!,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY!,
|
||||
{
|
||||
auth: {
|
||||
autoRefreshToken: false,
|
||||
persistSession: false
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Sign Up / Sign In
|
||||
|
||||
```typescript
|
||||
// Email/Password Signup
|
||||
const { data, error } = await supabase.auth.signUp({
|
||||
email: 'user@example.com',
|
||||
password: 'secure-password',
|
||||
options: {
|
||||
data: { full_name: 'Max Mustermann' }
|
||||
}
|
||||
});
|
||||
|
||||
// Email/Password Login
|
||||
const { data, error } = await supabase.auth.signInWithPassword({
|
||||
email: 'user@example.com',
|
||||
password: 'password'
|
||||
});
|
||||
|
||||
// Magic Link
|
||||
const { error } = await supabase.auth.signInWithOtp({
|
||||
email: 'user@example.com',
|
||||
options: {
|
||||
emailRedirectTo: `${window.location.origin}/auth/callback`
|
||||
}
|
||||
});
|
||||
|
||||
// OAuth (Google, GitHub, etc.)
|
||||
const { error } = await supabase.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
options: {
|
||||
redirectTo: `${window.location.origin}/auth/callback`
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Session Management
|
||||
|
||||
```typescript
|
||||
// Aktuelle Session
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
|
||||
// Aktueller User
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
|
||||
// Auth State Listener
|
||||
supabase.auth.onAuthStateChange((event, session) => {
|
||||
console.log(event, session);
|
||||
});
|
||||
|
||||
// Logout
|
||||
await supabase.auth.signOut();
|
||||
```
|
||||
|
||||
## Password Reset
|
||||
|
||||
```typescript
|
||||
// Reset anfordern
|
||||
const { error } = await supabase.auth.resetPasswordForEmail(email, {
|
||||
redirectTo: `${window.location.origin}/auth/reset-password`
|
||||
});
|
||||
|
||||
// Neues Passwort setzen
|
||||
const { error } = await supabase.auth.updateUser({
|
||||
password: 'new-password'
|
||||
});
|
||||
```
|
||||
|
||||
## Middleware (Protected Routes)
|
||||
|
||||
```typescript
|
||||
// middleware.ts
|
||||
import { createServerClient } from '@supabase/ssr';
|
||||
import { NextResponse, type NextRequest } from 'next/server';
|
||||
|
||||
export async function middleware(request: NextRequest) {
|
||||
let response = NextResponse.next({ request });
|
||||
|
||||
const supabase = createServerClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
||||
{
|
||||
cookies: {
|
||||
get: (name) => request.cookies.get(name)?.value,
|
||||
set: (name, value, options) => {
|
||||
response.cookies.set({ name, value, ...options });
|
||||
},
|
||||
remove: (name, options) => {
|
||||
response.cookies.set({ name, value: '', ...options });
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
|
||||
// Redirect wenn nicht eingeloggt
|
||||
if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
|
||||
return NextResponse.redirect(new URL('/login', request.url));
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ['/dashboard/:path*', '/api/protected/:path*']
|
||||
};
|
||||
```
|
||||
|
||||
## Auth Context
|
||||
|
||||
Siehe `templates/AuthContext.tsx` fuer einen kompletten Auth Provider.
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. SSR Auth mit @supabase/ssr
|
||||
2. Middleware fuer Route Protection
|
||||
3. Service Role Key nur serverseitig
|
||||
4. User-freundliche Fehlermeldungen
|
||||
5. Email Verification aktivieren
|
||||
Reference in New Issue
Block a user