Understand the Supabase SSR Package easily 

That was the most important part to highlight

glad to hear that!

Happy to hear!

Happy to help!

Still struggling with dynamic routing. Returning null on my side

Thanks!

Thanks so much

Lovely! Have a great week!

So more like a "how to deal with authentication" tutorial?

@@activenode yes!

With NextJS 14, everything runs on the server by default. So only if you explicitly use 'use client'; it will run on the client. So, only then you want to use the createFrontendSupabaseClient. Yes, onlly in Route Handlers and Server Actions you would use the non-serverComponent version - the createSupabaseAppServerClient(); On the server component you'd use createSupabaseAppServerClient(true); or as we simplified createSupabaseServerComponentClient(); Does that help?

Hey there! That is: Beautiful Dracula Normal. Same to you 🎊

Indeed!

That's actually a cool idea, I'll write it down in the ideation list.

Steg+space in vscode

Yes if it's about the Service Key, definitely! I am using the anon key in my .env.local being NEXT_PUBLIC_SUPABASE_KEY. If you use the admin client, you don't need any of that special stuff I'm showing. In that case make sure it's not prefixed with NEXT_PUBLIC_ - as you said it would be a massive security hole - and just use createClient to create it.

Can you try one thing to troubleshoot? This video shows calling `cookies()` in each function. However, I'm about to make an updated video where I'll be using `const cookieStore = cookies()` in the top of the utils function and then only `cookieStore.get`, `cookieStore.set` etc. So calling `cookies()` immediately will mark the file as "using cookies". Can you try if that helps?

OK that is evil subbing there :D

In theory, the same principles apply: For frontend: createBrowserClient, for backend you need to pass the way Svelte handles cookies. You might wanna compare the code here: supabase.com/docs/guides/auth/server-side/creating-a-client?environment=hooks&framework=sveltekit

@@activenodeThanks!

Yes :) github.com/activenode-edu/supabase-plants-migration-demo

When exactly do you get it? What are you doing?

Good question. Well, you can. But the problem is: They won't maintain it anymore in the future. But feature-wise, it's the same thing. Knowing that all of the NextJS Auth Helpers literally do the same thing I found it very confusing to have a different name for each context so once I understood the new package, I found it more convenient. Maintenance-wise I'd say: The sooner you switch, the better. But yes, you probably can stay on the old one for quite some time without any issues. Just saying the dependencies could get old etc

Thanks for the reply. I didn't even see that it's deprecated. I also found it a bit confusing having like 6 ways to create a supabase client. I will refactor it asap.

@@imbjarne795 awesome

github.com/activenode-edu/supabase-plants-migration-demo

github.com/activenode-edu/supabase-plants-migration-demo

Hi Can you please explain what you just mentioned, I'm learning Next js through RU-vid and didn't come across something that you said maybe I did but can't remember.

@@Shashanksoni98 the way you get headers and cookies in nextjs varies significantly from how other SSR frameworks do it causing a lot of pain to anyone building integrations that work on the server and client in nextjs

Hey, thanks for that info. In theory NextJS is on the right track by already using the standardized Response and Request instances with a lil bit of extensions (developer.mozilla.org/en-US/docs/Web/API/Response). But across frameworks, not just NextJS, there is no common standardized way yet to access those. It would be easier if they'd all agree on having req/res globally available in such contexts, then one client would fit it all. Not a NextJS specific problem though :)

@@activenode there's winter CG which is what other frameworks are relying on as a standard , Guillermo recently talked shit about it , the biggest thing I find odd is how it's not possible to access the request context in server component page , you can only access headers and cookies with special functions that rely on async context , you don't get the URL which is funny given how hard they're pushing relying on the URL for state . They're confused and in turn confusing everyone at this point they've even refused to take feedback and add the request object in server components + router events

@@hakuna_matata_hakuna Sorry about the features you are missing, I'm sure collective community feedback will sooner or later lead the path. Thanks for hinting WinterCG, didn't know that one :)

His lost brother

Ha, good catch. Yeah, it wasn't a mistake, even though it's common to have that, yes. There are certainly use-cases with and without auth that's why I didn't add it there and left it open for anyone to decide what to do with it, you can even just NOT use it in the middleware. But yes, if you do use auth you should be using the line you posted await supabase.auth.getSession() to ensure token freshness :) Cheers!

Hey! Awesome question: A stripe webhook firing a route handler, doesn’t need RLS usually as it isn’t a person and hence also cookies don’t matter. Usually, with a webhook, you want an admin client. So you need none of the clients really that I show in this video but you would create some like: import {createClient} from ‘@supabase/supbase-js’; function getAdminClient() { return createClient(URL, SERVICE_KEY); }

@@activenode Thanks a lot! Appreciate your reply :)

I second this

So, the password reset flow, is nothing but a magic link with type "recovery". That's the short answer. The fully server-based variant works differently than the one with frontend. I'll cover this in my upcoming book (still takes some time) but if you don't NEED the fully server I'd recommend you go with the frontend variant. That goes like this: await supabase.auth.resetPasswordForEmail('hello@example.xyz, { redirectTo: 'example.com/account/update-password', }) This will send an e-mail to hello[at]example.xyz containing something like auth-service-url/?token=...&redirectTo=example.com/account/update-password which, when clicked, will verify the token and immediately redirect to the redirectTo URL but add a small code to it (you don't see that because the process is too fast but if you make your network connection really slow, you can watch it). And on THAT page there must be a frontend client (browser client) instantiated. The pure existence of that authenticates the user - so, obviously it must be a URL that is reachable without a valid login. Then, you want to redirect/refresh the page when the authentication is done. And for that you don't have to do much but listen for the event in the frontend client: supabase.onAuthStateChange(event => { if (event==='SIGNED_IN') refreshOrRedirectPage(); }) Hope that helps.

see my comment for @austingebauer4532