mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
update Next.js (pages) guide to use new createClient functions
This commit is contained in:
Jon Meyers committed
1 parent
b290c64b6b
commit
03ca71a648
1 file changed
+39
-39
@@ -10,7 +10,7 @@ export const meta = {
|
||||
|
||||
This submodule provides convenience helpers for implementing user authentication in Next.js applications using the pages directory.
|
||||
|
||||
> Note: As of [Next.js 13.4](https://nextjs.org/blog/next-13-4), the App Router has reached stable status. Check out our guide on using [Auth Helpers with the Next.js App Directory](/docs/guides/auth/auth-helpers/nextjs).
|
||||
> Note: As of [Next.js 13.4](https://nextjs.org/blog/next-13-4), the App Router has reached stable status. This is now the recommended path for new Next.js app. Check out our guide on using [Auth Helpers with the Next.js App Directory](/docs/guides/auth/auth-helpers/nextjs).
|
||||
|
||||
## Install the Next.js helper library
|
||||
|
||||
@@ -63,8 +63,8 @@ yarn add @supabase/auth-helpers-react
|
||||
Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
|
||||
|
||||
```bash title=.env.local
|
||||
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
|
||||
```
|
||||
|
||||
## Basic Setup
|
||||
@@ -80,13 +80,13 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
|
||||
Wrap your `pages/_app.js` component with the `SessionContextProvider` component:
|
||||
|
||||
```jsx title=pages/_app.js
|
||||
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { SessionContextProvider } from '@supabase/auth-helpers-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
// Create a new supabase browser client on every first render.
|
||||
const [supabaseClient] = useState(() => createBrowserSupabaseClient())
|
||||
const [supabaseClient] = useState(() => createPagesBrowserClient())
|
||||
|
||||
return (
|
||||
<SessionContextProvider
|
||||
@@ -105,7 +105,7 @@ function MyApp({ Component, pageProps }) {
|
||||
Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component:
|
||||
|
||||
```tsx lines=2,8 title=pages/_app.tsx
|
||||
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { SessionContextProvider, Session } from '@supabase/auth-helpers-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
@@ -116,7 +116,7 @@ function MyApp({
|
||||
initialSession: Session
|
||||
}>) {
|
||||
// Create a new supabase browser client on every first render.
|
||||
const [supabaseClient] = useState(() => createBrowserSupabaseClient())
|
||||
const [supabaseClient] = useState(() => createPagesBrowserClient())
|
||||
|
||||
return (
|
||||
<SessionContextProvider
|
||||
@@ -143,10 +143,10 @@ You can pass types that were [generated with the Supabase CLI](/docs/reference/j
|
||||
Creating a new supabase client object:
|
||||
|
||||
```tsx
|
||||
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { Database } from '../database.types'
|
||||
|
||||
const supabaseClient = createBrowserSupabaseClient<Database>()
|
||||
const supabaseClient = createPagesBrowserClient<Database>()
|
||||
```
|
||||
|
||||
Retrieving a supabase client object from the SessionContext:
|
||||
@@ -162,12 +162,12 @@ const supabaseClient = useSupabaseClient<Database>()
|
||||
|
||||
```tsx
|
||||
// Creating a new supabase server client object (e.g. in API route):
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import type { Database } from 'types_db'
|
||||
|
||||
export default async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
const supabaseServerClient = createServerSupabaseClient<Database>({
|
||||
const supabaseServerClient = createPagesServerClient<Database>({
|
||||
req,
|
||||
res,
|
||||
})
|
||||
@@ -233,7 +233,7 @@ export default LoginPage
|
||||
Create a server supabase client to retrieve the logged in user's session:
|
||||
|
||||
```jsx title=pages/profile.js
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
|
||||
export default function Profile({ user }) {
|
||||
return <div>Hello {user.name}</div>
|
||||
@@ -241,7 +241,7 @@ export default function Profile({ user }) {
|
||||
|
||||
export const getServerSideProps = async (ctx) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient(ctx)
|
||||
const supabase = createPagesServerClient(ctx)
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -277,7 +277,7 @@ You can use the server supabase client to run [row level security](/docs/learn/a
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
```jsx
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
|
||||
export default function ProtectedPage({ user, data }) {
|
||||
return (
|
||||
@@ -291,7 +291,7 @@ export default function ProtectedPage({ user, data }) {
|
||||
|
||||
export const getServerSideProps = async (ctx) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient(ctx)
|
||||
const supabase = createPagesServerClient(ctx)
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -322,7 +322,7 @@ export const getServerSideProps = async (ctx) => {
|
||||
<TabPanel id="ts" label="TypeScript">
|
||||
|
||||
```tsx
|
||||
import { User, createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { User, createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { GetServerSidePropsContext } from 'next'
|
||||
|
||||
export default function ProtectedPage({ user, data }: { user: User; data: any }) {
|
||||
@@ -337,7 +337,7 @@ export default function ProtectedPage({ user, data }: { user: User; data: any })
|
||||
|
||||
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient(ctx)
|
||||
const supabase = createPagesServerClient(ctx)
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -380,7 +380,7 @@ When using third-party auth providers, sessions are initiated with an additional
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
```jsx
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
|
||||
export default function ProtectedPage({ user, allRepos }) {
|
||||
return (
|
||||
@@ -396,7 +396,7 @@ export default function ProtectedPage({ user, allRepos }) {
|
||||
|
||||
export const getServerSideProps = async (ctx) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient(ctx)
|
||||
const supabase = createPagesServerClient(ctx)
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -431,7 +431,7 @@ export const getServerSideProps = async (ctx) => {
|
||||
<TabPanel id="ts" label="TypeScript">
|
||||
|
||||
```tsx
|
||||
import { User, createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { User, createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { GetServerSidePropsContext } from 'next'
|
||||
|
||||
export default function ProtectedPage({ user, allRepos }: { user: User; allRepos: any }) {
|
||||
@@ -448,7 +448,7 @@ export default function ProtectedPage({ user, allRepos }: { user: User; allRepos
|
||||
|
||||
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient(ctx)
|
||||
const supabase = createPagesServerClient(ctx)
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -495,11 +495,11 @@ Create a server supabase client to retrieve the logged in user's session:
|
||||
<TabPanel id="js" label="JavaScript">
|
||||
|
||||
```jsx title=pages/api/protected-route.js
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
|
||||
const ProtectedRoute = async (req, res) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient({ req, res })
|
||||
const supabase = createPagesServerClient({ req, res })
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -524,11 +524,11 @@ export default ProtectedRoute
|
||||
|
||||
```tsx title=pages/api/protected-route.ts
|
||||
import { NextApiHandler } from 'next'
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
|
||||
const ProtectedRoute: NextApiHandler = async (req, res) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient({ req, res })
|
||||
const supabase = createPagesServerClient({ req, res })
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -556,7 +556,7 @@ export default ProtectedRoute
|
||||
As an alternative to protecting individual pages you can use a [Next.js Middleware](https://nextjs.org/docs/middleware) to protect the entire directory or those that match the config object. In the following example, all requests to `/middleware-protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected:
|
||||
|
||||
```ts title=middleware.ts
|
||||
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { NextResponse } from 'next/server'
|
||||
import type { NextRequest } from 'next/server'
|
||||
|
||||
@@ -564,7 +564,7 @@ export async function middleware(req: NextRequest) {
|
||||
// We need to create a response and hand it to the supabase client to be able to modify the response headers.
|
||||
const res = NextResponse.next()
|
||||
// Create authenticated Supabase Client.
|
||||
const supabase = createMiddlewareSupabaseClient({ req, res })
|
||||
const supabase = createMiddlewareClient({ req, res })
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -600,7 +600,7 @@ Please follow the steps below to update your API routes, pages, and middleware h
|
||||
|
||||
#### `withApiAuth` deprecated!
|
||||
|
||||
Use `createServerSupabaseClient` within your `NextApiHandler`:
|
||||
Use `createPagesServerClient` within your `NextApiHandler`:
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
@@ -625,11 +625,11 @@ export default withApiAuth(async function ProtectedRoute(req, res, supabase) {
|
||||
|
||||
```tsx title=pages/api/protected-route.ts
|
||||
import { NextApiHandler } from 'next'
|
||||
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
|
||||
|
||||
const ProtectedRoute: NextApiHandler = async (req, res) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient({ req, res })
|
||||
const supabase = createPagesServerClient({ req, res })
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -654,7 +654,7 @@ export default ProtectedRoute
|
||||
|
||||
#### `withPageAuth` deprecated!
|
||||
|
||||
Use `createServerSupabaseClient` within `getServerSideProps`:
|
||||
Use `createPagesServerClient` within `getServerSideProps`:
|
||||
|
||||
<Tabs
|
||||
scrollable
|
||||
@@ -678,7 +678,7 @@ export const getServerSideProps = withPageAuth({ redirectTo: '/' })
|
||||
<TabPanel id="after" label="After">
|
||||
|
||||
```tsx title=pages/profile.js
|
||||
import { createServerSupabaseClient, User } from '@supabase/auth-helpers-nextjs'
|
||||
import { createPagesServerClient, User } from '@supabase/auth-helpers-nextjs'
|
||||
import { GetServerSidePropsContext } from 'next'
|
||||
|
||||
export default function Profile({ user }: { user: User }) {
|
||||
@@ -687,7 +687,7 @@ export default function Profile({ user }: { user: User }) {
|
||||
|
||||
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
|
||||
// Create authenticated Supabase Client
|
||||
const supabase = createServerSupabaseClient(ctx)
|
||||
const supabase = createPagesServerClient(ctx)
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -745,7 +745,7 @@ export const config = {
|
||||
<TabPanel id="after" label="After">
|
||||
|
||||
```tsx title=middleware.ts
|
||||
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
|
||||
import { NextResponse } from 'next/server'
|
||||
import type { NextRequest } from 'next/server'
|
||||
|
||||
@@ -753,7 +753,7 @@ export async function middleware(req: NextRequest) {
|
||||
// We need to create a response and hand it to the supabase client to be able to modify the response headers.
|
||||
const res = NextResponse.next()
|
||||
// Create authenticated Supabase Client.
|
||||
const supabase = createMiddlewareSupabaseClient({ req, res })
|
||||
const supabase = createMiddlewareClient({ req, res })
|
||||
// Check if we have a session
|
||||
const {
|
||||
data: { session },
|
||||
@@ -797,19 +797,19 @@ The `/api/auth/logout` API route has been removed, please use the `signout` meth
|
||||
</button>
|
||||
```
|
||||
|
||||
The `supabaseClient` and `supabaseServerClient` have been removed in favor of the `createBrowserSupabaseClient` and `createServerSupabaseClient` methods. This allows you to provide the CLI-generated types to the client:
|
||||
The `supabaseClient` and `supabaseServerClient` have been removed in favor of the `createPagesBrowserClient` and `createPagesServerClient` methods. This allows you to provide the CLI-generated types to the client:
|
||||
|
||||
```tsx
|
||||
// client-side
|
||||
import type { Database } from 'types_db'
|
||||
const [supabaseClient] = useState(() => createBrowserSupabaseClient<Database>())
|
||||
const [supabaseClient] = useState(() => createPagesBrowserClient<Database>())
|
||||
|
||||
// server-side API route
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import type { Database } from 'types_db'
|
||||
|
||||
export default async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
const supabaseServerClient = createServerSupabaseClient<Database>({
|
||||
const supabaseServerClient = createPagesServerClient<Database>({
|
||||
req,
|
||||
res,
|
||||
})
|
||||
@@ -830,7 +830,7 @@ Creating a new supabase client object:
|
||||
```tsx
|
||||
import { Database } from '../database.types'
|
||||
|
||||
const [supabaseClient] = useState(() => createBrowserSupabaseClient<Database>())
|
||||
const [supabaseClient] = useState(() => createPagesBrowserClient<Database>())
|
||||
```
|
||||
|
||||
Retrieving a supabase client object from the SessionContext:
|
||||
|
||||
Reference in new issue
Block a user