examples: update with-supabase example to App Router

docs/03-pages/01-building-your-application/01-routing/09-authenticating.mdx

@@ -134,7 +134,7 @@ To see examples with other authentication providers, check out the [examples fol
 - [Magic](https://github.com/vercel/next.js/tree/canary/examples/with-magic)
 - [Nhost](https://github.com/vercel/next.js/tree/canary/examples/with-nhost-auth-realtime-graphql)
 - [Ory](https://github.com/vercel/examples/tree/main/solutions/auth-with-ory)
-- [Supabase](https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db)
+- [Supabase](https://github.com/vercel/next.js/tree/canary/examples/with-supabase)
 - [Supertokens](https://github.com/vercel/next.js/tree/canary/examples/with-supertokens)
 - [Userbase](https://github.com/vercel/next.js/tree/canary/examples/with-userbase)
 

examples/with-supabase/.env.local.example

@@ -0,0 +1,4 @@
+# Update these with your Supabase details from your project settings > API
+# https://app.supabase.com/project/_/settings/api
+NEXT_PUBLIC_SUPABASE_URL=your-project-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

examples/with-supabase/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/with-supabase/README.md

@@ -0,0 +1,28 @@
+# Supabase Starter
+
+This starter configures Supabase Auth to use cookies, making the user's session available throughout the entire Next.js app - Client Components, Server Components, Route Handlers, Server Actions and Middleware.
+
+## Deploy with Vercel
+
+The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv)
+
+## Running Locally
+
+1. `cd` into this directory
+1. Run `npm install` to install dependencies
+1. Create a [new Supabase project](https://database.new)
+1. Rename `.env.local.example` to `.env.local` and update the values for `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` from [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
+1. Run `npm run dev` to start the local development server
+
+## Feedback and issues
+
+Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
+
+## More Supabase examples
+
+- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
+- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
+- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
+- [Next.js Auth Helpers Docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)

examples/with-supabase/app/auth/callback/route.js

@@ -0,0 +1,19 @@
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export async function GET(request) {
+  // The `/auth/callback` route is required for the server-side auth flow implemented
+  // by the Auth Helpers package. It exchanges an auth code for the user's session.
+  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
+  const requestUrl = new URL(request.url)
+  const code = requestUrl.searchParams.get('code')
+
+  if (code) {
+    const supabase = createRouteHandlerClient({ cookies })
+    await supabase.auth.exchangeCodeForSession(code)
+  }
+
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin)
+}

examples/with-supabase/app/client-component-example/page.js

@@ -0,0 +1,25 @@
+'use client'
+
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import { useEffect } from 'react'
+
+export default function ClientComponent() {
+  const [todos, setTodos] = useState([])
+
+  // create a Supabase client configured to use cookies
+  const supabase = createClientComponentClient()
+
+  useEffect(() => {
+    const getTodos = async () => {
+      // this assumes you have a `todos` table
+      // head over to your Supabase project's Table Editor to create a table
+      // https://app.supabase.com/project/_/editor
+      const { data } = await supabase.from('todos').select()
+      setTodos(data)
+    }
+
+    getTodos()
+  }, [supabase, setTodos])
+
+  return <pre>{JSON.stringify(todos, null, 2)}</pre>
+}

examples/with-supabase/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}