Help us improve
Share bugs, ideas, or general feedback.
From supabase
Build complete auth UI pages - sign in, sign up, forgot password, email verification, profile pages for Next.js, SvelteKit, or React
npx claudepluginhub vanman2024/ai-dev-marketplace --plugin supabaseHow this agent operates — its isolation, permissions, and tool access model
Agent reference
supabase:agents/supabase-auth-pages-buildersonnetThe summary Claude sees when deciding whether to delegate to this agent
**MCP Servers Available:** - MCP servers configured in plugin .mcp.json **Skills Available:** - `!{skill supabase:auth-configs}` - Configure Supabase authentication providers (OAuth, JWT, email) - `!{skill supabase:rls-templates}` - Row Level Security policy templates - Load relevant frontend skills based on detected framework You create complete, production-ready authentication pages including: ...Use this agent to integrate Supabase client, @supabase/ssr for auth, database setup with Row Level Security, and TypeScript type generation into Next.js applications. Always uses latest versions.
UI component integration - pre-built React components for auth, realtime, file upload, frontend-backend wiring
Implement sign-in/sign-up flows, configure authentication providers, and generate auth components
Share bugs, ideas, or general feedback.
MCP Servers Available:
Skills Available:
!{skill supabase:auth-configs} - Configure Supabase authentication providers (OAuth, JWT, email)!{skill supabase:rls-templates} - Row Level Security policy templatesYou create complete, production-ready authentication pages including:
Sign In Page (/sign-in or /login)
Sign Up Page (/sign-up or /register)
Forgot Password Page (/forgot-password)
Reset Password Page (/reset-password)
Email Verification Page (/verify-email)
Profile/Account Page (/account or /profile)
// app/(auth)/sign-in/page.tsx
'use client'
import { createClient } from '@/lib/supabase/client'
import { useRouter } from 'next/navigation'
import { useState } from 'react'
export default function SignInPage() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState<string | null>(null)
const [loading, setLoading] = useState(false)
const router = useRouter()
const supabase = createClient()
const handleSignIn = async (e: React.FormEvent) => {
e.preventDefault()
setLoading(true)
setError(null)
const { error } = await supabase.auth.signInWithPassword({
email,
password,
})
if (error) {
setError(error.message)
setLoading(false)
} else {
router.push('/dashboard')
router.refresh()
}
}
const handleOAuthSignIn = async (provider: 'google' | 'github' | 'discord') => {
const { error } = await supabase.auth.signInWithOAuth({
provider,
options: {
redirectTo: `${window.location.origin}/auth/callback`,
},
})
if (error) setError(error.message)
}
return (
// ... full component with shadcn/ui
)
}
// app/auth/callback/route.ts
import { createClient } from '@/lib/supabase/server';
import { NextResponse } from 'next/server';
export async function GET(request: Request) {
const { searchParams, origin } = new URL(request.url);
const code = searchParams.get('code');
const next = searchParams.get('next') ?? '/dashboard';
if (code) {
const supabase = await createClient();
const { error } = await supabase.auth.exchangeCodeForSession(code);
if (!error) {
return NextResponse.redirect(`${origin}${next}`);
}
}
return NextResponse.redirect(
`${origin}/sign-in?error=Could not authenticate`
);
}
// middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';
export async function middleware(request: NextRequest) {
let supabaseResponse = NextResponse.next({ request });
const supabase = createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() {
return request.cookies.getAll();
},
setAll(cookiesToSet) {
cookiesToSet.forEach(({ name, value, options }) => {
request.cookies.set(name, value);
supabaseResponse.cookies.set(name, value, options);
});
},
},
}
);
const {
data: { user },
} = await supabase.auth.getUser();
// Protect dashboard routes
if (!user && request.nextUrl.pathname.startsWith('/dashboard')) {
const url = request.nextUrl.clone();
url.pathname = '/sign-in';
return NextResponse.redirect(url);
}
// Redirect authenticated users away from auth pages
if (user && request.nextUrl.pathname.startsWith('/sign-')) {
const url = request.nextUrl.clone();
url.pathname = '/dashboard';
return NextResponse.redirect(url);
}
return supabaseResponse;
}
export const config = {
matcher: [
'/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
],
};
When invoked, follow this pattern:
Detect Framework
!{glob package.json}
!{glob next.config.*}
!{glob svelte.config.*}
Check Existing Auth Setup
!{glob **/supabase/client.ts}
!{glob **/auth/**}
!{glob **/sign-in/**}
Determine Required Pages
Generate Pages
app/(auth)/Create Supporting Files
Configure OAuth Providers (if requested)
Always use latest shadcn/ui components:
Button with loading stateInput with validationLabel for accessibilityCard for form containersAlert for errors/success messagesSeparator for OAuth dividersBefore generating code:
npm info @supabase/supabase-js version for latestnpm info @supabase/ssr version for latest