diff --git a/apps/temp-docs/docs/guides/auth/auth-helpers/nextjs.mdx b/apps/temp-docs/docs/guides/auth/auth-helpers/nextjs.mdx index 4e8ffdd87dc..569770782e6 100644 --- a/apps/temp-docs/docs/guides/auth/auth-helpers/nextjs.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-helpers/nextjs.mdx @@ -13,14 +13,12 @@ This submodule provides convenience helpers for implementing user authentication ## Install the Next.js helper library - - + scrollable + size="small" + type="underlined" + defaultActiveId="npm" +> + ```sh npm install @supabase/auth-helpers-nextjs @@ -37,8 +35,8 @@ Additionally, install the **React Auth Helpers** for components and hooks that c npm install @supabase/auth-helpers-react ``` - - + + ```sh yarn add @supabase/auth-helpers-nextjs @@ -55,7 +53,7 @@ Additionally, install the **React Auth Helpers** for components and hooks that c yarn add @supabase/auth-helpers-react ``` - + ## Set up environment variables @@ -70,12 +68,12 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY ## Basic Setup - + scrollable + size="small" + type="underlined" + defaultActiveId="js" +> + Wrap your `pages/_app.js` component with the `SessionContextProvider` component: @@ -99,8 +97,8 @@ function MyApp({ Component, pageProps }) { } ``` - - + + Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component: @@ -130,7 +128,7 @@ function MyApp({ } ``` - + You can now determine if a user is authenticated by checking that the `user` object returned by the `useUser()` hook is defined. @@ -272,13 +270,7 @@ Both `withApiAuth` and `withPageAuth` return a supabase client that you can use ```js import { User, withPageAuth } from '@supabase/auth-helpers-nextjs' -export default function ProtectedPage({ - user, - data, -}: { - user: User, - data: any, -}) { +export default function ProtectedPage({ user, data }: { user: User, data: any }) { return ( <>
Protected content for {user.email}
@@ -305,13 +297,7 @@ When using third-party auth providers, sessions are initiated with an additional ```js import { User, withPageAuth } from '@supabase/auth-helpers-nextjs' -export default function ProtectedPage({ - user, - allRepos, -}: { - user: User, - allRepos: any, -}) { +export default function ProtectedPage({ user, allRepos }: { user: User, allRepos: any }) { return ( <>
Protected content for {user.email}
@@ -342,15 +328,12 @@ export const getServerSideProps = withPageAuth({ 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}`, - }, - } - ) + await fetch(`https://api.github.com/search/repositories?q=user:${userId}`, { + method: 'GET', + headers: { + Authorization: `token ${provider_token}`, + }, + }) ).json() return { props: { allRepos, user } } diff --git a/apps/temp-docs/docs/guides/auth/auth-helpers/remix.mdx b/apps/temp-docs/docs/guides/auth/auth-helpers/remix.mdx index fcfd3c57c0e..f180f8b207f 100644 --- a/apps/temp-docs/docs/guides/auth/auth-helpers/remix.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-helpers/remix.mdx @@ -13,14 +13,12 @@ This submodule provides convenience helpers for implementing user authentication ## Install the Remix helper library - - + scrollable + size="small" + type="underlined" + defaultActiveId="npm" +> + ```sh npm install @supabase/auth-helpers-remix @@ -30,8 +28,8 @@ This library supports the following tooling versions: - Remix: `>=1.7.2` - - + + ```sh yarn add @supabase/auth-helpers-remix @@ -41,7 +39,7 @@ This library supports the following tooling versions: - Remix: `>=1.7.2` - + ## Set up environment variables @@ -56,12 +54,12 @@ SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY ## Loader - + scrollable + size="small" + type="underlined" + defaultActiveId="js" +> + Loader functions run on the server immediately before the component is rendered. They respond to all GET requests on a route. You can create an authenticated Supabase client by calling the `createServerClient` function and passing it your `SUPABASE_URL`, `SUPABASE_ANON_KEY`, and a `Request` and `Response`. @@ -95,8 +93,8 @@ export const loader = async ({ request }) => { > Supabase will set cookie headers to manage the user's auth session, therefore, the `response.headers` must be returned from the `Loader` function. - - + + Loader functions run on the server immediately before the component is rendered. You can create an authenticated Supabase client by calling the `createServerClient` function and passing it your `SUPABASE_URL`, `SUPABASE_ANON_KEY`, and a `Request` and `Response`. @@ -104,11 +102,7 @@ Loader functions run on the server immediately before the component is rendered. import { LoaderFunction, json } from '@remix-run/node' // change this import to whatever runtime you are using import { createServerClient } from '@supabase/auth-helpers-remix' -export const loader: LoaderFunction = async ({ - request, -}: { - request: Request, -}) => { +export const loader: LoaderFunction = async ({ request }: { request: Request }) => { const response = new Response() const supabaseClient = createServerClient( process.env.SUPABASE_URL, @@ -129,18 +123,18 @@ export const loader: LoaderFunction = async ({ > Supabase will set cookie headers to manage the user's auth session, therefore, the `response.headers` must be returned from the `Loader` function. - + ## Action - + scrollable + size="small" + type="underlined" + defaultActiveId="js" +> + Action functions run on the server and respond to HTTP requests to a route, other than GET - POST, PUT, PATCH, DELETE etc. You can create an authenticated Supabase client by calling the `createServerClient` function and passing it your `SUPABASE_URL`, `SUPABASE_ANON_KEY`, and a `Request` and `Response`. @@ -170,8 +164,8 @@ export const action = async ({ request }) => { > Supabase will set cookie headers to manage the user's auth session, therefore, the `response.headers` must be returned from the `Action` function. - - + + Action functions run on the server and respond to HTTP requests to a route, other than GET - POST, PUT, PATCH, DELETE etc. You can create an authenticated Supabase client by calling the `createServerClient` function and passing it your `SUPABASE_URL`, `SUPABASE_ANON_KEY`, and a `Request` and `Response`. @@ -179,11 +173,7 @@ Action functions run on the server and respond to HTTP requests to a route, othe import { ActionFunction, json } from '@remix-run/node' // change this import to whatever runtime you are using import { createServerClient } from '@supabase/auth-helpers-remix' -export const action: ActionFunction = async ({ - request, -}: { - request: Request, -}) => { +export const action: ActionFunction = async ({ request }: { request: Request }) => { const response = new Response() const supabaseClient = createServerClient( @@ -205,7 +195,7 @@ export const action: ActionFunction = async ({ > Supabase will set cookie headers to manage the user's auth session, therefore, the `response.headers` must be returned from the `Action` function. - + ## Session and User @@ -229,13 +219,12 @@ const user = session?.user ## Client-side - + In order to use the Supabase client in the browser - fetching data in `useEffect` or subscribing to realtime events - we need to do a little more plumbing. Remix does not include a way to make environment variables available to the browser, so we need to pipe them through from a `loader` function in our `root.jsx` route and attach them to the `window`. @@ -283,10 +272,7 @@ import { ScrollRestoration, useLoaderData, } from '@remix-run/react' -import { - createBrowserClient, - createServerClient, -} from '@supabase/auth-helpers-remix' +import { createBrowserClient, createServerClient } from '@supabase/auth-helpers-remix' export const meta = () => ({ charset: 'utf-8', @@ -331,9 +317,8 @@ export default function App() { Now we can call `createBrowserClient` in our components to fetch data client-side, or subscribe to realtime events - changes in the database. - - - + + In order to use the Supabase client in the browser - fetching data in `useEffect` or subscribing to realtime events - we need to do a little more plumbing. Remix does not include a way to make environment variables available to the browser, so we need to pipe them through from a `loader` function in our `root.tsx` route and attach them to the `window`. @@ -381,10 +366,7 @@ import { ScrollRestoration, useLoaderData, } from '@remix-run/react' -import { - createBrowserClient, - createServerClient, -} from '@supabase/auth-helpers-remix' +import { createBrowserClient, createServerClient } from '@supabase/auth-helpers-remix' export const meta: MetaFunction = () => ({ charset: 'utf-8', @@ -429,7 +411,7 @@ export default function App() { Now we can call `createBrowserClient` in our components to fetch data client-side, or subscribe to realtime events - changes in the database. - + ## Authentication @@ -449,12 +431,12 @@ Given this Remix `
` component. ### Signing Up - + scrollable + size="small" + type="underlined" + defaultActiveId="js" +> + Any of the [supported authentication strategies from `supabase-js`](https://supabase.com/docs/reference/javascript/auth-signup) will work server-side. This is how you would handle simple `email` and `password` auth. @@ -485,9 +467,8 @@ export const action = async ({ request }) => { } ``` - - - + + Any of the [supported authentication strategies from `supabase-js`](https://supabase.com/docs/reference/javascript/auth-signup) will work server-side. This is how you would handle simple `email` and `password` auth. @@ -522,18 +503,18 @@ export const action: ActionFunction = async ({ }; ``` - + ### Login - + scrollable + size="small" + type="underlined" + defaultActiveId="js" +> + Any of the [supported authentication strategies from `supabase-js`](https://supabase.com/docs/reference/javascript/auth-signinwithpassword) will work server-side. This is how you would handle simple `email` and `password` auth. @@ -564,9 +545,8 @@ export const action = async ({ request }) => { } ``` - - - + + Any of the [supported authentication strategies from `supabase-js`](https://supabase.com/docs/reference/javascript/auth-signinwithpassword) will work server-side. This is how you would handle simple `email` and `password` auth. @@ -601,18 +581,18 @@ export const action: ActionFunction = async ({ }; ``` - + ### Logout - + scrollable + size="small" + type="underlined" + defaultActiveId="js" +> + ```jsx export const action = async ({ request }) => { @@ -638,9 +618,8 @@ export const action = async ({ request }) => { } ``` - - - + + ```jsx export const action: ActionFunction = async ({ @@ -670,7 +649,7 @@ export const action: ActionFunction = async ({ }; ``` - + ## Subscribe to realtime events @@ -689,13 +668,9 @@ export default function SubscribeToRealtime() { ) const channel = supabaseClient .channel('test') - .on( - 'postgres_changes', - { event: 'INSERT', schema: 'public', table: 'test' }, - (payload) => { - setData((data) => [...data, payload.new]) - } - ) + .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'test' }, (payload) => { + setData((data) => [...data, payload.new]) + }) .subscribe() return () => { diff --git a/apps/temp-docs/docs/guides/auth/auth-helpers/sveltekit.mdx b/apps/temp-docs/docs/guides/auth/auth-helpers/sveltekit.mdx index 5ba0d72572a..55e68832c12 100644 --- a/apps/temp-docs/docs/guides/auth/auth-helpers/sveltekit.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-helpers/sveltekit.mdx @@ -15,28 +15,25 @@ This submodule provides convenience helpers for implementing user authentication This library supports Node.js `^16.15.0`. - - + scrollable + size="small" + type="underlined" + defaultActiveId="npm" +> + ```sh npm install @supabase/auth-helpers-sveltekit ``` - - - + + ```sh yarn add @supabase/auth-helpers-sveltekit ``` - + ## Getting Started @@ -63,14 +60,10 @@ import { env } from '$env/dynamic/public' // or use the static env // import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'; -export const supabaseClient = createClient( - env.PUBLIC_SUPABASE_URL, - env.PUBLIC_SUPABASE_ANON_KEY, - { - persistSession: false, - autoRefreshToken: false, - } -) +export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY, { + persistSession: false, + autoRefreshToken: false, +}) setupSupabaseHelpers({ supabaseClient, @@ -378,13 +371,9 @@ export const actions: Actions = { const email = formData.get('email') as string const password = formData.get('password') as string - const { data, error } = await supabaseClient.auth.api.signInWithEmail( - email, - password, - { - redirectTo: `${url.origin}/logging-in`, - } - ) + const { data, error } = await supabaseClient.auth.api.signInWithEmail(email, password, { + redirectTo: `${url.origin}/logging-in`, + }) if (error || !data) { if (error?.status === 400) { @@ -470,13 +459,12 @@ The environment variable prefix is now `PUBLIC_` instead of `VITE_` (e.g., `VITE ### Set up the Supabase client {#migration-set-up-supabase-client} - - + scrollable + size="small" + type="underlined" + defaultActiveId="older" +> + ```js title="src/lib/db.ts" import { createSupabaseClient } from '@supabase/auth-helpers-sveltekit'; @@ -489,9 +477,8 @@ const { supabaseClient } = createSupabaseClient( export { supabaseClient }; ``` - - - + + ```js title="src/lib/db.ts" import { createClient } from '@supabase/supabase-js' @@ -502,14 +489,10 @@ import { env } from '$env/dynamic/public' // import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'; -export const supabaseClient = createClient( - env.PUBLIC_SUPABASE_URL, - env.PUBLIC_SUPABASE_ANON_KEY, - { - persistSession: false, - autoRefreshToken: false, - } -) +export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY, { + persistSession: false, + autoRefreshToken: false, +}) setupSupabaseHelpers({ supabaseClient, @@ -519,19 +502,18 @@ setupSupabaseHelpers({ }) ``` - + ### Initialize the client {#migration-initialize-client} - - + scrollable + size="small" + type="underlined" + defaultActiveId="older" +> + ```html title="src/routes/__layout.svelte"