examples: update with-supabase example to App Router (#51335)

### What?

Update Next.js with Supabase example

### Why?

Existing example for Next.js with Supabase is out of date

### How?

- Rename `with-supabase-auth-db-realtime` to `with-supabase`
- Update example to use App Router
- Use Supabase Auth Helpers for Next.js to configure auth cookies

---------

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/README.md

@@ -0,0 +1,50 @@
+# 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 your own
+
+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)
+
+## How to use
+
+1. Create a [new Supabase project](https://database.new)
+1. Run `npx create-next-app -e with-supabase myapp` to create a Next.js app using the Supabase Starter template
+1. Run `cd myapp` to change into the app's directory
+1. Run `npm install` to install dependencies
+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
+
+> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
+
+### Create Table and seed with data (optional)
+
+Navigate to [your project's SQL Editor](https://app.supabase.com/project/_/sql), click `New query`, paste the following SQL 👇 and click `RUN`.
+
+```sql
+create table if not exists todos (
+  id uuid default gen_random_uuid() primary key,
+  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
+  title text,
+  is_complete boolean default false
+);
+
+insert into todos(title)
+values
+  ('Create Supabase project'),
+  ('Create Next.js app from Supabase Starter template'),
+  ('Keeping building cool stuff!');
+```
+
+## 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.ts

@@ -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: 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.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import { useEffect, useState } from 'react'
+
+export default function ClientComponent() {
+  const [todos, setTodos] = useState<any[]>([])
+
+  // Create a Supabase client configured to use cookies
+  const supabase = createClientComponentClient()
+
+  useEffect(() => {
+    const getTodos = async () => {
+      // This assumes you have a `todos` table in Supabase. Check out
+      // the `Create Table and seed with data` section of the README 👇
+      // https://github.com/vercel/next.js/blob/canary/examples/with-supabase/README.md
+      const { data } = await supabase.from('todos').select()
+      if (data) {
+        setTodos(data)
+      }
+    }
+
+    getTodos()
+  }, [supabase, setTodos])
+
+  return <pre>{JSON.stringify(todos, null, 2)}</pre>
+}