Implement cookie-based Auth in the Next.js 13 App Router 🍪

In this video, Jon Meyers demonstrates how to configure Supabase Auth to store sessions in cookies, rather than localStorage, making them available to Client Components, Server Components, Route Handlers, Server Actions and Middleware! 🚀

00:00 Introduction
00:18 Why you need cookie-based Auth
01:11 Refactoring Auth to use cookies
01:46 Adding a code exchange route for PKCE Auth Flow
02:38 Listening for PUT requests with Route Handlers
04:23 Configure Server Component to use cookie-based Auth
03:42 Next up: Protected Routes and Redirection in Server Components

👇 Learn more about Supabase 👇

[Cyber-Bison]

This should be updated now that supabase/ssr is available. Could you also cover signing in with OAuth as well, would super helpful! Thanks for this video though it definitely it still was useful

[alionar]

I started Supabase eagerly but Supabase is getting on my nerves. I don't think the videos and documents are self explanatory. It's very confusing.

[mickmister]

These short videos put into a playlist is a great way to deliver this content. Thanks so much! Supabase is so awesome

[vladyslavmelnychenko]

Have you considered not adding changes to integration workflow with every release? Every time I start a new project with supabase I have to learn all docs again.

[tom.watkins]

Deprecation the libraries on the video for the ssr library only a few months after releasing the tutorial is a tad concerning. That being said, very easy to follow and use

[aymanechaaba]

how supabase connects to our database if we're not passing any url or key to createServerComponentClient or createClientComponentClient ? 🤫

[masonnash]

In the old tutorial for auth cookies on Next js app, you used middleware and not a auth redirect page. Why the switch?

[IvoTsochev]

This is working but something I don't understand, the implementation you're showing is for the Sign Up, but you are clicking on the Sign In?

[masonnash]

What's the difference between the createClientComponentClient() function and the createBrowserSupabaseClient() function?

[MohamedElguarir]

it doesn't work when the email confirmation is disabled, I'm getting this error "PKCE flow is not supported on signups with autoconfirm enabled" I've searched all the docs, found nothing!
any help?

[CBRChris]

Hello, i have one question. maybe i miss something but should the auth cookie not be httpOnly?

[nicocabral]

Hi, How do you set cookie expiration? Say once the user is login it expires for 1hr and the user is automatically logout

[MikeJ-ptpg]

How do you handle redirects with the code exchange? E.g for a regular login I want to redirect to the main content, but for a password reset I'd want to redirect to a password reset page.

[AnindoSarker]

Cool. Is there a way to send mails in supabase? Not invite mails

[joohyunglee]

I'm trying to learn Supabase but man yalls docs are a mess

[BrunSwick]

I have a general auth question. Is there a way to share users between projects? Basically have 2 supabase projects, but share the same userbase? Even if that means syncing the auth tables? If yes maybe a cool video to produce for others?

[alexisgraff]

Hello, thank you very much for your videos, i have a question, can i make the login with server actions? I have this code =

const supabase = createServerComponentClient({ cookies });

export const handleSignIn = async ({username, password} : ILoginForm) => {
await
email: username,
password,
});
};

And when i sign in, the network gives me a 200 ok but in the response i got this =

1:"$undefined"

and the cookie is not set. But with client component it works just fine.

[rtorcato]

Can you guys do a video on MFA? I was also wondering is there column level security?

[greendsnow]

Supabase has a great marketing team for that slow 350 rps database on a 32gb ram system, no python support for functions, absolute turtle pace vector db, no rate limiting, no nosql support...

You guys market your product very well. Did I say you have to know some degree of SQL to use it properly? Even the wrapper API is complicated.

I'm amazed by the power of marketing.

[mattwaldron]

Is it possible to authenticate a user server-side without next.js? What about for example, using React Native with a serverless backend?