### 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
### What?
Enhancement of _with-supabase example_. Replacing in **middelware.ts**,
**supabase.auth.getSession()** with **supabase.auth.getUser()**
### Why?
**Never trust supabase.auth.getSession() inside server code such as
middleware**. It isn't guaranteed to revalidate the Auth token.
**It's safe to trust getUser()** because it sends a request to the
Supabase Auth server every time to revalidate the Auth token.
[Setting up Server-Side Auth for
Next.js](https://supabase.com/docs/guides/auth/server-side/nextjs)
### Adding or Updating Examples
I can't import `useFormState` from `react-dom` with
`@types/react-dom@18.2.5`, so I upgrade it to the latest version of it.
---------
Co-authored-by: Sam Ko <sam@vercel.com>
## 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!
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.
### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.
If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
### 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
### What?
Stop `with-supabase` template from throwing errors on build
### Why?
Dynamic Routes now fail the build, rather than console.logging an error
### How?
Export the following from any routes that use the `cookies` function
```
export const dynamic = "force-dynamic";
```
Install `encoding` as a dev dependency until this is fixed downstream
### What?
Adds `supabase-js` as dependency for `with-supabase` example
### Why?
`with-supabase` example is missing `supabase-js` dependency, which is a
peer dependency of `@supabase/auth-helpers-nextjs`
### How?
Adds `supabase-js` to `examples/with-supabase/package.json`
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Update Next.js with Supabase example
### Why?
Existing example for Next.js with Supabase is out of date
### How?
- Rename `with-supabase-auth-db-realtime` to `with-supabase`
- Update example to use App Router
- Use Supabase Auth Helpers for Next.js to configure auth cookies
---------
