## What
This PR updates
`examples/with-supabase/components/tutorial/fetch-data-steps.tsx` to
include a missing step about enabling Row Level Security (RLS) and
creating a simple read policy for the `notes` table.
Fixes: #82218
## Why
Currently, the tutorial shows how to:
- create a `notes` table
- insert data
- query data from Next.js
However, since RLS is enabled by default in Supabase, new users will get
`permission denied` errors when querying data unless they configure
policies.
The official Supabase Next.js quickstart docs already mention this:
https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
Adding this step will help newcomers understand why RLS is required and
how to set it up.
## Changes
- Added a new `<TutorialStep>` in `fetch-data-steps.tsx`:
- Explains that RLS is enabled by default
- Shows SQL snippet to enable RLS + create a public read policy
- Links to the Supabase RLS docs
## Checklist
- [x] Added RLS tutorial step
- [x] Verified formatting matches other tutorial steps
- [x] Added links to relevant Supabase docs
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
Updates the `with-supabase` example to use the new and much faster (when
project is configured with asymmetric JWT support)
`supabase.auth.getClaims()` function instead of `getUser()`.
---------
Co-authored-by: Benjamin Woodruff <benjamin.woodruff@vercel.com>
This PR updates the `with-supabase` template to better auth pages,
Tailwind v4 and newest `components.json` for full compatibility with
shadcn/ui.
The `(auth-pages)` folder has been removed. For auth, the template is
now using the [password based auth
block](https://supabase.com/ui/docs/nextjs/password-based-auth) from the
Supabase UI Library which makes it easier to update it and keep it
up-to-date.
---------
Co-authored-by: Lee Robinson <lee@leerob.com>
Remove stores param as new integration does not support initializing a
schema. This change basically reverts back to the url that was used
prior to the new integration last week, which still works just fine.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
[1] Add protected page
[2] Add pending state
### Why?
[1] People using incorrect ways to protect pages
[2] No feedback that the login page is doing anything when buttons
clicked
### How?
[1] Redirect user to protected page after successful authentication
[2] Use useFormStatus to determine whether the form is in a pending
state
---------
Co-authored-by: Sam Ko <sam@vercel.com>
### What?
[1] Clean up `with-supabase` example following patterns from @leerob's
recent video on authentication
[2] Add images to matcher to reduce number of times a session is
refreshed
[3] Move instantiation of `cookieStore` into Supabase server helper
### Why?
[1] Make template easier to understand and use
[2] Reduce likelihood users will receive Auth Rate Limit Exceeded error
[3] Makes creating a Supabase client much simpler in Server Components,
Route Handlers and Server Actions
### How?
[1] Refactor middleware and its helper function
[2] Add image extensions to middleware matcher
[3] Call `cookies()` function from `createClient` helper - this should
still be in the [same execution
context](https://nextjs.org/docs/messages/dynamic-server-error) and
appears to work from my testing, but would be good to get the 👍 from
someone at Vercel
## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
### What?
[1] Use Server Actions for auth
[2] Use Geist font
[3] Address warning about `metadataBase` in console
### Why?
[1] The co-location of Login page and authentication logic is simpler for beginners
[2] Looks nice
[3] Avoid confusing people with the starter template printing warnings
### How?
[1] Refactor Route Handlers to Server Actions
[2] Install font and set to `html`
[3] Explicitly declare the default value for `metadataBaseUrl`
### What?
[1] Simplify example
[2] Refactor `delete` method to use `cookies.set`
### Why?
[1] Make it easier to follow
[2] Fix build errors
### How?
[1] Adding comments and abstracting code into helper functions
[2] Setting cookie to empty value when removed
---------
Co-authored-by: Lee Robinson <me@leerob.io>
### What?
Move calling the `cookies` function up to the route
### Why?
This flags the route as `dynamic`, meaning we don't need to explicitly declare `export const dynamic = 'force-dynamic'`
### How?
Passing the returned `cookieStore` into Supabase helper functions, rather than the `cookies` function itself
### What?
[1] Use camelCase for SVG properties
[2] Catch expected error in cookie functions
### Why?
[1] Prints error to the console
[2] If the cookies `set` or `delete` methods are called in a Server Component, an error is thrown
### How?
[1] Change property names from kebab-case to camelCase
[2] Catch error
### What?
[1] Refactors `with-supabase` example to use new `@supabase/ssr` package
[2] Makes landing page dynamic steps to connect Next.js to Supabase
[3] Fixes a range of small bugs
### Why?
[1] Simplifies creating a Supabase client
[2] People were not understanding how to connect this template to Supabase
[3] People don't like bugs
### How?
[1] Declares a separate `createClient` function for client and server. Client version is used in Client Components, server version is used every where else - Server Components, Route Handlers, Server Actions, Middleware
[2] Makes landing page a dynamic list of next steps to guide the user to success
[3] Writing code to squash the bugs!
### What?
- added correct deploy button urls
- uses new supabase integration
- updated readme for local development, more clearer instructions
- added opengraph image
### Why?
- old supabase integration is buggy
- readme is more clear for local development
---------
Co-authored-by: Steven Tey <stevensteel97@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
1. Refactor `with-supabase` example to use server-side auth
### Why?
1. It is the recommended path for Next.js, and can serve as an example for the authentication docs
### How?
1. Move authentication methods from Client Component to Route Handlers
Tom Moses