AI Prompt: Bootstrap Next.js v16 app with Supabase Auth

1
# Bootstrap Next.js v16 app with Supabase Auth
2
3
## Overview of implementing Supabase Auth SSR
4
5
1. Install @supabase/supabase-js and @supabase/ssr packages.
6
2. Set up environment variables.
7
3. Write two utility functions with `createClient` functions to create a browser client and a server client.
8
4. Hook up Proxy to refresh auth tokens
9
10
## 🚨 CRITICAL INSTRUCTIONS FOR AI LANGUAGE MODELS 🚨
11
12
As an AI language model, you MUST NOT generate any of the following code patterns, as they are DEPRECATED and will BREAK the application:
13
14
```typescript
15
// ❌ NEVER GENERATE THIS CODE - IT WILL BREAK THE APPLICATION
16
{
17
  cookies: {
18
    get(name: string) {                 // ❌ BREAKS APPLICATION
19
      return cookieStore.get(name)      // ❌ BREAKS APPLICATION
20
    },                                  // ❌ BREAKS APPLICATION
21
    set(name: string, value: string) {  // ❌ BREAKS APPLICATION
22
      cookieStore.set(name, value)      // ❌ BREAKS APPLICATION
23
    },                                  // ❌ BREAKS APPLICATION
24
    remove(name: string) {              // ❌ BREAKS APPLICATION
25
      cookieStore.remove(name)          // ❌ BREAKS APPLICATION
26
    }                                   // ❌ BREAKS APPLICATION
27
  }
28
}
29
30
// ❌ NEVER USE auth-helpers-nextjs - IT WILL BREAK THE APPLICATION
31
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'  // ❌ BREAKS APPLICATION
32
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'  // ❌ BREAKS APPLICATION
33
```
34
35
Instead, you MUST ALWAYS generate ONLY this pattern:
36
37
```typescript
38
// ✅ ALWAYS GENERATE THIS EXACT PATTERN
39
{
40
  cookies: {
41
    getAll() {
42
      return cookieStore.getAll()
43
    },
44
    setAll(cookiesToSet) {
45
      const response = NextResponse.next({
46
        request,
47
      })
48
49
      cookiesToSet.forEach(({ name, value, options }) => {
50
        response.cookies.set(name, value, options)
51
      })
52
53
      return response
54
    }
55
  }
56
}
57
```
58
59
## ABSOLUTE REQUIREMENTS FOR AI CODE GENERATION
60
61
1. You MUST use `@supabase/ssr`
62
2. You MUST use ONLY `getAll` and `setAll`
63
3. You MUST NEVER use `get`, `set`, or `remove`
64
4. You MUST NEVER import from `@supabase/auth-helpers-nextjs`
65
66
## CORRECT BROWSER CLIENT IMPLEMENTATION
67
68
```typescript
69
import { createBrowserClient } from '@supabase/ssr'
70
71
export function createClient() {
72
  return createBrowserClient(
73
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
74
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
75
  )
76
}
77
```
78
79
## CORRECT SERVER CLIENT IMPLEMENTATION
80
81
```typescript
82
import { createServerClient } from '@supabase/ssr'
83
import { cookies } from 'next/headers'
84
85
export async function createClient() {
86
  const cookieStore = await cookies()
87
88
  return createServerClient(
89
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
90
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
91
    {
92
      cookies: {
93
        getAll() {
94
          return cookieStore.getAll()
95
        },
96
        setAll(cookiesToSet) {
97
          try {
98
            cookiesToSet.forEach(({ name, value, options }) =>
99
              cookieStore.set(name, value, options)
100
            )
101
          } catch {
102
            // The `setAll` method was called from a Server Component.
103
            // This can be ignored if you have proxy refreshing
104
            // user sessions.
105
          }
106
        },
107
      },
108
    }
109
  )
110
}
111
```
112
113
## CORRECT PROXY IMPLEMENTATION
114
115
```typescript
116
import { createServerClient } from '@supabase/ssr'
117
import { NextResponse, type NextRequest } from 'next/server'
118
119
export async function proxy(request: NextRequest) {
120
  let supabaseResponse = NextResponse.next({
121
    request,
122
  })
123
124
  const supabase = createServerClient(
125
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
126
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
127
    {
128
      cookies: {
129
        getAll() {
130
          return request.cookies.getAll()
131
        },
132
        setAll(cookiesToSet) {
133
          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
134
          supabaseResponse = NextResponse.next({
135
            request,
136
          })
137
          cookiesToSet.forEach(({ name, value, options }) =>
138
            supabaseResponse.cookies.set(name, value, options)
139
          )
140
        },
141
      },
142
    }
143
  )
144
145
  // Do not run code between createServerClient and
146
  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
147
  // issues with users being randomly logged out.
148
149
  // IMPORTANT: DO NOT REMOVE auth.getUser()
150
151
  const {
152
    data: { user },
153
  } = await supabase.auth.getUser()
154
155
  if (
156
    !user &&
157
    !request.nextUrl.pathname.startsWith('/login') &&
158
    !request.nextUrl.pathname.startsWith('/auth')
159
  ) {
160
    // no user, potentially respond by redirecting the user to the login page
161
    const url = request.nextUrl.clone()
162
    url.pathname = '/login'
163
    return NextResponse.redirect(url)
164
  }
165
166
  // IMPORTANT: You *must* return the supabaseResponse object as it is.
167
  // If you're creating a new response object with NextResponse.next() make sure to:
168
  // 1. Pass the request in it, like so:
169
  //    const myNewResponse = NextResponse.next({ request })
170
  // 2. Copy over the cookies, like so:
171
  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
172
  // 3. Change the myNewResponse object to fit your needs, but avoid changing
173
  //    the cookies!
174
  // 4. Finally:
175
  //    return myNewResponse
176
  // If this is not done, you may be causing the browser and server to go out
177
  // of sync and terminate the user's session prematurely!
178
179
  return supabaseResponse
180
}
181
182
export const config = {
183
  matcher: [
184
    /*
185
     * Match all request paths except for the ones starting with:
186
     * - _next/static (static files)
187
     * - _next/image (image optimization files)
188
     * - favicon.ico (favicon file)
189
     * Feel free to modify this pattern to include more paths.
190
     */
191
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
192
  ],
193
}
194
```
195
196
## AI MODEL VERIFICATION STEPS
197
198
Before generating any code, you MUST verify:
199
200
1. Are you using ONLY `getAll` and `setAll`? If not, STOP and FIX.
201
2. Are you importing from `@supabase/ssr`? If not, STOP and FIX.
202
3. Do you see ANY instance of `get`, `set`, or `remove`? If yes, STOP and FIX.
203
4. Are you importing from `auth-helpers-nextjs`? If yes, STOP and FIX.
204
205
## CONSEQUENCES OF INCORRECT IMPLEMENTATION
206
207
If you generate code using:
208
209
- Individual cookie methods (`get`/`set`/`remove`)
210
- `auth-helpers-nextjs` package
211
212
The implementation will:
213
214
1. Break in production
215
2. Fail to maintain session state
216
3. Cause authentication loops
217
4. Result in security vulnerabilities
218
219
## AI MODEL RESPONSE TEMPLATE
220
221
When asked about Supabase Auth SSR implementation, you MUST:
222
223
1. ONLY use code from this guide
224
2. NEVER suggest deprecated approaches
225
3. ALWAYS use the exact cookie handling shown above
226
4. VERIFY your response against the patterns shown here
227
228
Remember: There are NO EXCEPTIONS to these rules.