[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 0%; --card: 0 0% 100%; --card-foreground: 0 0% 0%; --popover: 0 0% 100%; --popover-foreground: 0 0% 0%; --primary: 0 0% 0%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 20%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --accent: 0 0% 96%; --accent-foreground: 0 0% 20%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 0 0% 0%; --radius: 0.5rem; } .dark { --background: 0 0% 10%; --foreground: 0 0% 98%; --card: 0 0% 10%; --card-foreground: 0 0% 98%; --popover: 0 0% 10%; --popover-foreground: 0 0% 98%; --primary: 0 0% 100%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 15%; --muted-foreground: 0 0% 65%; --accent: 0 0% 15%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 0 0% 100%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescript:file="lib/supabase/client.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { createClientComponentClient } from "@supabase/auth-helpers-nextjs" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 // Create a singleton instance of the Supabase client for Client Components export const supabase = createClientComponentClient() [V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist } from "next/font/google" import "./globals.css" const geist = Geist({ subsets: ["latin"], }) export const metadata: Metadata = { title: "Supabase Auth with SSR", description: "A Next.js application with Supabase authentication using SSR", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/signup-form.tsx" isEdit="true" isMerged="true" "use client" import { useActionState } from "react" import { useFormStatus } from "react-dom" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2 } from "lucide-react" import Link from "next/link" import { signUp } from "@/lib/actions" function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function SignUpForm() { // Initialize with null as the initial state const [state, formAction] = useActionState(signUp, null) return (

Create an account

) } [V0_FILE]typescriptreact:file="components/login-form.tsx" isEdit="true" isMerged="true" "use client" import { useActionState } from "react" import { useFormStatus } from "react-dom" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2 } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { useEffect } from "react" import { signIn } from "@/lib/actions" function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function LoginForm() { const router = useRouter() const [state, formAction] = useActionState(signIn, null) // Handle successful login by redirecting useEffect(() => { if (state?.success) { router.push("/") } }, [state, router]) return (

Welcome back

) } [V0_FILE]typescript:file="middleware.ts" isEdit="true" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true" import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs" import { NextResponse, type NextRequest } from "next/server" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 export async function updateSession(request: NextRequest) { // If Supabase is not configured, just continue without auth if (!isSupabaseConfigured) { return NextResponse.next({ request, }) } const res = NextResponse.next() // Create a Supabase client configured to use cookies const supabase = createMiddlewareClient({ req: request, res }) // Check if this is an auth callback const requestUrl = new URL(request.url) const code = requestUrl.searchParams.get("code") if (code) { // Exchange the code for a session await supabase.auth.exchangeCodeForSession(code) // Redirect to home page after successful auth return NextResponse.redirect(new URL("/", request.url)) } // Refresh session if expired - required for Server Components await supabase.auth.getSession() // Protected routes - redirect to login if not authenticated const isAuthRoute = request.nextUrl.pathname.startsWith("/auth/login") || request.nextUrl.pathname.startsWith("/auth/sign-up") || request.nextUrl.pathname === "/auth/callback" if (!isAuthRoute) { const { data: { session }, } = await supabase.auth.getSession() if (!session) { const redirectUrl = new URL("/auth/login", request.url) return NextResponse.redirect(redirectUrl) } } return res } [V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true" import { createServerComponentClient } from "@supabase/auth-helpers-nextjs" import { cookies } from "next/headers" import { cache } from "react" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 // Create a cached version of the Supabase client for Server Components export const createClient = cache(() => { const cookieStore = cookies() if (!isSupabaseConfigured) { console.warn("Supabase environment variables are not set. Using dummy client.") return { auth: { getUser: () => Promise.resolve({ data: { user: null }, error: null }), getSession: () => Promise.resolve({ data: { session: null }, error: null }), }, } } return createServerComponentClient({ cookies: () => cookieStore }) }) [V0_FILE]typescript:file="lib/actions.ts" isEdit="true" isMerged="true" "use server" import { createServerActionClient } from "@supabase/auth-helpers-nextjs" import { cookies } from "next/headers" import { redirect } from "next/navigation" // Update the signIn function to handle redirects properly export async function signIn(prevState: any, formData: FormData) { // Check if formData is valid if (!formData) { return { error: "Form data is missing" } } const email = formData.get("email") const password = formData.get("password") // Validate required fields if (!email || !password) { return { error: "Email and password are required" } } const cookieStore = cookies() const supabase = createServerActionClient({ cookies: () => cookieStore }) try { const { error } = await supabase.auth.signInWithPassword({ email: email.toString(), password: password.toString(), }) if (error) { return { error: error.message } } // Return success instead of redirecting directly return { success: true } } catch (error) { console.error("Login error:", error) return { error: "An unexpected error occurred. Please try again." } } } // Update the signUp function to handle potential null formData export async function signUp(prevState: any, formData: FormData) { // Check if formData is valid if (!formData) { return { error: "Form data is missing" } } const email = formData.get("email") const password = formData.get("password") // Validate required fields if (!email || !password) { return { error: "Email and password are required" } } const cookieStore = cookies() const supabase = createServerActionClient({ cookies: () => cookieStore }) try { const { error } = await supabase.auth.signUp({ email: email.toString(), password: password.toString(), }) if (error) { return { error: error.message } } return { success: "Check your email to confirm your account." } } catch (error) { console.error("Sign up error:", error) return { error: "An unexpected error occurred. Please try again." } } } export async function signOut() { const cookieStore = cookies() const supabase = createServerActionClient({ cookies: () => cookieStore }) await supabase.auth.signOut() redirect("/auth/login") } [V0_FILE]typescript:file="app/page.tsx" isEdit="true" import { createClient, isSupabaseConfigured } from "@/lib/supabase/server" import { redirect } from "next/navigation" import { Button } from "@/components/ui/button" import { LogOut } from "lucide-react" import { signOut } from "@/lib/actions" export default async function Home() { // If Supabase is not configured, show setup message directly if (!isSupabaseConfigured) { return (

Connect Supabase to get started

) } // Get the user from the server const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() // If no user, redirect to login if (!user) { redirect("/auth/login") } return (

Hello {user.email}

) } [V0_FILE]typescript:file="app/auth/login/page.tsx" isEdit="true" import { createClient, isSupabaseConfigured } from "@/lib/supabase/server" import { redirect } from "next/navigation" import LoginForm from "@/components/login-form" export default async function LoginPage() { // If Supabase is not configured, show setup message directly if (!isSupabaseConfigured) { return (

Connect Supabase to get started

) } // Check if user is already logged in const supabase = createClient() const { data: { session }, } = await supabase.auth.getSession() // If user is logged in, redirect to home page if (session) { redirect("/") } return (

) } [V0_FILE]typescript:file="app/auth/sign-up/page.tsx" isEdit="true" import { createClient, isSupabaseConfigured } from "@/lib/supabase/server" import { redirect } from "next/navigation" import SignUpForm from "@/components/signup-form" export default async function SignUpPage() { // If Supabase is not configured, show setup message directly if (!isSupabaseConfigured) { return (

Connect Supabase to get started

) } [V0_FILE]typescriptreact:file="components/setup.tsx" isDeleted="true" isFixed="true" isEdit="true" isQuickEdit="true" import { AlertCircle } from 'lucide-react' export default function SetupMessage() { return (

Connect Supabase to get started

To use the features of this app, you need to connect to your Supabase project.

) }

About

About