From bb0306061d63cee89ae2a64731c28f5ce94d706f Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Thu, 24 Oct 2024 12:56:20 -0230 Subject: [PATCH] Chore/update to next 15 (#30075) * Update Next.js docs for v15 * More awaiting * remove async for pages router * fix for dashboard connection guide --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> --- apps/docs/DEVELOPERS.md | 2 +- apps/docs/README.md | 2 +- apps/docs/components/MDX/oauth_pkce_flow.mdx | 2 +- .../docs/content/guides/auth/auth-helpers/nextjs.mdx | 4 ++-- apps/docs/content/guides/auth/passwords.mdx | 4 ++-- apps/docs/content/guides/auth/quickstarts/nextjs.mdx | 9 ++++++--- .../guides/auth/server-side/creating-a-client.mdx | 4 ++-- apps/docs/content/guides/auth/server-side/nextjs.mdx | 12 ++++++------ .../content/guides/auth/social-login/auth-google.mdx | 4 ++-- .../guides/getting-started/quickstarts/nextjs.mdx | 8 ++++---- .../guides/getting-started/tutorials/with-nextjs.mdx | 8 ++++---- .../content/nextjs/app/supabasejs/content.tsx | 2 +- 12 files changed, 32 insertions(+), 29 deletions(-) diff --git a/apps/docs/DEVELOPERS.md b/apps/docs/DEVELOPERS.md index ed8fa91080d..2d9f7cb3684 100644 --- a/apps/docs/DEVELOPERS.md +++ b/apps/docs/DEVELOPERS.md @@ -14,7 +14,7 @@ For a complete run-down on how all of our tools work together, see the main DEVE ## Local setup -[supabase.com/docs](https://supabase.com/docs) is a Next.JS site. You can get setup by following the same steps for all of our other Next.JS projects: +[supabase.com/docs](https://supabase.com/docs) is a Next.js site. You can get setup by following the same steps for all of our other Next.js projects: 1. Follow the steps outlined in the Local Development section of the main [DEVELOPERS.md](https://github.com/supabase/supabase/blob/master/DEVELOPERS.md) 2. If you work at Supabase, run `dev:secrets:pull` to pull down the internal environment variables. If you're a community member, create a `.env` file and add this line to it: `NEXT_PUBLIC_IS_PLATFORM=false` diff --git a/apps/docs/README.md b/apps/docs/README.md index c8a0cd91609..7803882d6c7 100644 --- a/apps/docs/README.md +++ b/apps/docs/README.md @@ -31,7 +31,7 @@ We use documentation specifications which can be used to generate human-readable - CLISpec (custom to Supabase): for CLI commands and usage. The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). -It also means that we can switch to any documentation system we want. On this site we use Next.JS, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool. +It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool. ## Contributing diff --git a/apps/docs/components/MDX/oauth_pkce_flow.mdx b/apps/docs/components/MDX/oauth_pkce_flow.mdx index f4bb7617a45..02beff87623 100644 --- a/apps/docs/components/MDX/oauth_pkce_flow.mdx +++ b/apps/docs/components/MDX/oauth_pkce_flow.mdx @@ -68,7 +68,7 @@ export async function GET(request: Request) { const next = searchParams.get('next') ?? '/' if (code) { - const supabase = createClient() + const supabase = await createClient() const { error } = await supabase.auth.exchangeCodeForSession(code) if (!error) { const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer diff --git a/apps/docs/content/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/content/guides/auth/auth-helpers/nextjs.mdx index b0f1f3cbd30..5b64c6a4f0e 100644 --- a/apps/docs/content/guides/auth/auth-helpers/nextjs.mdx +++ b/apps/docs/content/guides/auth/auth-helpers/nextjs.mdx @@ -20,7 +20,7 @@ The `auth-helpers` package has been replaced with the `@supabase/ssr` package. W size="medium" className="text-foreground-light border-b mt-8 pb-2" > - + ({ cookies: () => cookieStore }) await supabase.auth.exchangeCodeForSession(code) } diff --git a/apps/docs/content/guides/auth/passwords.mdx b/apps/docs/content/guides/auth/passwords.mdx index c671ac333dc..9d3d0f83bf1 100644 --- a/apps/docs/content/guides/auth/passwords.mdx +++ b/apps/docs/content/guides/auth/passwords.mdx @@ -184,7 +184,7 @@ export async function GET(request: NextRequest) { redirectTo.pathname = next if (token_hash && type) { - const supabase = createClient() + const supabase = await createClient() const { error } = await supabase.auth.verifyOtp({ type, @@ -648,7 +648,7 @@ export async function GET(request: NextRequest) { redirectTo.pathname = next if (token_hash && type) { - const supabase = createClient() + const supabase = await createClient() const { error } = await supabase.auth.verifyOtp({ type, diff --git a/apps/docs/content/guides/auth/quickstarts/nextjs.mdx b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx index 9a7117247af..6db4230d2ac 100644 --- a/apps/docs/content/guides/auth/quickstarts/nextjs.mdx +++ b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx @@ -72,9 +72,7 @@ hideToc: true Start the development server, go to http://localhost:3000 in a browser, and you should see the contents of `app/page.tsx`. - To Sign Up a new user, navigate to http://localhost:3000/login, and click `Sign Up Now`. - - Check out the [Supabase Auth docs](https://supabase.com/docs/guides/auth#authentication) for more authentication methods. + To sign up a new user, navigate to http://localhost:3000/login, and click `Sign Up Now`. @@ -88,3 +86,8 @@ hideToc: true + +## Learn more + +- [Setting up Server-Side Auth for Next.js](https://supabase.com/docs/guides/auth/server-side/nextjs) for a Next.js deep dive +- [Supabase Auth docs](https://supabase.com/docs/guides/auth#authentication) for more Supabase authentication methods diff --git a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx index b9e5d752c51..7d8e3f0ecc3 100644 --- a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx +++ b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx @@ -171,8 +171,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() return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, diff --git a/apps/docs/content/guides/auth/server-side/nextjs.mdx b/apps/docs/content/guides/auth/server-side/nextjs.mdx index 384f78b869a..8189371cc26 100644 --- a/apps/docs/content/guides/auth/server-side/nextjs.mdx +++ b/apps/docs/content/guides/auth/server-side/nextjs.mdx @@ -125,8 +125,8 @@ export function createClient() { import { createServerClient, type CookieOptions } from '@supabase/ssr' import { cookies } from 'next/headers' -export function createClient() { - const cookieStore = cookies() +export async function createClient() { + const cookieStore = await cookies() return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, @@ -337,7 +337,7 @@ import { redirect } from 'next/navigation' import { createClient } from '@/utils/supabase/server' export async function login(formData: FormData) { - const supabase = createClient() + const supabase = await createClient() // type-casting here for convenience // in practice, you should validate your inputs @@ -357,7 +357,7 @@ export async function login(formData: FormData) { } 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 @@ -429,7 +429,7 @@ export async function GET(request: NextRequest) { const next = searchParams.get('next') ?? '/' if (token_hash && type) { - const supabase = createClient() + const supabase = await createClient() const { error } = await supabase.auth.verifyOtp({ type, @@ -482,7 +482,7 @@ import { redirect } from 'next/navigation' import { createClient } from '@/utils/supabase/server' export default async function PrivatePage() { - const supabase = createClient() + const supabase = await createClient() const { data, error } = await supabase.auth.getUser() if (error || !data?.user) { diff --git a/apps/docs/content/guides/auth/social-login/auth-google.mdx b/apps/docs/content/guides/auth/social-login/auth-google.mdx index 8ebb31ea2c3..c79d6d15300 100644 --- a/apps/docs/content/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/content/guides/auth/social-login/auth-google.mdx @@ -341,9 +341,9 @@ Most web apps and websites can utilize Google's [personalized sign-in buttons](h // Use 'nonce' when invoking the supabase.auth.signInWithIdToken() method ``` -### One-tap with NextJS +### One-tap with Next.js -If you're integrating Google One-Tap with your NextJS application, you can refer to the example below to get started: +If you're integrating Google One-Tap with your Next.js application, you can refer to the example below to get started: ```tsx 'use client' diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx index 720ea4966e5..1b11196eaeb 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx @@ -8,7 +8,7 @@ hideToc: true - + Go to [database.new](https://database.new) and create a new Supabase project. @@ -118,7 +118,7 @@ hideToc: true import { createClient } from '@/utils/supabase/server'; export default async function Notes() { - const supabase = createClient(); + const supabase = await createClient(); const { data: notes } = await supabase.from("notes").select(); return 
{JSON.stringify(notes, null, 2)}
@@ -129,8 +129,8 @@ hideToc: true import { createServerClient } from '@supabase/ssr' import { cookies } from 'next/headers' - export function createClient() { - const cookieStore = cookies() + export async function createClient() { + const cookieStore = await cookies() return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, 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 b849b2b1af0..02d0c095791 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx @@ -385,7 +385,7 @@ import { redirect } from 'next/navigation' import { createClient } from '@/utils/supabase/server' export async function login(formData) { - const supabase = createClient() + const supabase = await createClient() // type-casting here for convenience // in practice, you should validate your inputs @@ -405,7 +405,7 @@ export async function login(formData) { } export async function signup(formData) { - const supabase = createClient() + const supabase = await createClient() const data = { email: formData.get('email'), @@ -512,7 +512,7 @@ export async function GET(request) { redirectTo.searchParams.delete('type') if (token_hash && type) { - const supabase = createClient() + const supabase = await createClient() const { error } = await supabase.auth.verifyOtp({ type, @@ -720,7 +720,7 @@ import AccountForm from './account-form' import { createClient } from '@/utils/supabase/server' export default async function Account() { - const supabase = createClient() + const supabase = await createClient() const { data: { user }, diff --git a/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx index 9a2cd70d26c..2ff11fda1fc 100644 --- a/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Home/Connect/content/nextjs/app/supabasejs/content.tsx @@ -35,7 +35,7 @@ import { createClient } from '@/utils/supabase/server' import { cookies } from 'next/headers' export default async function Page() { - const cookieStore = cookies() + const cookieStore = await cookies() const supabase = createClient(cookieStore) const { data: todos } = await supabase.from('todos').select()