Why you need cookie-based Auth for the Next.js App Router (2024)

the next JS apparata makes it really easy to write server code to do servery things like redirect a user if they're not meant to see a particular page or write client code to do clienty things like subscribe to real-time events or changes in the database now we'll look at both of those examples over the next few videos but in this one I just wanted to make sure we had a really good understanding of the problem we're actually trying to solve so why do we need cookie based auth well here I have an application that's fetching some to-do's from Super Bass we have authentication so we can sign in or sign out but it doesn't actually change whether we can see these to Do's or not also it looks like we can see everyone else's to Do's as well so this is my to do to explain cookie based auth but building up static electricity and doing Thunder strikes that's Thor's to-do list I don't even know how to do that so let's add authorization or the ability to check should this user have access to this thing so to do that we're going to use row level security or RLS and we can turn this on specifically for our to-do's table and now when RLS is enabled it's going to automatically deny all requests to our to-do's table so no one can select insert update or delete problem solved database secure no one can access anything and we can confirm that by going back to our application and refreshing and we get back an empty array great but we usually do want to access things again otherwise why did we put them in the database so let's add a policy and we're going to create this one from scratch we want to enable read access for to-do's so this will be when users are selecting these rows which is going to leave Target roles for now and then as our using expression we're going to put the value true which means we're basically just turning off all restrictions for this select action so we're enabling read access for to-do's and so let's click review and this will show us the SQL that's about to run on our database we can click save policy to run that SQL and now if we go back to our application and refresh we can see those to Do's again but again we can see all of the to-do's we only want to see this one to do that's actually mine so let's modify that policy and let's instead allow users to read their own to-do's and we're done just check talking this is just a name we still need to actually implement the rule so we can update our using expression to check whether the user ID column is equal to the ID of the user trying to select this row and we can get that user's ID with the auth.uid function and now if we click review and save and go back to our application and refresh but now our to-do's are to gons I am on fire today and that's because by default Super Bass auth uses local storage to store our users session and so if we sign in we'll see our Super Bass auth token is set in local storage but if we have a look at our code we're making a request for that data from a server component and server components get executed on the server where there is no concept of local storage local storage only exists within the user's browser and so we need another way to get our Super Bass auth token from the browser to our server component so we can forward it along with that request to Super Bass so that our RLS policy knows who the user is and can give back their specific to-do's and that's why we need cookie keys so if we configure Super Bass auth to use cookies rather than local storage now when we sign in we not only see our to-do's but only the to Do's for the signed in user and that's because our browser automatically sends that cookie across with any request to the server so when we request our server component route we automatically pass our Super Bass auth token along in a cookie our server component can then send that auth token along with our request to superbase which then knows who our user is who signed in and only gives us back the to-do's for that specific user if you want to learn how to configure Super Bass auth to use cookies instead of local storage I recommend you check out this video right here we're going to be doing a series of videos showing how to do all of the new next.js app router stuff but this is where we start with authentication so until next time keep building cool stuff

Channel: Supabase

Views: 31,005

Keywords:

Id: w3LD0Z73vgU

Length: 3min 57sec (237 seconds)

Published: Fri Jun 09 2023