diff --git a/apps/docs/lib/docs.ts b/apps/docs/lib/docs.ts index d67a61583f7..daa0f83d6bd 100644 --- a/apps/docs/lib/docs.ts +++ b/apps/docs/lib/docs.ts @@ -45,7 +45,7 @@ export function getDocsBySlug(slug: string) { // if no match, 404 if (!fs.existsSync(fullPath)) { console.log(`\nfile ${fullPath} not found, redirect to 404\n`) - fullPath = join(docsDirectory, 'docs/404.mdx') + fullPath = join(docsDirectory, 'pages/404.mdx') } const fileContents = fs.readFileSync(fullPath, 'utf8') diff --git a/apps/docs/pages/404.mdx b/apps/docs/pages/404.mdx index 78c7d88f970..92807aeb5af 100644 --- a/apps/docs/pages/404.mdx +++ b/apps/docs/pages/404.mdx @@ -1,6 +1,6 @@ ---- -title: '404' -description: 'Page not found' ---- +export const meta = { + title: '404', + description: 'Page not found', +} # Page not found diff --git a/apps/docs/pages/[...slug].tsx b/apps/docs/pages/[...slug].tsx index 1b49d414efc..bb0e2a0d943 100644 --- a/apps/docs/pages/[...slug].tsx +++ b/apps/docs/pages/[...slug].tsx @@ -47,7 +47,6 @@ export async function getStaticProps({ params }: { params: { slug: string[] } }) let doc = getDocsBySlug(slug) const content = await serialize(doc.content || '') - console.log(doc.content) return { props: { ...doc, diff --git a/apps/docs/pages/example-guides/auth/auth-helpers/auth-ui.mdx b/apps/docs/pages/example-guides/auth/auth-helpers/auth-ui.mdx deleted file mode 100644 index 2b4eff8c77a..00000000000 --- a/apps/docs/pages/example-guides/auth/auth-helpers/auth-ui.mdx +++ /dev/null @@ -1,281 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'auth-ui', - title: 'Auth UI', - description: 'A prebuilt, customizable React component for authenticating users.', -} - -Auth UI is a pre-built React component for authenticating users. -It supports custom themes and extensible styles to match your brand and aesthetic. - - - -## Set up Auth UI - -Install the latest version of [supabase-js](/docs/reference/javascript) and the Auth UI package: - -```bash -npm install @supabase/supabase-js @supabase/auth-ui-react -``` - -### Import the Auth component - -Pass `supabaseClient` from `@supabase/supabase-js` as a prop to the component. - -```js title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => -``` - -This renders the Auth component without any styling. -We recommend using one of the predefined themes to style the UI. -Import the theme you want to use and pass it to the `appearence.theme` prop. - -```js lines=4,11 title=/src/index.js -import { - Auth, - // Import predefined theme - ThemeSupa, -} from '@supabase/auth-ui-react' - -const App = () => ( - -) -``` - -## Customization - -There are several ways to customize Auth UI: - -- Use one of the [predefined themes](#predefined-themes) that comes with Auth UI -- Extend a theme by [overriding the variable tokens](#override-themes) in a theme -- [Create your own theme](#create-theme) -- [Use your own CSS classes](#custom-css-classes) -- [Use inline styles](#custom-inline-styles) -- [Use your own labels](#custom-labels) - -### Predefined themes - -Auth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, a `default` variation, and a `dark` variation. You can switch between these themes using the `theme` prop. Import the theme you want to use and pass it to the `appearence.theme` prop. - -```js lines=2,10 title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth, ThemeSupa } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => ( - -) -``` - - - -Currently there is only one predefined theme available, but we plan to add more. - - - -### Switch theme variations - -Auth UI comes with two theme variations: `default` and `dark`. You can switch between these themes with the `theme` prop. - -```js lines=11 title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth, ThemeSupa } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => ( - -) -``` - -If you don't pass a value to `theme` it uses the `"default"` theme. You can pass `"dark"` to the theme prop to switch to the `dark` theme. If your theme has other variations, use the name of the variation in this prop. - -### Override themes - -Auth UI themes can be overridden using variable tokens. See the [list of variable tokens](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx). - -```js lines=11-18 title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth, ThemeSupa } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => ( - -) -``` - -If you created your own theme, you may not need to override any of the them. - -### Create your own theme {#create-theme} - -You can create your own theme by following the same structure within a `appearance.theme` property. -See the list of [tokens within a theme](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx). - -```js title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth } from '@supabase/auth-ui-react' - -const supabase = createClient( - '', - '' -) - -const customTheme = { - default: { - colors: { - brand: 'hsl(153 60.0% 53.0%)', - brandAccent: 'hsl(154 54.8% 45.1%)', - brandButtonText: 'white', - // .. - }, - dark: { - colors: { - brandButtonText: 'white', - defaultButtonBackground: '#2e2e2e', - defaultButtonBackgroundHover: '#3e3e3e', - //.. - }, - }, - // You can also add more theme variations with different names. - evenDarker: { - colors: { - brandButtonText: 'white', - defaultButtonBackground: '#1e1e1e', - defaultButtonBackgroundHover: '#2e2e2e', - //.. - }, - }, -} - -const App = () => ( - -) -``` - -You can swich between different variations of your theme with the ["theme" prop](#switch-theme-variations). - -### Custom CSS classes {#custom-css-classes} - -You can use custom CSS classes for the following elements: -`"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`. - -```js title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => ( - -) -``` - -### Custom inline CSS {#custom-inline-styles} - -You can use custom CSS inline styles for the following elements: -`"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`. - -```js title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => ( - -) -``` - -### Custom labels {#custom-labels} - -You can use custom labels with `localization.variables`. See the [list of labels](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/lib/Localization/en.json) that can be overwritten. - -```js title=/src/index.js -import { createClient } from '@supabase/supabase-js' -import { Auth } from '@supabase/auth-ui-react' - -const supabase = createClient('', '') - -const App = () => ( - -) -``` - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/example-guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/example-guides/auth/auth-helpers/nextjs.mdx deleted file mode 100644 index e6acf1da031..00000000000 --- a/apps/docs/pages/example-guides/auth/auth-helpers/nextjs.mdx +++ /dev/null @@ -1,843 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'nextjs', - title: 'Supabase Auth with Next.js', - description: 'Authentication helpers for Next.js API routes, middleware, and SSR.', - sidebar_label: 'Next.js', -} - -This submodule provides convenience helpers for implementing user authentication in Next.js applications. - -## Install the Next.js helper library - - - - -```sh -npm install @supabase/auth-helpers-nextjs -``` - -This library supports the following tooling versions: - -- Node.js: `^10.13.0 || >=12.0.0` -- Next.js: `>=10` -- Note: Next.js 13 is supported except for the new `app` directory approach. We're working on adding support for this and you can follow along [here](https://github.com/supabase/auth-helpers/issues/341). - -Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks. - -```sh -npm install @supabase/auth-helpers-react -``` - - - - -```sh -yarn add @supabase/auth-helpers-nextjs -``` - -This library supports the following tooling versions: - -- Node.js: `^10.13.0 || >=12.0.0` -- Next.js: `>=10` -- Note: Next.js 13 is supported except for the new `app` directory approach. We're working on adding support for this and you can follow along [here](https://github.com/supabase/auth-helpers/issues/341). - -Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks. - -```sh -yarn add @supabase/auth-helpers-react -``` - - - - -## Set up environment variables - -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 -``` - -## Basic Setup - - - - -Wrap your `pages/_app.js` component with the `SessionContextProvider` component: - -```jsx title=pages/_app.js -import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { SessionContextProvider } from '@supabase/auth-helpers-react' - -function MyApp({ Component, pageProps }) { - const router = useRouter() - // Create a new supabase browser client on every first render. - const [supabaseClient] = useState(() => createBrowserSupabaseClient()) - - return ( - - - - ) -} -``` - - - - -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 { SessionContextProvider, Session } from '@supabase/auth-helpers-react' - -function MyApp({ - Component, - pageProps, -}: AppProps<{ - initialSession: Session -}>) { - // Create a new supabase browser client on every first render. - const [supabaseClient] = useState(() => createBrowserSupabaseClient()) - - return ( - - - - ) -} -``` - - - - -You can now determine if a user is authenticated by checking that the `user` object returned by the `useUser()` hook is defined. - -## Usage with TypeScript - -You can pass types that were [generated with the Supabase CLI](/docs/reference/javascript/typescript-support#generating-types) to the Supabase Client to get enhanced type safety and auto completion: - -### Browser client - -Creating a new supabase client object: - -```tsx -import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { Database } from '../database.types' - -const supabaseClient = createBrowserSupabaseClient() -``` - -Retrieving a supabase client object from the SessionContext: - -```tsx -import { useSupabaseClient } from '@supabase/auth-helpers-react' -import { Database } from '../database.types' - -const supabaseClient = useSupabaseClient() -``` - -### Server client - -```tsx -// Creating a new supabase server client object (e.g. in API route): -import type { NextApiRequest, NextApiResponse } from 'next' -import type { Database } from 'types_db' - -export default async (req: NextApiRequest, res: NextApiResponse) => { - const supabaseServerClient = createServerSupabaseClient({ - req, - res, - }) - const { - data: { user }, - } = await supabaseServerClient.auth.getUser() - - res.status(200).json({ name: user?.name ?? '' }) -} -``` - -## Client-side data fetching with RLS - -For [row level security](/docs/learn/auth-deep-dive/auth-row-level-security) to work properly when fetching data client-side, you need to make sure to use the `supabaseClient` from the `useSupabaseClient` hook and only run your query once the user is defined client-side in the `useUser()` hook: - -```jsx lines=10-17 -import { Auth, ThemeSupa } from '@supabase/auth-ui-react' -import { useUser, useSupabaseClient } from '@supabase/auth-helpers-react' -import { useEffect, useState } from 'react' - -const LoginPage = () => { - const supabaseClient = useSupabaseClient() - const user = useUser() - const [data, setData] = useState() - - useEffect(() => { - async function loadData() { - const { data } = await supabaseClient.from('test').select('*') - setData(data) - } - // Only run query once user is logged in. - if (user) loadData() - }, [user]) - - if (!user) - return ( - - ) - - return ( - <> - -

user:

- 
{JSON.stringify(user, null, 2)}
-

client-side data fetching with RLS

- 
{JSON.stringify(data, null, 2)}
- - ) -} - -export default LoginPage -``` - -## Server-side rendering (SSR) - -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' - -export default function Profile({ user }) { - return
Hello {user.name}
-} - -export const getServerSideProps = async (ctx) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient(ctx) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return { - redirect: { - destination: '/', - permanent: false, - }, - } - - return { - props: { - initialSession: session, - user: session.user, - }, - } -} -``` - -## Server-side data fetching with RLS - -You can use the server supabase client to run [row level security](/docs/learn/auth-deep-dive/auth-row-level-security) authenticated queries server-side: - - - - -```jsx -import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' - -export default function ProtectedPage({ user, data }) { - return ( - <> -
Protected content for {user.email}
- 
{JSON.stringify(data, null, 2)}
- 
{JSON.stringify(user, null, 2)}
- - ) -} - -export const getServerSideProps = async (ctx) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient(ctx) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return { - redirect: { - destination: '/', - permanent: false, - }, - } - - // Run queries with RLS on the server - const { data } = await supabase.from('users').select('*') - - return { - props: { - initialSession: session, - user: session.user, - data: data ?? [], - }, - } -} -``` - - - - -```tsx -import { User, createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { GetServerSidePropsContext } from 'next' - -export default function ProtectedPage({ user, data }: { user: User; data: any }) { - return ( - <> -
Protected content for {user.email}
- 
{JSON.stringify(data, null, 2)}
- 
{JSON.stringify(user, null, 2)}
- - ) -} - -export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient(ctx) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return { - redirect: { - destination: '/', - permanent: false, - }, - } - - // Run queries with RLS on the server - const { data } = await supabase.from('users').select('*') - - return { - props: { - initialSession: session, - user: session.user, - data: data ?? [], - }, - } -} -``` - - - - -## Server-side data fetching to OAuth APIs using `provider token` {#oauth-provider-token} - -When using third-party auth providers, sessions are initiated with an additional `provider_token` field which is persisted in the auth cookie and can be accessed within the session object. The `provider_token` can be used to make API requests to the OAuth provider's API endpoints on behalf of the logged-in user. - - - - -```jsx -import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' - -export default function ProtectedPage({ user, allRepos }) { - return ( - <> -
Protected content for {user.email}
-

Data fetched with provider token:

- 
{JSON.stringify(allRepos, null, 2)}
-

user:

- 
{JSON.stringify(user, null, 2)}
- - ) -} - -export const getServerSideProps = async (ctx) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient(ctx) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return { - redirect: { - destination: '/', - permanent: false, - }, - } - - // Retrieve provider_token & logged in user's third-party id from metadata - const { provider_token, user } = session - const userId = user.user_metadata.user_name - - const allRepos = await ( - await fetch(`https://api.github.com/search/repositories?q=user:${userId}`, { - method: 'GET', - headers: { - Authorization: `token ${provider_token}`, - }, - }) - ).json() - - return { props: { user, allRepos } } -} -``` - - - - -```tsx -import { User, createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { GetServerSidePropsContext } from 'next' - -export default function ProtectedPage({ user, allRepos }: { user: User; allRepos: any }) { - return ( - <> -
Protected content for {user.email}
-

Data fetched with provider token:

- 
{JSON.stringify(allRepos, null, 2)}
-

user:

- 
{JSON.stringify(user, null, 2)}
- - ) -} - -export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient(ctx) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return { - redirect: { - destination: '/', - permanent: false, - }, - } - - // Retrieve provider_token & logged in user's third-party id from metadata - const { provider_token, user } = session - const userId = user.user_metadata.user_name - - const allRepos = await ( - await fetch(`https://api.github.com/search/repositories?q=user:${userId}`, { - method: 'GET', - headers: { - Authorization: `token ${provider_token}`, - }, - }) - ).json() - - return { props: { user, allRepos } } -} -``` - - - - -## Protecting API routes - -Create a server supabase client to retrieve the logged in user's session: - - - - -```jsx title=pages/api/protected-route.js -import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' - -const ProtectedRoute = async (req, res) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient({ req, res }) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return res.status(401).json({ - error: 'not_authenticated', - description: 'The user does not have an active session or is not authenticated', - }) - - // Run queries with RLS on the server - const { data } = await supabase.from('test').select('*') - res.json(data) -} - -export default ProtectedRoute -``` - - - - -```tsx title=pages/api/protected-route.ts -import { NextApiHandler } from 'next' -import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' - -const ProtectedRoute: NextApiHandler = async (req, res) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient({ req, res }) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return res.status(401).json({ - error: 'not_authenticated', - description: 'The user does not have an active session or is not authenticated', - }) - - // Run queries with RLS on the server - const { data } = await supabase.from('test').select('*') - res.json(data) -} - -export default ProtectedRoute -``` - - - - -## Auth with Next.js Middleware - -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 { NextResponse } from 'next/server' -import type { NextRequest } from 'next/server' - -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 }) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - // Check auth condition - if (session?.user.email?.endsWith('@gmail.com')) { - // Authentication successful, forward request to protected route. - return res - } - - // Auth condition not met, redirect to home page. - const redirectUrl = req.nextUrl.clone() - redirectUrl.pathname = '/' - redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname) - return NextResponse.redirect(redirectUrl) -} - -export const config = { - matcher: '/middleware-protected', -} -``` - -## Migration Guide - -### Migrating to v0.5.X - -To make these helpers more flexible as well as more maintainable and easier to upgrade for new versions of Next.js, we're stripping them down to the most useful part which is managing the cookies and giving you an authenticated supabase-js client in any environment (client, server, middleware/edge). - -Therefore we're marking the `withApiAuth`, `withPageAuth`, and `withMiddlewareAuth` higher order functions as deprectaed and they will be removed in the next **minor** release (v0.6.X). - -Please follow the steps below to update your API routes, pages, and middleware handlers. Thanks! - -#### `withApiAuth` deprecated! - -Use `createServerSupabaseClient` within your `NextApiHandler`: - - - - -```tsx title=pages/api/protected-route.ts -import { withApiAuth } from '@supabase/auth-helpers-nextjs' - -export default withApiAuth(async function ProtectedRoute(req, res, supabase) { - // Run queries with RLS on the server - const { data } = await supabase.from('test').select('*') - res.json(data) -}) -``` - - - - -```tsx title=pages/api/protected-route.ts -import { NextApiHandler } from 'next' -import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs' - -const ProtectedRoute: NextApiHandler = async (req, res) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient({ req, res }) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return res.status(401).json({ - error: 'not_authenticated', - description: 'The user does not have an active session or is not authenticated', - }) - - // Run queries with RLS on the server - const { data } = await supabase.from('test').select('*') - res.json(data) -} - -export default ProtectedRoute -``` - - - - -#### `withPageAuth` deprecated! - -Use `createServerSupabaseClient` within `getServerSideProps`: - - - - -```tsx title=pages/profile.tsx -import { withPageAuth, User } from '@supabase/auth-helpers-nextjs' - -export default function Profile({ user }: { user: User }) { - return 
{JSON.stringify(user, null, 2)}
-} - -export const getServerSideProps = withPageAuth({ redirectTo: '/' }) -``` - - - - -```tsx title=pages/profile.js -import { createServerSupabaseClient, User } from '@supabase/auth-helpers-nextjs' -import { GetServerSidePropsContext } from 'next' - -export default function Profile({ user }: { user: User }) { - return 
{JSON.stringify(user, null, 2)}
-} - -export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { - // Create authenticated Supabase Client - const supabase = createServerSupabaseClient(ctx) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - if (!session) - return { - redirect: { - destination: '/', - permanent: false, - }, - } - - return { - props: { - initialSession: session, - user: session.user, - }, - } -} -``` - - - - -#### `withMiddlewareAuth` deprecated! - - - - -```tsx title=middleware.ts -import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs' - -export const middleware = withMiddlewareAuth({ - redirectTo: '/', - authGuard: { - isPermitted: async (user) => { - return user.email?.endsWith('@gmail.com') ?? false - }, - redirectTo: '/insufficient-permissions', - }, -}) - -export const config = { - matcher: '/middleware-protected', -} -``` - - - - -```tsx title=middleware.ts -import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { NextResponse } from 'next/server' -import type { NextRequest } from 'next/server' - -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 }) - // Check if we have a session - const { - data: { session }, - } = await supabase.auth.getSession() - - // Check auth condition - if (session?.user.email?.endsWith('@gmail.com')) { - // Authentication successful, forward request to protected route. - return res - } - - // Auth condition not met, redirect to home page. - const redirectUrl = req.nextUrl.clone() - redirectUrl.pathname = '/' - redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname) - return NextResponse.redirect(redirectUrl) -} - -export const config = { - matcher: '/middleware-protected', -} -``` - - - - -### Migrating to v0.4.X and supabase-js v2 - -With the update to `supabase-js` v2 the `auth` API routes are no longer required, therefore you can go ahead and delete your `auth` directory under the `/pages/api/` directory. Please refer to the [v2 migration guide](/docs/reference/javascript/upgrade-guide) for the full set of changes within supabase-js. - -The `/api/auth/logout` API route has been removed, please use the `signout` method instead: - -```jsx - -``` - -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: - -```tsx -// client-side -import type { Database } from 'types_db' -const [supabaseClient] = useState(() => createBrowserSupabaseClient()) - -// 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({ - req, - res, - }) - const { - data: { user }, - } = await supabaseServerClient.auth.getUser() - - res.status(200).json({ name: user?.name ?? '' }) -} -``` - -- The `UserProvider` has been replaced by the `SessionContextProvider`. Make sure to wrap your `pages/_app.js` componenent with the `SessionContextProvider`. Then, throughout your application you can use the `useSessionContext` hook to get the `session` and the `useSupabaseClient` hook to get an authenticated `supabaseClient`. -- The `useUser` hook now returns the `user` object or `null`. -- Usage with TypeScript: You can pass types that were [generated with the Supabase CLI](/docs/reference/javascript/typescript-support#generating-types) to the Supabase Client to get enhanced type safety and auto completion: - -Creating a new supabase client object: - -```tsx -import { Database } from '../database.types' - -const [supabaseClient] = useState(() => createBrowserSupabaseClient()) -``` - -Retrieving a supabase client object from the SessionContext: - -```tsx -import { useSupabaseClient } from '@supabase/auth-helpers-react' -import { Database } from '../database.types' - -const supabaseClient = useSupabaseClient() -``` - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/faq.mdx b/apps/docs/pages/faq.mdx index 927aadb9a8d..eced1e89829 100644 --- a/apps/docs/pages/faq.mdx +++ b/apps/docs/pages/faq.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: faq -title: FAQs -description: 'Most frequently asked questions regarding Supabase' ---- + id: 'faq', + title: 'FAQs', + description: 'Most frequently asked questions regarding Supabase', +} ### Where do I find support? @@ -38,3 +38,7 @@ We only support PostgreSQL. It's unlikely we'll ever move away from Postgres; ho We officially support [JavaScript](/docs/reference/javascript/installing) and [Flutter](/docs/reference/dart/installing). You can find community-supported libraries in our [GitHub Community](https://github.com/supabase-community), and you can also help us to identify the most popular languages by [voting for a new client library](https://github.com/supabase/supabase/discussions/5). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/hosting/docker.mdx b/apps/docs/pages/guides/hosting/docker.mdx index 9ac65d27c19..db9bcdf0563 100644 --- a/apps/docs/pages/guides/hosting/docker.mdx +++ b/apps/docs/pages/guides/hosting/docker.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: docker -title: Self-hosting with Docker -description: How to configure and deploy Supabase. -sidebar_label: Docker ---- + id: 'docker', + title: 'Self-hosting with Docker', + description: 'How to configure and deploy Supabase.', + sidebar_label: 'Docker', +} Docker is the easiest way to get started with self-hosted Supabase. @@ -114,3 +114,7 @@ See the following guides to deploy Docker Compose setup using your preferred too - Got a question? [Ask here](https://github.com/supabase/supabase/discussions). - Sign in: [app.supabase.com](https://app.supabase.com) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/hosting/overview.mdx b/apps/docs/pages/guides/hosting/overview.mdx index d148264bd44..27c77f0421a 100644 --- a/apps/docs/pages/guides/hosting/overview.mdx +++ b/apps/docs/pages/guides/hosting/overview.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: overview -title: Self Hosting -sidebar_label: Overview -description: Getting started with Self Hosting. ---- + id: 'overview', + title: 'Self Hosting', + sidebar_label: 'Overview', + description: 'Getting started with Self Hosting.', +} There are several ways to use Supabase: @@ -155,3 +155,7 @@ While Supabase officially supports Docker, we have several other deployment stra - [supabase-kubernetes](https://github.com/supabase-community/supabase-kubernetes) (Unofficial) - [supabase-terraform](https://github.com/supabase-community/supabase-terraform) (Unofficial) - [supabase-traefik](https://github.com/supabase-community/supabase-traefik) (Unofficial) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/appsmith.mdx b/apps/docs/pages/guides/integrations/appsmith.mdx index 7fd9e3b8711..f65602ef9fc 100644 --- a/apps/docs/pages/guides/integrations/appsmith.mdx +++ b/apps/docs/pages/guides/integrations/appsmith.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: appsmith -title: 'Appsmith' -description: 'Get started with Supabase and Appsmith, an open-source framework for building internal tools.' ---- + id: 'appsmith', + title: 'Appsmith', + description: + 'Get started with Supabase and Appsmith, an open-source framework for building internal tools.', +} This guide explains how to quickly build a Support Dashboard by connecting a Supabase back-end to an Appsmith front-end. @@ -166,3 +167,7 @@ SELECT * FROM public."tickets"; - [Appsmith](https://www.appsmith.com/) official website. - [Appsmith GitHub](https://github.com/appsmithorg). - [Appsmith](https://docs.appsmith.com/) documentation. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/auth0.mdx b/apps/docs/pages/guides/integrations/auth0.mdx index 5e949ff119b..e344acacdb8 100644 --- a/apps/docs/pages/guides/integrations/auth0.mdx +++ b/apps/docs/pages/guides/integrations/auth0.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: auth0 -title: 'Auth0' -description: 'Swap out Supabase authentication with Auth0. Let Auth0 handle tokens and signing users in and out, while Supabase enforces authorization policies with Row Level Security (RLS).' ---- + id: 'auth0', + title: 'Auth0', + description: + 'Swap out Supabase authentication with Auth0. Let Auth0 handle tokens and signing users in and out, while Supabase enforces authorization policies with Row Level Security (RLS).', +} This guide steps through building a Next.js application with Auth0 and Supabase. We configure Auth0 to handle authenticating users and managing tokens, while writing our authorization logic in Supabase - using Row Level Security policies. @@ -463,3 +464,7 @@ Now when we refresh our application, we should finally see our list of `todos`! - [Using Next.js and Auth0 with Supabase article](https://auth0.com/blog/using-nextjs-and-auth0-with-supabase/). - [Auth0 community](https://community.auth0.com/). - [Auth0 documentation](https://auth0.com/docs/). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/authsignal.mdx b/apps/docs/pages/guides/integrations/authsignal.mdx index 4bffbb103c4..250b822b483 100644 --- a/apps/docs/pages/guides/integrations/authsignal.mdx +++ b/apps/docs/pages/guides/integrations/authsignal.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: authsignal -title: 'Authsignal' -description: 'Add an MFA step after sign-in. Use Supabase Auth to sign in with email and password and Authsignal to initiate an Authenticator App challenge.' ---- + id: 'authsignal', + title: 'Authsignal', + description: + 'Add an MFA step after sign-in. Use Supabase Auth to sign in with email and password and Authsignal to initiate an Authenticator App challenge.', +} This guide shows how to integrate [Authsignal](https://www.authsignal.com/) with [Next.js](https://nextjs.org/) and [Supabase](https://supabase.com/) in order to add an MFA step after sign-in. @@ -582,3 +583,7 @@ Then if you sign out, you'll be prompted to complete an MFA challenge when signi - To learn more about Authsignal take a look at the [API Documentation](https://docs.authsignal.com/). - You can customize the look and feel of the Authsignal Prebuilt MFA page [here](https://portal.authsignal.com/organisations/tenants/customizations). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/clerk.mdx b/apps/docs/pages/guides/integrations/clerk.mdx index f8639c52a00..8a7b50e1744 100644 --- a/apps/docs/pages/guides/integrations/clerk.mdx +++ b/apps/docs/pages/guides/integrations/clerk.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: clerk -title: 'Clerk' -description: 'This guide explains how to connect your Supabase database with Clerk, a powerful authentication provider built for the modern web.' ---- + id: 'clerk', + title: 'Clerk', + description: + 'This guide explains how to connect your Supabase database with Clerk, a powerful authentication provider built for the modern web.', +} This guide explains how to connect your Supabase database with [Clerk](https://clerk.dev), an authentication provider built for the modern web. @@ -184,3 +185,7 @@ If you would like the requesting user ID from the JWT to automatically populate - [Next.js + Supabase + Clerk tutorial](https://clerk.dev/blog/nextjs-supabase-todos-with-multifactor-authentication) - [Clerk guide for Next.js Authentication](https://docs.clerk.dev/get-started/nextjs) - [Clerk Community Discord channel](https://discord.com/invite/b5rXHjAg7A) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/dashibase.mdx b/apps/docs/pages/guides/integrations/dashibase.mdx index d51acbd812c..962f1397b29 100644 --- a/apps/docs/pages/guides/integrations/dashibase.mdx +++ b/apps/docs/pages/guides/integrations/dashibase.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: dashibase -title: 'Dashibase' -description: 'Create an internal CRUD dashboard with Supabase and Dashibase in 15 mins.' ---- + id: 'dashibase', + title: 'Dashibase', + description: 'Create an internal CRUD dashboard with Supabase and Dashibase in 15 mins.', +} Are you tired of building admin panels? [Dashibase](https://dashibase.com/) is a super fast way to build internal CRUD dashboards with a Notion-like UI. @@ -99,3 +99,7 @@ P.S. How long did we take? :) - [Dashibase open-source repo](https://github.com/dashibase) - [Dashibase Twitter](https://twitter.com/dashibase) - [Dashibase Discord](https://discord.gg/crhDFYvbbq) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/dhiwise.mdx b/apps/docs/pages/guides/integrations/dhiwise.mdx index 172ff8f67b2..68e57e41ceb 100644 --- a/apps/docs/pages/guides/integrations/dhiwise.mdx +++ b/apps/docs/pages/guides/integrations/dhiwise.mdx @@ -1,13 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: dhiwise -title: 'DhiWise' -description: 'Get started with Supabase and DhiWise. Convert your Figma designs into Flutter apps, store data, and authenticate your users' ---- - -import select from '/docs/img/guides/integrations/dhiwise/select.png' -import create from '/docs/img/guides/integrations/dhiwise/create.png' + id: 'dhiwise', + title: 'DhiWise', + description: + 'Get started with Supabase and DhiWise. Convert your Figma designs into Flutter apps, store data, and authenticate your users', +} This guide explains how to connect Supabase backend to DhiWise Flutter application quickly. @@ -66,7 +64,9 @@ After downloading the application source code, When you first integrate Supabase in your DhiWise Flutter application, You will be asked to add [Supabase auth key and URL](##step-3-find-the-api-key-and-url). When you add them, all the tables available in your Supabase project will be synced in DhiWise. You can integrate Select and Create queries on your Flutter screen for a particular table in DhiWise. -

Select records

+### Select records + +![Create](/docs/img/guides/integrations/dhiwise/select.png) #### **Step 1:** @@ -197,3 +197,7 @@ Finally, you have added Supabase to your application to create records from your - [DhiWise Official Website](https://dhiwise.com) - [DhiWise Documentation](https://docs.dhiwise.com) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/directus.mdx b/apps/docs/pages/guides/integrations/directus.mdx index 4fc5bc5c7ae..ba6e59e46cd 100644 --- a/apps/docs/pages/guides/integrations/directus.mdx +++ b/apps/docs/pages/guides/integrations/directus.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: directus -title: 'Directus' -description: 'In this guide, we will show you how to create a Supabase project, install the Directus platform locally and configure the two to connect.' ---- + id: 'directus', + title: 'Directus', + description: + 'In this guide, we will show you how to create a Supabase project, install the Directus platform locally and configure the two to connect.', +} In this guide, we will demonstrate how to create a new Supabase project, install a fresh instance of the Directus platform, then configure the two to work together seamlessly. If you're unfamiliar with either of these systems, don't worry! We'll start off with an overview of each platform and explain how they complement each other, noting any overlap in capabilities. @@ -18,8 +19,7 @@ In this guide, we will demonstrate how to create a new Supabase project, install [Directus](https://directus.io/) is an open-source data platform that layers on top of any SQL database, providing a powerful suite of tools. The Directus Engine provides dynamic REST and GraphQL APIs based on your schema, hooks and automation, authentication and access control, and file transformations. Directus Studio enables engineers and non-technical users alike to browse, manage, and visualize database content through a no-code app. ---- - +} Supabase is a suite of open-source tools making Postgres databases, file storage, authentication, and edge functions more accessible to developers of all skill levels. Directus is also developer tooling and additionally provides a Data Studio that is safe and intuitive enough for anyone, including non-technical users, to use. This is the crucial bit that gives the two platforms such a strong “network effect.” When these two systems are brought together, you get a scalable datastore, limitless connectivity options, and a no-code app that allows your technical and business teams to collaborate together efficiently. @@ -131,3 +131,7 @@ Below are some additional resources to dive in and start exploring these two pla - Explore the [Supabase documentation](https://supabase.com/docs) - Join the Supabase community on [Discord](https://discord.supabase.com/) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/draftbit.mdx b/apps/docs/pages/guides/integrations/draftbit.mdx index ec5a417c6fb..357a2ef3eea 100644 --- a/apps/docs/pages/guides/integrations/draftbit.mdx +++ b/apps/docs/pages/guides/integrations/draftbit.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: draftbit -title: 'Draftbit' -description: 'Connect your Supabase postgres database to your Low-code mobile app.' ---- + id: 'draftbit', + title: 'Draftbit', + description: 'Connect your Supabase postgres database to your Low-code mobile app.', +} This guide explains how to connect a Supabase back-end to a Draftbit front-end and then configure all CRUD operations necessary to build a simple mobile app. @@ -231,3 +231,7 @@ In the API Request action: - [Draftbit](https://draftb.it/3Fkbask) official website. - [Draftbit Community](https://community.draftbit.com/home). - [Draftbit](https://docs.draftbit.com/) documentation. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/fezto.mdx b/apps/docs/pages/guides/integrations/fezto.mdx index c6b0f57b9b1..17d48db27f4 100644 --- a/apps/docs/pages/guides/integrations/fezto.mdx +++ b/apps/docs/pages/guides/integrations/fezto.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: fezto -title: 'Frontend Zero to One' -description: 'Create an app automatically from your Supabase Postgres using OpenAPI' ---- + id: 'fezto', + title: 'Frontend Zero to One', + description: 'Create an app automatically from your Supabase Postgres using OpenAPI', +} [Frontend Zero to One is](https://www.fezto.xyz) is a service which creates an app for your Supabase Postgres database on-the-fly without any drag and drop, using the OpenAPI spec provided by PostgREST. @@ -27,3 +27,7 @@ You will need: Paste both into the [FEZTO Supabase setup page](https://www.fezto.xyz/#/supabase) and click Launch. You can now share and bookmark the browser URL which includes the projectID and anon key with others to launch the same app. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/integrations.mdx b/apps/docs/pages/guides/integrations/integrations.mdx index 32560e68b35..de7a444ec58 100644 --- a/apps/docs/pages/guides/integrations/integrations.mdx +++ b/apps/docs/pages/guides/integrations/integrations.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: integrations -title: 'Supabase Marketplace' -description: 'Integrations and Partners' ---- + id: 'integrations', + title: 'Supabase Marketplace', + description: 'Integrations and Partners', +} The Supabase Marketplace brings together all the tools you need to extend your Supabase project. This includes: @@ -34,3 +34,7 @@ Integrations are assessed on the following criteria: All listings are required to have their own Terms and Conditions, Privacy Policy, and Acceptable Use Policy, and the company must have resources to meet their SLAs. - **Maintainability** All integrations are required to be maintained and functional with Supabase, and the company may be assessed on your ability to remain functional over a long time horizon. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/keyri.mdx b/apps/docs/pages/guides/integrations/keyri.mdx index 88832a46676..fdbf231660c 100644 --- a/apps/docs/pages/guides/integrations/keyri.mdx +++ b/apps/docs/pages/guides/integrations/keyri.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: keyri -title: 'Keyri' -description: 'QR authentication for an easy and flexible biometric solution across all platforms.' ---- + id: 'keyri', + title: 'Keyri', + description: + 'QR authentication for an easy and flexible biometric solution across all platforms.', +} Keyri can be used to incorporate sign-in-with-QR functionality into your Supabase app, allowing users to scan a QR code on your web app with your mobile app and be instantly logged into the web app without having to input any credentials. @@ -140,3 +141,7 @@ if (response.error != null) { .catchError((error, stackTrace) => _onError(error)); } ``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/pgmustard.mdx b/apps/docs/pages/guides/integrations/pgmustard.mdx index 820708c314c..078181c6f2c 100644 --- a/apps/docs/pages/guides/integrations/pgmustard.mdx +++ b/apps/docs/pages/guides/integrations/pgmustard.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: pgmustard -title: 'pgMustard' -description: 'Troubleshoot slow queries on Supabase with pgMustard, a visualization tool that also gives advice.' ---- + id: 'pgmustard', + title: 'pgMustard', + description: + 'Troubleshoot slow queries on Supabase with pgMustard, a visualization tool that also gives advice.', +} This guide explains how to troubleshoot slow queries on Supabase using `explain` and pgMustard. @@ -66,3 +67,7 @@ We could look into why Postgres isn’t choosing to do an index-only scan here, - [pgMustard](https://www.pgmustard.com) official website. - [pgMustard explain glossary](https://www.pgmustard.com/docs/explain). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/plasmic.mdx b/apps/docs/pages/guides/integrations/plasmic.mdx index 05ebdaedb48..2ca62ccabcb 100644 --- a/apps/docs/pages/guides/integrations/plasmic.mdx +++ b/apps/docs/pages/guides/integrations/plasmic.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: plasmic -title: 'Plasmic' -description: 'Get started with Supabase and Plasmic, an open-source framework for building internal tools.' ---- + id: 'plasmic', + title: 'Plasmic', + description: + 'Get started with Supabase and Plasmic, an open-source framework for building internal tools.', +} In this guide, we will show you how to build a crowd-sourced Pokemon Pokedex, by connecting **Supabase**, an open source Firebase backend alternative, with **Plasmic**, a visual builder for the web. While many users leverage Plasmic to quickly launch and iterate on landing pages, in this tutorial we’ll show just how powerful Plasmic can be as a general-purpose visual builder for React, which can be used to design and implement fully featured read-write applications. @@ -312,3 +313,7 @@ export function SupabaseTextField({ name, className }: { name?: string; classNam ``` In summary, by populating state into React contexts, we can store and retrieve data for use in other code components, which can be used for arbitrarily powerful interactions in Plasmic Studio. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/polyscale.mdx b/apps/docs/pages/guides/integrations/polyscale.mdx index 81c2d84a9a0..801b9eff4ec 100644 --- a/apps/docs/pages/guides/integrations/polyscale.mdx +++ b/apps/docs/pages/guides/integrations/polyscale.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: polyscale -title: 'PolyScale' -description: 'The easiest way to get low-latency reads from your Supabase database for multi-region applications is by using PolyScale, a code-free global caching service.' ---- + id: 'polyscale', + title: 'PolyScale', + description: + 'The easiest way to get low-latency reads from your Supabase database for multi-region applications is by using PolyScale, a code-free global caching service.', +} [PolyScale](https://polyscale.ai) is an intelligent, serverless database caching engine which allows low-latency reads from Supabase globally, no coding required. Supabase can be connected to PolyScale in minutes, providing you fast access to your Supabase data around the globe. @@ -63,3 +64,7 @@ That's it. ## All done! You can read more about PolyScale [here](https://www.polyscale.ai/) or check out our [documentation](https://docs.polyscale.ai/). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/prisma.mdx b/apps/docs/pages/guides/integrations/prisma.mdx index 3c23dc921cd..7334621d910 100644 --- a/apps/docs/pages/guides/integrations/prisma.mdx +++ b/apps/docs/pages/guides/integrations/prisma.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: prisma -title: 'Prisma' -description: 'Connect your Supabase postgres database to your Prisma project.' ---- + id: 'prisma', + title: 'Prisma', + description: 'Connect your Supabase postgres database to your Prisma project.', +} This guide explains how to quickly connect the Postgres database provided by Supabase to a Prisma project. @@ -162,3 +162,7 @@ alter default privileges in schema public grant all on sequences to postgres, an - [Prisma](https://prisma.io) official website. - [Prisma GitHub](https://github.com/prisma/prisma). - [Prisma](https://www.prisma.io/docs/) documentation. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/sequin.mdx b/apps/docs/pages/guides/integrations/sequin.mdx index 71a78ed742f..54f62b477c4 100644 --- a/apps/docs/pages/guides/integrations/sequin.mdx +++ b/apps/docs/pages/guides/integrations/sequin.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: sequin -title: 'Sequin' -description: 'Sync platforms like Stripe and Salesforce with your Supabase database in real-time using Sequin.' ---- + id: 'sequin', + title: 'Sequin', + description: + 'Sync platforms like Stripe and Salesforce with your Supabase database in real-time using Sequin.', +} This guide explains how to quickly setup a sync between Sequin and a Supabase Postgres database. @@ -84,3 +85,7 @@ You'll use this client to query for data in your synced schema. - [Sequin Console](https://app.sequin.io*). - [Sequin](https://docs.sequin.io/welcome) documentation. - [Sequin + Supabase + Stripe Tutorial](https://github.com/sequin-io/build-a-saas-with-next-js-supabase-stripe-and-sequin) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/snaplet.mdx b/apps/docs/pages/guides/integrations/snaplet.mdx index b93bcbeb47d..b3513fcaa7e 100644 --- a/apps/docs/pages/guides/integrations/snaplet.mdx +++ b/apps/docs/pages/guides/integrations/snaplet.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: snaplet -title: 'Snaplet' -description: 'Get started with Supabase and Snaplet, a developer tool for working with safe, versioned, up-to-date production-like data' ---- + id: 'snaplet', + title: 'Snaplet', + description: + 'Get started with Supabase and Snaplet, a developer tool for working with safe, versioned, up-to-date production-like data', +} This step-by-step guide explains how to use Snaplet to clone your production Supabase project into another development database. @@ -116,3 +117,7 @@ Once completed, you will be presented with a list of databases that are connecte As a Supabase user, you can see how this solves an issue developers all typically experience when attempting to create multiple development environments and populating each of those environments with data that can be worked with. Snaplet simplifies this process down to creating the respective Supabase projects, connecting the data source (The production database) to Snaplet and telling Snaplet where to restore that data (staging and development databases). If you want to learn more about Snaplet, you can explore the Snaplet [docs](https://docs.snaplet.dev/). If you have any questions, feel free to [reach out on Discord](https://discord.com/invite/6HUuajc866). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/stytch.mdx b/apps/docs/pages/guides/integrations/stytch.mdx index 8dec88771e9..0b6ceee6c4f 100644 --- a/apps/docs/pages/guides/integrations/stytch.mdx +++ b/apps/docs/pages/guides/integrations/stytch.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: stytch -title: 'Stytch' -description: "Build a Next.js application powered by password-less authentication from Stytch, and Supabase's Row Level Security (RLS)." ---- + id: 'stytch', + title: 'Stytch', + description: + "Build a Next.js application powered by password-less authentication from Stytch, and Supabase's Row Level Security (RLS).", +} In this guide we will build a simple expense tracker web application using Stytch, Supabase, and Next.js. @@ -656,3 +657,7 @@ With these two changes you will now have a working Google One Tap authentication - [Stytch blog](https://stytch.com/blog?utm_source=supabase&utm_medium=guide) - [Stytch documentation](https://stytch.com/docs?utm_source=supabase&utm_medium=guide) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/supertokens.mdx b/apps/docs/pages/guides/integrations/supertokens.mdx index bc2d0d8f7f4..add7a43d02f 100644 --- a/apps/docs/pages/guides/integrations/supertokens.mdx +++ b/apps/docs/pages/guides/integrations/supertokens.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: supertokens -title: 'SuperTokens' -description: 'Create a Next.js application secured by SuperTokens and PostgreSQL Row Level Security.' ---- + id: 'supertokens', + title: 'SuperTokens', + description: + 'Create a Next.js application secured by SuperTokens and PostgreSQL Row Level Security.', +} [SuperTokens](https://www.supertokens.com) is an open source authentication solution which provides many stratergies for authenticating and managing users. You can use the managed service for easy setup or you can self host the solution to have complete control over your data. @@ -399,3 +400,7 @@ If you navigate to your table you should see a new row with the user's `user_id` - [SuperTokens](https://supertokens.com/) official website. - [SuperTokens community](https://supertokens.com/discord). - [SuperTokens documentation](https://supertokens.com/docs/guides). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/integrations/vercel.mdx b/apps/docs/pages/guides/integrations/vercel.mdx index 29672dbaa40..dc147aa119e 100644 --- a/apps/docs/pages/guides/integrations/vercel.mdx +++ b/apps/docs/pages/guides/integrations/vercel.mdx @@ -1,10 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: vercel -title: 'Vercel' -description: The fastest way to get up and running with an application that uses Supabase is with Vercel's Next.js starter and Supabase integration. ---- + id: 'vercel', + title: 'Vercel', + description: + "The fastest way to get up and running with an application that uses Supabase is with Vercel's Next.js starter and Supabase integration.", +} This guide steps through using Vercel's dashboard to create a Next.js project integrated with Supabase. To further streamline the process, we will be using the Next.js starter template, which can be automatically forked to a new GitHub repo, without leaving the dashboard! @@ -241,3 +242,7 @@ export default function Home() { - [Vercel blog](https://vercel.com/blog). - [Vercel docs](https://vercel.com/docs). - [Vercel Integration docs](https://vercel.com/docs/integrations) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/migrations/firebase-auth.mdx b/apps/docs/pages/guides/migrations/firebase-auth.mdx index b6ca07e215d..a054f68de51 100644 --- a/apps/docs/pages/guides/migrations/firebase-auth.mdx +++ b/apps/docs/pages/guides/migrations/firebase-auth.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: firebase-auth -title: 'Firebase Auth Migration' -description: 'Migrate Firebase auth users to a Supabase project.' -sidebar_label: Firebase Auth ---- + id: 'firebase-auth', + title: 'Firebase Auth Migration', + description: 'Migrate Firebase auth users to a Supabase project.', + sidebar_label: 'Firebase Auth', +} Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/auth) to help migrate auth users from a Firebase project to a Supabase project. There are two parts to the migration process: @@ -87,3 +87,7 @@ For more advanced migrations, including the use of a middleware server component - [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase) - [Firestore Data Migration](/docs/guides/migrations/firestore-data) - [Firestore Storage Migration](/docs/guides/migrations/firebase-storage) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/migrations/firebase-storage.mdx b/apps/docs/pages/guides/migrations/firebase-storage.mdx index ab25ae4c019..df644481f42 100644 --- a/apps/docs/pages/guides/migrations/firebase-storage.mdx +++ b/apps/docs/pages/guides/migrations/firebase-storage.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: firebase-storage -title: 'Firebase Storage Migration' -description: 'Migrate Firebase Storage files to Supabase Storage.' -sidebar_label: Firebase Storage ---- + id: 'firebase-storage', + title: 'Firebase Storage Migration', + description: 'Migrate Firebase Storage files to Supabase Storage.', + sidebar_label: 'Firebase Storage', +} Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/storage) to convert storage files from Firebase Storage to Supabase Storage. Conversion is a two-step process: @@ -66,3 +66,7 @@ If the bucket doesn't exist, it's created as a `non-public` bucket. You must set - [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase) - [Firestore Data Migration](/docs/guides/migrations/firestore-data) - [Firebase Auth Migration](/docs/guides/migrations/firebase-auth) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/migrations/firestore-data.mdx b/apps/docs/pages/guides/migrations/firestore-data.mdx index 6b64d110ad4..936c8753758 100644 --- a/apps/docs/pages/guides/migrations/firestore-data.mdx +++ b/apps/docs/pages/guides/migrations/firestore-data.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: firestore-data -title: 'Firestore Data Migration' -description: 'Migrate your Firebase Firestore database to a Supabase Postgres database.' -sidebar_label: Firestore Data ---- + id: 'firestore-data', + title: 'Firestore Data Migration', + description: 'Migrate your Firebase Firestore database to a Supabase Postgres database.', + sidebar_label: 'Firestore Data', +} Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/firestore) to convert data from a Firebase Firestore database to a Supabase PostgreSQL database. The process copies the entire contents of a single Firestore `collection` to a single PostgreSQL `table`. @@ -210,3 +210,7 @@ The result is two separate JSON files: - [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase) - [Firestore Storage Migration](/docs/guides/migrations/firebase-storage) - [Firebase Auth Migration](/docs/guides/migrations/firebase-auth) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/migrations/heroku.mdx b/apps/docs/pages/guides/migrations/heroku.mdx index e7409148e7b..9ab54a1ce4a 100644 --- a/apps/docs/pages/guides/migrations/heroku.mdx +++ b/apps/docs/pages/guides/migrations/heroku.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: heroku -title: 'Migrate from Heroku to Supabase' -description: 'Migrate your Heroku Postgres database to Supabase.' -sidebar_label: Heroku ---- + id: 'heroku', + title: 'Migrate from Heroku to Supabase', + description: 'Migrate your Heroku Postgres database to Supabase.', + sidebar_label: 'Heroku', +} Supabase is one of the best [free alternatives to Heroku Postgres](https://supabase.com/alternatives/supabase-vs-heroku-postgres). This guide shows how to migrate your Heroku Postgres database to Supabase. This migration requires the [pg_dump](https://www.postgresql.org/docs/current/app-pgdump.html) and [psql](https://www.postgresql.org/docs/current/app-psql.html) CLI tools, which are installed automatically as part of the complete PostgreSQL installation package. @@ -65,3 +65,7 @@ psql -h $SUPABASE_HOST -U postgres -f heroku_dump.sql - To exclude a table: `--exclude-table=PATTERN`. Run `pg_dump --help` for a full list of options. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/with-angular.mdx b/apps/docs/pages/guides/with-angular.mdx index b2fdb96ca7b..b0d5fc21c93 100644 --- a/apps/docs/pages/guides/with-angular.mdx +++ b/apps/docs/pages/guides/with-angular.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'Angular', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-ionic-vue.mdx b/apps/docs/pages/guides/with-ionic-vue.mdx index 2d641caf862..2f368771b78 100644 --- a/apps/docs/pages/guides/with-ionic-vue.mdx +++ b/apps/docs/pages/guides/with-ionic-vue.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'Ionic Vue', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png) diff --git a/apps/docs/pages/guides/with-nextjs.mdx b/apps/docs/pages/guides/with-nextjs.mdx index b637a338f98..eb06dc5b851 100644 --- a/apps/docs/pages/guides/with-nextjs.mdx +++ b/apps/docs/pages/guides/with-nextjs.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'Next.js', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-nuxt-3.mdx b/apps/docs/pages/guides/with-nuxt-3.mdx index e48e70a1d07..b4f5af0a1a3 100644 --- a/apps/docs/pages/guides/with-nuxt-3.mdx +++ b/apps/docs/pages/guides/with-nuxt-3.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'Nuxt 3', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-react.mdx b/apps/docs/pages/guides/with-react.mdx index fec5bedd3f0..1f7804f15ab 100644 --- a/apps/docs/pages/guides/with-react.mdx +++ b/apps/docs/pages/guides/with-react.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'React', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-solidjs.mdx b/apps/docs/pages/guides/with-solidjs.mdx index fa662a75c80..f5a65665f3f 100644 --- a/apps/docs/pages/guides/with-solidjs.mdx +++ b/apps/docs/pages/guides/with-solidjs.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'SolidJS', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-svelte.mdx b/apps/docs/pages/guides/with-svelte.mdx index 8507c5516e5..69cdea17b87 100644 --- a/apps/docs/pages/guides/with-svelte.mdx +++ b/apps/docs/pages/guides/with-svelte.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'Svelte', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-sveltekit.mdx b/apps/docs/pages/guides/with-sveltekit.mdx index 317d0a4d329..c2f8ec14de0 100644 --- a/apps/docs/pages/guides/with-sveltekit.mdx +++ b/apps/docs/pages/guides/with-sveltekit.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'SvelteKit', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/guides/with-vue-3.mdx b/apps/docs/pages/guides/with-vue-3.mdx index ca27d7ad50d..a1ec84a8c92 100644 --- a/apps/docs/pages/guides/with-vue-3.mdx +++ b/apps/docs/pages/guides/with-vue-3.mdx @@ -7,9 +7,6 @@ export const meta = { sidebar_label: 'Vue 3', } -import QuickstartIntro from '/components/MDX/quickstart_intro.mdx' -import ProjectSetup from '/components/MDX/project_setup.mdx' - ![Supabase User Management example](/docs/img/user-management-demo.png) diff --git a/apps/docs/pages/index.tsx b/apps/docs/pages/index.tsx index 7be96f8bb61..f915b10605b 100644 --- a/apps/docs/pages/index.tsx +++ b/apps/docs/pages/index.tsx @@ -22,7 +22,7 @@ export default function Home({ ) } export async function getStaticProps() { - const doc = getDocsBySlug('docs/introduction') + const doc = getDocsBySlug('pages/introduction') const content = await serialize(doc.content || '') return { props: { diff --git a/apps/docs/pages/reference.mdx b/apps/docs/pages/reference.mdx index f2cfbeb10fe..3b5e71fb512 100644 --- a/apps/docs/pages/reference.mdx +++ b/apps/docs/pages/reference.mdx @@ -1,11 +1,11 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: reference -title: Reference Documentation -sidebar_label: Reference Documentation -hide_table_of_contents: true ---- + id: 'reference', + title: 'Reference Documentation', + sidebar_label: 'Reference Documentation', + hide_table_of_contents: true, +} Reference documentation for the official Supabase client libraries, APIs, and tools. diff --git a/apps/docs/pages/support.mdx b/apps/docs/pages/support.mdx index e4ede2f14b3..175fb0d0c9b 100644 --- a/apps/docs/pages/support.mdx +++ b/apps/docs/pages/support.mdx @@ -1,10 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { -id: support -title: Support -description: Supabase Support ---- + id: 'support', + title: 'Support', + description: 'Supabase Support', +} How can we help?