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

I'm going to show you how to configure Super Bass auth to store session data in cookies rather than local storage if you're not sure why you would need cookies when working with the nexjs app router I recommend you click that card above to learn more about clients servers cookies RLS but in this one we're going to implement authentication let's get into it so here I have a server component that is fetching to Do's from Super Bass we have a login component which is rendering out a sign up sign in and sign out button which are just calling functions above that are basically just calling those functions in Super Bass so superbass.auth.signup superbass.orth.signin with password and superbass.auth.sign out and we've written policies to allow a user to insert select or update their own to-do's but something's going wrong in this process if we disable RLS you'll see we're getting back all of those to Do's but two of these belong to a different user so we should only be seeing this top one which belongs to our user so if we switch RLS on again we'll see we're getting back our empty array and that's because by default superbase auth stores our session data in local storage but we need to configure it to use cookies so this session data can be sent along with our request to superbase from our server component so let's start by using npm to install at Super Bass auth Dash helpers Dash next.js and once that's finished we can run our development server again and then over in our login component we just need to find where we're creating our Super Bass client so this is using the create client function from at Super Bass Super Bass JS we instead want to create this client inside our component by calling the create client component client function which comes in from that at Superbass auth helper's next.js package and we can now get rid of this one and also our import from Super Bass JS and now for our sign up function we need to pass an additional parameter so we have email and password we then need to pass options and this is going to be an object we then want to set email redirect to to the URL HTTP colon slash localhost overport 3000 slash Earth slash callback and this is because the sign up flow is actually a few steps when they click this button it triggers a new user to be created in Super Bass that then sends an email confirmation to the user to make sure this is a real user when they click the confirm your sign up button this then goes back to Super Bass to say well this user is a real user and then Super Bass needs somewhere to redirect that user so we're redirecting them back to our application and to this slash auth callback route that is then going to be passed a unique auth code which we need to exchange for the user's session so let's create this route so under app we want a new file so that's going to be at auth slash callback slash route dot TS so this is going to be a route Handler we can then export an async function that can handle a get request it will be passed a request which is of type request and then we want to get the request URL by calling new URL and passing it our requests URL we then want to get the code out of that URL so we can say request URL dot search params.get and pass it the string code and then if we have a code then we want to send it back to superbase so let's create a new Super Bass client by calling the create route Handler client function which again comes in from those auth helpers and this one requires us to pass in this cookies function and so we can import that function from next slash headers and pass it along to our create route Handler client function and now we can await a call to superbass.auth dot exchange code for session and pass it our code and then we want to redirect the user back to our application so we can return a next response which comes in from next slash server dot redirect and pass it our request URL dot origin so basically just the landing page for our application but this can be any URL so now if we go back to our login component and this path will work when we're running locally but it won't work in production so we can make this a little bit more resilient by using our location's origin so this will be localhost over Port 3000 when we're running locally and then whatever our production URL is when we're in production so if we go back over to the browser and refresh and click this sign in button we can see that our auth token from Super Bass is appearing under cookies rather than local storage but when we refresh we're still getting this empty array back from Super Bass so what's going on here we'll back over in our application we've configured our login component to use cookies but we haven't configured our server component and that's what's actually making that request to Super Bass so we just need to create a new Super Bass client by calling create server component client which again comes in from that oauth helpers package and this one also takes that cookies function and so we can import that above and get rid of this unused create client and also that import from Super Bass JS and now if we go back to our application we're not only seeing our to-do's but only our to-do's for our signed in user and again if we sign out they disappear awesome so we've configured Super Bass to use cookies for client components server component and Route handlers if you want to take it one step further I recommend you check out this video right here where we Implement protected routes so these are special routes that can be only visited by users who are signed in but until next time keep building cool stuff

Channel: Supabase

Views: 27,701

Keywords:

Id: -7K6DRWfEGM

Length: 5min 14sec (314 seconds)

Published: Thu Jun 15 2023