How to Migrate from Supabase Auth Helpers to SSR package

1
2
npm uninstall @supabase/auth-helpers-nextjs @supabase/supabase-jsnpm install @supabase/ssr @supabase/supabase-js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// utils/supabase/client.tsimport { createBrowserClient } from '@supabase/ssr';export function createClient() {  return createBrowserClient(    process.env.NEXT_PUBLIC_SUPABASE_URL!,    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!  );}// utils/supabase/server.tsimport { createServerClient, type CookieOptions } from '@supabase/ssr';import { cookies } from 'next/headers';export function createClient() {  const cookieStore = cookies();  return createServerClient(    process.env.NEXT_PUBLIC_SUPABASE_URL!,    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,    {      cookies: {        getAll() {          return cookieStore.getAll()        },        setAll(cookiesToSet) {          try {            cookiesToSet.forEach(({ name, value, options }) =>              cookieStore.set(name, value, options)            )          } catch {            // The `setAll` method was called from a Server Component.            // This can be ignored if you have middleware refreshing            // user sessions.          }        },      },    }  );}// utils/supabase/middleware.tsimport { createServerClient } from '@supabase/ssr';import { NextResponse, type NextRequest } from 'next/server';export async function updateSession(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 = NextResponse.next({            request,          })          cookiesToSet.forEach(({ name, value, options }) =>            supabaseResponse.cookies.set(name, value, options)          )        },      },    }  );  // IMPORTANT: Avoid writing any logic between createServerClient and  // supabase.auth.getUser(). A simple mistake could make it very hard to debug  // issues with users being randomly logged out.  const {    data: { user },  } = await supabase.auth.getUser();  if (    !user &&    !request.nextUrl.pathname.startsWith('/login') &&    !request.nextUrl.pathname.startsWith('/auth')  ) {    // no user, potentially respond by redirecting the user to the login page    const url = request.nextUrl.clone();    url.pathname = '/login';    return NextResponse.redirect(url);  }  // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're  // creating a new response object with NextResponse.next() make sure to:  // 1. Pass the request in it, like so:  //    const myNewResponse = NextResponse.next({ request })  // 2. Copy over the cookies, like so:  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())  // 3. Change the myNewResponse object to fit your needs, but avoid changing  //    the cookies!  // 4. Finally:  //    return myNewResponse  // If this is not done, you may be causing the browser and server to go out  // of sync and terminate the user's session prematurely!  return supabaseResponse;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// middleware.tsimport { type NextRequest } from 'next/server';import { updateSession } from '@/utils/supabase/middleware';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)$).*)',  ],};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// app/login/actions.ts'use server';import { revalidatePath } from 'next/cache';import { redirect } from 'next/navigation';import { createClient } from '@/utils/supabase/server';export async function login(formData: FormData) {  const supabase = createClient();  // type-casting here for convenience  // in practice, you should validate your inputs  const data = {    email: formData.get('email') as string,    password: formData.get('password') as string,  };  const { error } = await supabase.auth.signInWithPassword(data)  if (error) {    redirect('/error');  }  revalidatePath('/', 'layout');  redirect('/');}export async function signup(formData: FormData) {  const supabase = createClient();  // type-casting here for convenience  // in practice, you should validate your inputs  const data = {    email: formData.get('email') as string,    password: formData.get('password') as string,  };  const { error } = await supabase.auth.signUp(data);  if (error) {    redirect('/error');  }  revalidatePath('/', 'layout');  redirect('/');}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/login/page.tsximport { login, signup } from './actions';export default function LoginPage() {  return (    <form>      <label htmlFor="email">Email:</label>      <input id="email" name="email" type="email" required />      <label htmlFor="password">Password:</label>      <input id="password" name="password" type="password" required />      <button formAction={login}>Log in</button>      <button formAction={signup}>Sign up</button>    </form>  );}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use client';// replace this lineimport { createClientComponentClient } from '@supabase/auth-helpers-nextjs';// withimport { createClient } from '@/utils/supabase/client';export default async function Page() {	// replace this line	const supabase = createClientComponentClient<Database>();	// with	const supabase = createClient();	return...}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// replaceimport { cookies } from 'next/headers';import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';// withimport { createClient } from '@/utils/supabase/server';export default async function Page() {	// replace	const cookieStore = cookies();	const supabase = createServerComponentClient<Database>({		cookies: () => cookieStore	});	// with	const supabase = createClient();	return...}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// replaceimport { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';import { cookies } from 'next/headers';// withimport { createClient } from '@/utils/supabase/server';export async function POST(request: Request) {	// replace	const supabase = createRouteHandlerClient<Database>({    cookies: () => cookieStore,  });  // with  const supabase = createClient();  return...}