update with-supabase example

vercel · Jun 15, 2023 · e962e34 · e962e34
1 parent 6e9113f
commit e962e34
Show file tree

Hide file tree

Showing 35 changed files with 491 additions and 258 deletions.
diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
@@ -14,16 +14,16 @@ There are two ways to set app icons:
 
 ## Image files (.ico, .jpg, .png)
 
-Use an image file to set an app icon by placing a `favicon`, `icon`, or `apple-icon` image file within your `/app` directory. 
-The `favicon` image can only be located in the top level of `app/`. 
+Use an image file to set an app icon by placing a `favicon`, `icon`, or `apple-icon` image file within your `/app` directory.
+The `favicon` image can only be located in the top level of `app/`.
 
 Next.js will evaluate the file and automatically add the appropriate tags to your app's `<head>` element.
 
-| File convention             | Supported file types                    | Valid locations
-| --------------------------- | --------------------------------------- | ---------------------------
-| [`favicon`](#favicon)       | `.ico`                                  | `app/`
-| [`icon`](#icon)             | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*`
-| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png`                 | `app/**/*`
+| File convention             | Supported file types                    | Valid locations |
+| --------------------------- | --------------------------------------- | --------------- |
+| [`favicon`](#favicon)       | `.ico`                                  | `app/`          |
+| [`icon`](#icon)             | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*`      |
+| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png`                 | `app/**/*`      |
 
 ### `favicon`
 

diff --git 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
@@ -138,7 +138,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)
 

diff --git a/examples/with-supabase-auth-realtime-db/.env.local.example b/examples/with-supabase-auth-realtime-db/.env.local.example
diff --git a/examples/with-supabase-auth-realtime-db/README.md b/examples/with-supabase-auth-realtime-db/README.md
diff --git a/examples/with-supabase-auth-realtime-db/lib/initSupabase.js b/examples/with-supabase-auth-realtime-db/lib/initSupabase.js
diff --git a/examples/with-supabase-auth-realtime-db/package.json b/examples/with-supabase-auth-realtime-db/package.json
diff --git a/examples/with-supabase-auth-realtime-db/pages/_app.js b/examples/with-supabase-auth-realtime-db/pages/_app.js
diff --git a/examples/with-supabase-auth-realtime-db/pages/api/auth.js b/examples/with-supabase-auth-realtime-db/pages/api/auth.js
diff --git a/examples/with-supabase-auth-realtime-db/pages/api/getUser.js b/examples/with-supabase-auth-realtime-db/pages/api/getUser.js
diff --git a/examples/with-supabase-auth-realtime-db/pages/index.js b/examples/with-supabase-auth-realtime-db/pages/index.js
diff --git a/examples/with-supabase-auth-realtime-db/pages/profile.js b/examples/with-supabase-auth-realtime-db/pages/profile.js
diff --git a/examples/with-supabase-auth-realtime-db/style.css b/examples/with-supabase-auth-realtime-db/style.css
diff --git 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
diff --git a/examples/with-supabase/.eslintrc.json b/examples/with-supabase/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/...with-supabase-auth-realtime-db/.gitignore → examples/with-supabase/.gitignore b/...with-supabase-auth-realtime-db/.gitignore → examples/with-supabase/.gitignore
diff --git a/examples/with-supabase/README.md b/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)
diff --git a/examples/with-supabase/app/auth/callback/route.js b/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)
+}
diff --git a/examples/with-supabase/app/client-component-example/page.js b/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>
+}
diff --git a/examples/with-supabase/app/favicon.ico b/examples/with-supabase/app/favicon.ico