The Right Way to do Auth with the Next.js App Router - UPDATED
14.3 هزار بار بازدید -
3 ماه پیش
-
Authentication is essential for modern
Authentication is essential for modern app development! In this video, Jon Meyers configures Supabase Auth to use cookies, and implements OAuth using GitHub in an Email Client, written with the Next.js App Router.
https://supabase.com/docs/guides/auth...
The Next.js App Router blurs the lines between Client and Server, therefore, Supabase Auth needs to be configured to use cookies, allowing the user and their session to be shared across the entire Next.js stack - Client Components, Server Components, Server Actions, Route Handlers and Middleware!
In this updated version, Jon refactors the logic for protecting pages to use Middleware, rather than a Layout.
📹 Full Next.js Email Client playlist: Build an Email Client with the Next.j...
🧑💻 GitHub repo: https://github.com/dijonmusters/nextj...
00:00 The Right Way to do Auth with the Next.js App Router
00:44 Add Authentication with Next.js Server Actions and Supabase
03:52 Implement Protected Routes by Redirecting Unauthenticated Users
04:25 Using a Layout to protect a collection of routes
06:16 Use the @supabase/ssr package to configure cookie-based auth
09:07 Configure Proof Key for Code Exchange (PKCE) route
11:26 Use Middleware to refresh expired sessions
13:58 Move Protected Route logic to Middleware
15:42 Use the `with-supabase` template to skip this whole configuration
💻 Videos to watch next:
▶ Simplify complex SQL queries with Views in Postgres: Simplify complex SQL queries with Vie...
▶ 3 reasons you should use Postgres Functions and Transactions: 3 reasons you should use Postgres Fun...
▶ Fastest way to build a SaaS with Next.js, Supabase and Stripe: Fastest way to build a SaaS with Next...
👇 Learn more about Supabase 👇
🕸 Website: https://supabase.com/
🏁 Get started: https://app.supabase.com/
📄 Docs: https://supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: @supabase
📱 Connect with Us:
🐙 Github: https://github.com/supabase
💬 Discord: https://discord.supabase.com/
🐦 Twitter: Twitter: supabase
📸 Instagram (follow for memes): Instagram: supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools
https://supabase.com/docs/guides/auth...
The Next.js App Router blurs the lines between Client and Server, therefore, Supabase Auth needs to be configured to use cookies, allowing the user and their session to be shared across the entire Next.js stack - Client Components, Server Components, Server Actions, Route Handlers and Middleware!
In this updated version, Jon refactors the logic for protecting pages to use Middleware, rather than a Layout.
📹 Full Next.js Email Client playlist: Build an Email Client with the Next.j...
🧑💻 GitHub repo: https://github.com/dijonmusters/nextj...
00:00 The Right Way to do Auth with the Next.js App Router
00:44 Add Authentication with Next.js Server Actions and Supabase
03:52 Implement Protected Routes by Redirecting Unauthenticated Users
04:25 Using a Layout to protect a collection of routes
06:16 Use the @supabase/ssr package to configure cookie-based auth
09:07 Configure Proof Key for Code Exchange (PKCE) route
11:26 Use Middleware to refresh expired sessions
13:58 Move Protected Route logic to Middleware
15:42 Use the `with-supabase` template to skip this whole configuration
💻 Videos to watch next:
▶ Simplify complex SQL queries with Views in Postgres: Simplify complex SQL queries with Vie...
▶ 3 reasons you should use Postgres Functions and Transactions: 3 reasons you should use Postgres Fun...
▶ Fastest way to build a SaaS with Next.js, Supabase and Stripe: Fastest way to build a SaaS with Next...
👇 Learn more about Supabase 👇
🕸 Website: https://supabase.com/
🏁 Get started: https://app.supabase.com/
📄 Docs: https://supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: @supabase
📱 Connect with Us:
🐙 Github: https://github.com/supabase
💬 Discord: https://discord.supabase.com/
🐦 Twitter: Twitter: supabase
📸 Instagram (follow for memes): Instagram: supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools
3 ماه پیش
در تاریخ 1403/02/21 منتشر شده
است.
14,370
بـار بازدید شده