From 652c4288e6b4ff671232dc8a511366d0f0bfc8b4 Mon Sep 17 00:00:00 2001 From: Charis <26616127+charislam@users.noreply.github.com> Date: Wed, 30 Oct 2024 10:13:57 -0400 Subject: [PATCH] chore(docs): update examples for nextjs 15 breaking changes cookies() is now asynchronous --- .../getting-started/tutorials/with-nextjs.mdx | 6 ++-- .../auth/nextjs/app/auth/callback/route.ts | 18 +++++------ examples/auth/nextjs/app/login/actions.tsx | 32 +++++++++---------- examples/auth/nextjs/app/protected/page.tsx | 25 +++++++-------- .../auth/nextjs/components/AuthButton.tsx | 22 ++++++------- examples/auth/nextjs/utils/supabase/server.ts | 8 ++--- .../app/auth/callback/route.ts | 16 +++++----- .../app/login/page.tsx | 4 +-- .../components/AuthButton.tsx | 24 +++++++------- .../utils/supabase/server.ts | 20 ++++++------ .../app/account/page.tsx | 4 +-- .../app/auth/confirm/route.ts | 4 +-- .../app/auth/signout/route.ts | 4 +-- .../app/login/actions.ts | 6 ++-- .../utils/supabase/server.ts | 6 ++-- 15 files changed, 99 insertions(+), 100 deletions(-) diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx index 02d0c09579..d43d01b8ab 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx @@ -118,8 +118,8 @@ export function createClient() { import { createServerClient } from '@supabase/ssr' import { cookies } from 'next/headers' -export function createClient() { - const cookieStore = cookies() +export async function createClient() { + const cookieStore = await cookies() // Create a server's supabase client with newly configured cookie, // which could be used to maintain user's session @@ -763,7 +763,7 @@ import { revalidatePath } from 'next/cache' import { NextResponse } from 'next/server' export async function POST(req) { - const supabase = createClient() + const supabase = await createClient() // Check if a user's logged in const { diff --git a/examples/auth/nextjs/app/auth/callback/route.ts b/examples/auth/nextjs/app/auth/callback/route.ts index 414260825c..184faa36d7 100644 --- a/examples/auth/nextjs/app/auth/callback/route.ts +++ b/examples/auth/nextjs/app/auth/callback/route.ts @@ -1,16 +1,16 @@ -import { type EmailOtpType } from "@supabase/supabase-js" -import { type NextRequest, NextResponse } from "next/server" -import { createClient } from "@/utils/supabase/server" -import { redirect } from "next/navigation" +import { type EmailOtpType } from '@supabase/supabase-js' +import { type NextRequest, NextResponse } from 'next/server' +import { createClient } from '@/utils/supabase/server' +import { redirect } from 'next/navigation' export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url) - const token_hash = searchParams.get("token_hash") - const type = searchParams.get("type") as EmailOtpType | null - const next = searchParams.get("next") ?? "/" + const token_hash = searchParams.get('token_hash') + const type = searchParams.get('type') as EmailOtpType | null + const next = searchParams.get('next') ?? '/' if (token_hash && type) { - const supabase = createClient() + const supabase = await createClient() const { error } = await supabase.auth.verifyOtp({ type, @@ -23,5 +23,5 @@ export async function GET(request: NextRequest) { } // redirect the user to an error page with some instructions - redirect("/error") + redirect('/error') } diff --git a/examples/auth/nextjs/app/login/actions.tsx b/examples/auth/nextjs/app/login/actions.tsx index 437c56d05e..763964aae6 100644 --- a/examples/auth/nextjs/app/login/actions.tsx +++ b/examples/auth/nextjs/app/login/actions.tsx @@ -1,45 +1,45 @@ -"use server" +'use server' -import { revalidatePath } from "next/cache" -import { redirect } from "next/navigation" -import { createClient } from "@/utils/supabase/server" +import { revalidatePath } from 'next/cache' +import { redirect } from 'next/navigation' +import { createClient } from '@/utils/supabase/server' export async function signIn(formData: FormData) { - const supabase = createClient() + const supabase = await 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, + email: formData.get('email') as string, + password: formData.get('password') as string, } const { error } = await supabase.auth.signInWithPassword(data) if (error) { - redirect("/error") + redirect('/error') } - revalidatePath("/", "layout") - redirect("/") + revalidatePath('/', 'layout') + redirect('/') } export async function signUp(formData: FormData) { - const supabase = createClient() + const supabase = await 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, + email: formData.get('email') as string, + password: formData.get('password') as string, } const { error } = await supabase.auth.signUp(data) if (error) { - redirect("/error") + redirect('/error') } - revalidatePath("/", "layout") - redirect("/") + revalidatePath('/', 'layout') + redirect('/') } diff --git a/examples/auth/nextjs/app/protected/page.tsx b/examples/auth/nextjs/app/protected/page.tsx index 1d73e55118..9ad6ca81e2 100644 --- a/examples/auth/nextjs/app/protected/page.tsx +++ b/examples/auth/nextjs/app/protected/page.tsx @@ -1,27 +1,26 @@ -import DeployButton from "@/components/DeployButton"; -import AuthButton from "@/components/AuthButton"; -import { createClient } from "@/utils/supabase/server"; -import FetchDataSteps from "@/components/tutorial/FetchDataSteps"; -import Header from "@/components/Header"; -import { redirect } from "next/navigation"; +import DeployButton from '@/components/DeployButton' +import AuthButton from '@/components/AuthButton' +import { createClient } from '@/utils/supabase/server' +import FetchDataSteps from '@/components/tutorial/FetchDataSteps' +import Header from '@/components/Header' +import { redirect } from 'next/navigation' export default async function ProtectedPage() { - const supabase = createClient(); + const supabase = await createClient() const { data: { user }, - } = await supabase.auth.getUser(); + } = await supabase.auth.getUser() if (!user) { - return redirect("/login"); + return redirect('/login') } return (
- This is a protected page that you can only see as an authenticated - user + This is a protected page that you can only see as an authenticated user