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 ---------
2023-06-16 23:16:42 +10:00 · 2023-06-16 23:16:42 +10:00 · 3cac09790b
commit 3cac09790b
parent 94c9418091
32 changed files with 497 additions and 251 deletions
--- a/docs/03-pages/01-building-your-application/01-routing/09-authenticating.mdx
+++ b/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)
--- a/examples/with-supabase-auth-realtime-db/.env.local.example
+++ b/examples/with-supabase-auth-realtime-db/.env.local.example
@ -1,3 +0,0 @@
 # Update these with your Supabase details from your project settings > API
 NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
--- a/examples/with-supabase-auth-realtime-db/README.md
+++ b/examples/with-supabase-auth-realtime-db/README.md
@ -1,29 +0,0 @@
 # Supabase Authentication
 This example shows how to use Supabase Auth on the client and server in both [API Routes](https://nextjs.org/docs/api-routes/introduction) and when using [server-side rendering (SSR)](https://nextjs.org/docs/basic-features/pages#server-side-rendering).
 ## 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-auth-realtime-db&project-name=nextjs-with-supabase-auth&repository-name=nextjs-with-supabase-auth&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv)
 ## Running Locally
 1. `cd` into this directory
 1. Run `npm install` to install dependencies
 1. Create a Supabase account and new project
 1. Copy `.env.local.example` into `.env.local` and add the project keys
 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)
 - [Next.js Slack Clone](https://github.com/supabase/supabase/tree/master/examples/slack-clone/nextjs-slack-clone)
 - [Next.js Todo List](https://github.com/supabase/supabase/tree/master/examples/todo-list)
 - [Next.js Live Tracker Map](https://github.com/supabase/supabase/tree/master/examples/with-leaflet)
 - [And many more...](https://github.com/supabase/supabase/tree/master/examples)
--- a/examples/with-supabase-auth-realtime-db/lib/initSupabase.js
+++ b/examples/with-supabase-auth-realtime-db/lib/initSupabase.js
@ -1,6 +0,0 @@
 import { createClient } from '@supabase/supabase-js'
 export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
 )
--- a/examples/with-supabase-auth-realtime-db/package.json
+++ b/examples/with-supabase-auth-realtime-db/package.json
@ -1,16 +0,0 @@
 {
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@supabase/supabase-js": "^1.2.1",
    "@supabase/ui": "^0.36.2",
    "next": "latest",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swr": "^2.0.0"
  }
 }
--- a/examples/with-supabase-auth-realtime-db/pages/_app.js
+++ b/examples/with-supabase-auth-realtime-db/pages/_app.js
@ -1,13 +0,0 @@
 import { Auth } from '@supabase/ui'
 import { supabase } from '../lib/initSupabase'
 import './../style.css'
 export default function MyApp({ Component, pageProps }) {
  return (
    <main className={'dark'}>
      <Auth.UserContextProvider supabaseClient={supabase}>
        <Component {...pageProps} />
      </Auth.UserContextProvider>
    </main>
  )
 }
--- a/examples/with-supabase-auth-realtime-db/pages/api/auth.js
+++ b/examples/with-supabase-auth-realtime-db/pages/api/auth.js
@ -1,8 +0,0 @@
 /**
 * NOTE: this file is only needed if you're doing SSR (getServerSideProps)!
 */
 import { supabase } from '../../lib/initSupabase'
 export default function handler(req, res) {
  supabase.auth.api.setAuthCookie(req, res)
 }
--- a/examples/with-supabase-auth-realtime-db/pages/api/getUser.js
+++ b/examples/with-supabase-auth-realtime-db/pages/api/getUser.js
@ -1,13 +0,0 @@
 import { supabase } from '../../lib/initSupabase'
 // Example of how to verify and get user data server-side.
 const getUser = async (req, res) => {
  const token = req.headers.token
  const { data: user, error } = await supabase.auth.api.getUser(token)
  if (error) return res.status(401).json({ error: error.message })
  return res.status(200).json(user)
 }
 export default getUser
--- a/examples/with-supabase-auth-realtime-db/pages/index.js
+++ b/examples/with-supabase-auth-realtime-db/pages/index.js
@ -1,119 +0,0 @@
 import Link from 'next/link'
 import useSWR from 'swr'
 import { Auth, Card, Typography, Space, Button, Icon } from '@supabase/ui'
 import { supabase } from '../lib/initSupabase'
 import { useEffect, useState } from 'react'
 const fetcher = ([url, token]) =>
  fetch(url, {
    method: 'GET',
    headers: new Headers({ 'Content-Type': 'application/json', token }),
    credentials: 'same-origin',
  }).then((res) => res.json())
 const Index = () => {
  const { user, session } = Auth.useUser()
  const { data, error } = useSWR(
    session ? ['/api/getUser', session.access_token] : null,
    fetcher
  )
  const [authView, setAuthView] = useState('sign_in')
  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        if (event === 'PASSWORD_RECOVERY') setAuthView('update_password')
        if (event === 'USER_UPDATED')
          setTimeout(() => setAuthView('sign_in'), 1000)
        // Send session to /api/auth route to set the auth cookie.
        // NOTE: this is only needed if you're doing SSR (getServerSideProps)!
        fetch('/api/auth', {
          method: 'POST',
          headers: new Headers({ 'Content-Type': 'application/json' }),
          credentials: 'same-origin',
          body: JSON.stringify({ event, session }),
        }).then((res) => res.json())
      }
    )
    return () => {
      authListener.unsubscribe()
    }
  }, [])
  const View = () => {
    if (!user)
      return (
        <Space direction="vertical" size={8}>
          <div>
            <img
              src="https://app.supabase.io/img/supabase-dark.svg"
              width="96"
            />
            <Typography.Title level={3}>
              Welcome to Supabase Auth
            </Typography.Title>
          </div>
          <Auth
            supabaseClient={supabase}
            providers={['google', 'github']}
            view={authView}
            socialLayout="horizontal"
            socialButtonSize="xlarge"
          />
        </Space>
      )
    return (
      <Space direction="vertical" size={6}>
        {authView === 'update_password' && (
          <Auth.UpdatePassword supabaseClient={supabase} />
        )}
        {user && (
          <>
            <Typography.Text>You're signed in</Typography.Text>
            <Typography.Text strong>Email: {user.email}</Typography.Text>
            <Button
              icon={<Icon type="LogOut" />}
              type="outline"
              onClick={() => supabase.auth.signOut()}
            >
              Log out
            </Button>
            {error && (
              <Typography.Text danger>Failed to fetch user!</Typography.Text>
            )}
            {data && !error ? (
              <>
                <Typography.Text type="success">
                  User data retrieved server-side (in API route):
                </Typography.Text>
                <Typography.Text>
                  <pre>{JSON.stringify(data, null, 2)}</pre>
                </Typography.Text>
              </>
            ) : (
              <div>Loading...</div>
            )}
            <Typography.Text>
              <Link href="/profile">SSR example with getServerSideProps</Link>
            </Typography.Text>
          </>
        )}
      </Space>
    )
  }
  return (
    <div style={{ maxWidth: '420px', margin: '96px auto' }}>
      <Card>
        <View />
      </Card>
    </div>
  )
 }
 export default Index
--- a/examples/with-supabase-auth-realtime-db/pages/profile.js
+++ b/examples/with-supabase-auth-realtime-db/pages/profile.js
@ -1,39 +0,0 @@
 import Link from 'next/link'
 import { Card, Typography, Space } from '@supabase/ui'
 import { supabase } from '../lib/initSupabase'
 export default function Profile({ user }) {
  return (
    <div style={{ maxWidth: '420px', margin: '96px auto' }}>
      <Card>
        <Space direction="vertical" size={6}>
          <Typography.Text>You're signed in</Typography.Text>
          <Typography.Text strong>Email: {user.email}</Typography.Text>
          <Typography.Text type="success">
            User data retrieved server-side (from Cookie in getServerSideProps):
          </Typography.Text>
          <Typography.Text>
            <pre>{JSON.stringify(user, null, 2)}</pre>
          </Typography.Text>
          <Typography.Text>
            <Link href="/">Static example with useSWR</Link>
          </Typography.Text>
        </Space>
      </Card>
    </div>
  )
 }
 export async function getServerSideProps({ req }) {
  const { user } = await supabase.auth.api.getUserByCookie(req)
  if (!user) {
    // If no user, redirect to index.
    return { props: {}, redirect: { destination: '/', permanent: false } }
  }
  // If there is a user, return it.
  return { props: { user } }
 }
--- a/examples/with-supabase-auth-realtime-db/style.css
+++ b/examples/with-supabase-auth-realtime-db/style.css
@ -1,4 +0,0 @@
 body {
  background: #3d3d3d;
  font-family: Helvetica, Arial, Sans-Serif;
 }
--- a/examples/with-supabase/.env.local.example
+++ b/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
--- a/examples/with-supabase-auth-realtime-db/.gitignore
+++ b/examples/with-supabase-auth-realtime-db/.gitignore
--- a/examples/with-supabase/README.md
+++ b/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)
--- a/examples/with-supabase/app/auth/callback/route.ts
+++ b/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)
 }
--- a/examples/with-supabase/app/client-component-example/page.tsx
+++ b/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>
 }
--- a/examples/with-supabase/app/favicon.ico
+++ b/examples/with-supabase/app/favicon.ico
--- a/examples/with-supabase/app/globals.css
+++ b/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));
 }
--- a/examples/with-supabase/app/layout.tsx
+++ b/examples/with-supabase/app/layout.tsx
@ -0,0 +1,22 @@
 import './globals.css'
 export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
 }
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
  return (
    <html lang="en">
      <body>
        <main className="min-h-screen bg-gray-900 flex flex-col items-center">
          {children}
        </main>
      </body>
    </html>
  )
 }
--- a/examples/with-supabase/app/login/page.tsx
+++ b/examples/with-supabase/app/login/page.tsx
@ -0,0 +1,105 @@
 'use client'
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
 export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [view, setView] = useState('sign-in')
  const router = useRouter()
  const supabase = createClientComponentClient()
  const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    await supabase.auth.signUp({
      email,
      password,
      options: {
        emailRedirectTo: `${location.origin}/auth/callback`,
      },
    })
    setView('check-email')
  }
  const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    console.log({ data, error })
    router.push('/')
  }
  return (
    <div className="flex-1 flex flex-col w-full max-w-sm justify-center gap-2">
      {view === 'check-email' ? (
        <p className="text-center text-gray-400">
          Check <span className="font-bold text-white">{email}</span> to
          continue signing up
        </p>
      ) : (
        <form
          className="flex-1 flex flex-col w-full max-w-sm justify-center gap-2"
          onSubmit={view === 'sign-in' ? handleSignIn : handleSignUp}
        >
          <label className="text-md text-gray-400" htmlFor="email">
            Email
          </label>
          <input
            className="rounded-md px-4 py-2 bg-inherit border mb-6"
            name="email"
            onChange={(e) => setEmail(e.target.value)}
            value={email}
            placeholder="you@example.com"
          />
          <label className="text-md text-gray-400" htmlFor="password">
            Password
          </label>
          <input
            className="rounded-md px-4 py-2 bg-inherit border mb-6"
            type="password"
            name="password"
            onChange={(e) => setPassword(e.target.value)}
            value={password}
            placeholder="••••••••"
          />
          {view === 'sign-in' ? (
            <>
              <button className="bg-green-700 rounded px-4 py-2 text-gray-200 mb-6">
                Sign In
              </button>
              <p className="text-sm text-gray-500 text-center">
                Don't have an account?
                <button
                  className="ml-1 text-white underline"
                  onClick={() => setView('sign-up')}
                >
                  Sign Up Now
                </button>
              </p>
            </>
          ) : null}
          {view === 'sign-up' ? (
            <>
              <button className="bg-green-700 rounded px-4 py-2 text-gray-200 mb-6">
                Sign Up
              </button>
              <p className="text-sm text-gray-500 text-center">
                Already have an account?
                <button
                  className="ml-1 text-white underline"
                  onClick={() => setView('sign-in')}
                >
                  Sign In Now
                </button>
              </p>
            </>
          ) : null}
        </form>
      )}
    </div>
  )
 }
--- a/examples/with-supabase/app/page.tsx
+++ b/examples/with-supabase/app/page.tsx
@ -0,0 +1,94 @@
 import {
  createServerActionClient,
  createServerComponentClient,
 } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 const resources = [
  {
    title: 'Cookie-based Auth and the Next.js App Router',
    subtitle:
      'This free course by Jon Meyers, shows you how to configure Supabase Auth to use cookies, and steps through some common patterns.',
    url: 'https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF',
  },
  {
    title: 'Supabase Auth Helpers Docs',
    subtitle:
      'This template has configured Supabase Auth to use cookies for you, but the docs are a great place to learn more.',
    url: 'https://supabase.com/docs/guides/auth/auth-helpers/nextjs',
  },
  {
    title: 'Supabase Next.js App Router Example',
    subtitle:
      'Want to see a code example containing some common patterns with Next.js and Supabase? Check out this repo!',
    url: 'https://github.com/supabase/supabase/tree/master/examples/auth/nextjs',
  },
 ]
 export default async function Index() {
  const supabase = createServerComponentClient({ cookies })
  const {
    data: { user },
  } = await supabase.auth.getUser()
  // This is a Protected Route that can only be accessed by authenticated users
  // users who are not signed in will be redirected to the `/login` route
  if (!user) {
    redirect('/login')
  }
  const signOut = async () => {
    'use server'
    const supabase = createServerActionClient({ cookies })
    await supabase.auth.signOut()
    redirect('/login')
  }
  return (
    <div className="flex-1 flex flex-col max-w-3xl mt-72">
      <h1 className="text-2xl mb-2 flex justify-between">
        Hey, {user.email}
        <form action={signOut} className="inline ml-2">
          <button className="text-sm text-gray-400">Logout</button>
        </form>
      </h1>
      <hr />
      <p className="text-gray-300 mt-16 mb-16">
        Here are some helpful resources to get you started! 👇
      </p>
      <div className="flex gap-4 h-60 mb-16">
        {resources.map(({ title, subtitle, url }) => (
          <a
            className="flex-1 border border-gray-400 rounded-md p-6 hover:bg-gray-800"
            href={url}
          >
            <h2 className="font-bold mb-2">{title}</h2>
            <p className="text-sm text-gray-400">{subtitle}</p>
          </a>
        ))}
      </div>
      <p className="text-gray-300 mb-16">
        Ready to build your app? Head over to `app/page.tsx` 👉
      </p>
      <div className="bg-gray-800 rounded-md p-8 text-gray-300">
        <p className="font-semibold mb-2 text-gray-200">
          We have also included examples for creating a Supabase client in:
        </p>
        <ul className="list-disc ml-8">
          <li>Client Components - `app/client-component-example/page.tsx`</li>
          <li>Server Components - `app/server-component-example/page.tsx`</li>
          <li>Server Actions - `app/server-action-example/page.tsx`</li>
          <li>Route Handlers - `app/route-handler-example/route.ts`</li>
          <li>Middleware - `middleware.ts`</li>
        </ul>
      </div>
    </div>
  )
 }
--- a/examples/with-supabase/app/route-hander-example/route.ts
+++ b/examples/with-supabase/app/route-hander-example/route.ts
@ -0,0 +1,15 @@
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 export async function GET() {
  // Create a Supabase client configured to use cookies
  const supabase = createRouteHandlerClient({ cookies })
  // 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: todos } = await supabase.from('todos').select()
  return NextResponse.json(todos)
 }
--- a/examples/with-supabase/app/server-action-example/page.tsx
+++ b/examples/with-supabase/app/server-action-example/page.tsx
@ -0,0 +1,27 @@
 import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 import { revalidatePath } from 'next/cache'
 import { cookies } from 'next/headers'
 export default async function ServerAction() {
  const addTodo = async (formData: FormData) => {
    'use server'
    const title = formData.get('title')
    if (title) {
      // Create a Supabase client configured to use cookies
      const supabase = createServerActionClient({ cookies })
      // 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
      await supabase.from('todos').insert({ title })
      revalidatePath('/server-action-example')
    }
  }
  return (
    <form action={addTodo}>
      <input name="title" />
    </form>
  )
 }
--- a/examples/with-supabase/app/server-component-example/page.tsx
+++ b/examples/with-supabase/app/server-component-example/page.tsx
@ -0,0 +1,14 @@
 import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 export default async function ServerComponent() {
  // Create a Supabase client configured to use cookies
  const supabase = createServerComponentClient({ cookies })
  // 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: todos } = await supabase.from('todos').select()
  return <pre>{JSON.stringify(todos, null, 2)}</pre>
 }
--- a/examples/with-supabase/middleware.ts
+++ b/examples/with-supabase/middleware.ts
@ -0,0 +1,17 @@
 import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  // Create a Supabase client configured to use cookies
  const supabase = createMiddlewareClient({ req, res })
  // Refresh session if expired - required for Server Components
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
  await supabase.auth.getSession()
  return res
 }
--- a/examples/with-supabase/next.config.js
+++ b/examples/with-supabase/next.config.js
@ -0,0 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  experimental: {
    serverActions: true,
  },
 }
 module.exports = nextConfig
--- a/examples/with-supabase/package.json
+++ b/examples/with-supabase/package.json
@ -0,0 +1,23 @@
 {
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@supabase/auth-helpers-nextjs": "latest",
    "autoprefixer": "10.4.14",
    "next": "latest",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  },
  "devDependencies": {
    "@types/node": "20.3.1",
    "@types/react": "18.2.12",
    "@types/react-dom": "18.2.5"
  }
 }
--- a/examples/with-supabase/postcss.config.js
+++ b/examples/with-supabase/postcss.config.js
@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/examples/with-supabase/public/next.svg
+++ b/examples/with-supabase/public/next.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/examples/with-supabase/public/vercel.svg
+++ b/examples/with-supabase/public/vercel.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
--- a/examples/with-supabase/tailwind.config.js
+++ b/examples/with-supabase/tailwind.config.js
@ -0,0 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [],
 }
--- a/examples/with-supabase/tsconfig.json
+++ b/examples/with-supabase/tsconfig.json
@ -0,0 +1,28 @@
 {
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
 }
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>