diff --git a/DEVELOPERS.md b/DEVELOPERS.md
index d4a62cd88f9..9d769ccb70e 100644
--- a/DEVELOPERS.md
+++ b/DEVELOPERS.md
@@ -35,8 +35,6 @@ We are in the process of migrating this repository to monorepo, using [Turborepo
Eventually, all the apps will be run using [Turborepo](https://turborepo.org/docs), which will significantly improve the developer workflow.
-If you are working on the ([docs site](https://supabase.com/docs)), please refer to this [developers guide](https://github.com/supabase/supabase/tree/master/apps/reference/DEVELOPERS.md).
-
### Fork the repository
To contribute code to [Supabase](https://supabase.com), you must fork the [Supabase Repository](https://github.com/supabase/supabase).
@@ -71,11 +69,11 @@ To contribute code to [Supabase](https://supabase.com), you must fork the [Supab
Then visit, and edit, any of the following sites:
-| Site | Directory | Scope name | Description | Local development server |
-| ---------------------------------------------- | -------------- | ---------- | ------------------------------------ | ------------------------ |
-| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 |
-| [app.supabase.com](https://app.supabase.com) | `/studio` | studio | Studio dashboard | http://localhost:8082 |
-| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http://localhost:3001/docs |
+| Site | Directory | Scope name | Description | Local development server |
+| ---------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
+| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 |
+| [app.supabase.com](https://app.supabase.com) | `/studio` | studio | Studio dashboard | http://localhost:8082 |
+| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http://localhost:3001/docs |
#### Running sites individually
diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts
index 3c407085da2..5db85450719 100644
--- a/apps/docs/components/Navigation/Navigation.constants.ts
+++ b/apps/docs/components/Navigation/Navigation.constants.ts
@@ -245,7 +245,9 @@ export const menuItems: NavMenu = {
label: 'Storage',
items: [
{ name: 'Overview', url: '/guides/storage', items: [] },
- { name: 'CDN', url: '/guides/storage-cdn', items: [] },
+ { name: 'Quickstart', url: '/guides/storage/quickstart', items: [] },
+ { name: 'Access Control', url: '/guides/storage/access-control', items: [] },
+ { name: 'CDN', url: '/guides/storage/cdn', items: [] },
],
},
{
diff --git a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
index 6df649ea7b1..0aa105dd66a 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
@@ -9,6 +9,8 @@ export const meta = {
This submodule provides convenience helpers for implementing user authentication in Remix applications.
+> Check out [this repo](https://github.com/supabase/auth-helpers/tree/main/examples/remix) for a full example.
+
## Install the Remix helper library
-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`.
-
```jsx
import { json } from '@remix-run/node' // change this import to whatever runtime you are using
import { createServerClient } from '@supabase/auth-helpers-remix'
@@ -95,17 +101,17 @@ export const loader = async ({ request }) => {
-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`.
-
```jsx
-import { LoaderFunction, json } from '@remix-run/node' // change this import to whatever runtime you are using
+import { 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 }) => {
+import type { LoaderArgs } from '@remix-run/node' // change this import to whatever runtime you are using
+
+export const loader = async ({ request }: LoaderArgs) => {
const response = new Response()
const supabaseClient = createServerClient(
- process.env.SUPABASE_URL,
- process.env.SUPABASE_ANON_KEY,
+ process.env.SUPABASE_URL!,
+ process.env.SUPABASE_ANON_KEY!,
{ request, response }
)
@@ -125,7 +131,9 @@ export const loader: LoaderFunction = async ({ request }: { request: Request })
-## Action
+### Action
+
+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`.
-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`.
-
```jsx
import { json } from '@remix-run/node' // change this import to whatever runtime you are using
import { createServerClient } from '@supabase/auth-helpers-remix'
@@ -166,18 +172,18 @@ export const action = async ({ request }) => {
-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`.
-
```jsx
-import { ActionFunction, json } from '@remix-run/node' // change this import to whatever runtime you are using
+import { 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 }) => {
+import type { ActionArgs } from '@remix-run/node' // change this import to whatever runtime you are using
+
+export const action = async ({ request }: ActionArgs) => {
const response = new Response()
const supabaseClient = createServerClient(
- process.env.SUPABASE_URL,
- process.env.SUPABASE_ANON_KEY,
+ process.env.SUPABASE_URL!,
+ process.env.SUPABASE_ANON_KEY!,
{ request, response }
)
@@ -213,10 +219,22 @@ The session contains a user property.
const user = session?.user
```
-> This is the recommended way for accessing the logged in user. There is also a `getUser()` function but this does not refresh the session if it has expired.
+Or, if you don't need the session, you can call the `getUser()` function.
+
+```jsx
+const {
+ data: { user },
+} = await supabaseClient.auth.getUser()
+```
## Client-side
+We still need to use Supabase client-side for things like authentication and realtime subscriptions. Anytime we use Supabase client-side it needs to be a single instance.
+
+### Creating a singleton Supabase client
+
+Since our environment variables are not available client-side, we need to plumb them through from the loader.
+
-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`.
-
```jsx title=app/root.jsx
export const loader = () => {
- const { SUPABASE_URL, SUPABASE_ANON_KEY } = process.env
- return json({
- env: {
- SUPABASE_URL,
- SUPABASE_ANON_KEY,
- },
- })
-}
-```
-
-> These may not be stored in `process.env` for environments other than Node.
-
-Next, we call the `useLoaderData` hook in our component to get the `env` object.
-
-```jsx title=app/root.jsx
-const { env } = useLoaderData()
-```
-
-And then, add a `