Fastest way to get started with Next.js and Supabase in 2024

I'm going to show you how you can create a new  nextjs app and Link it to your Supabase project   so you can read and write data add authentication  subscribe to real-time changes use fancy AI   vectory embedding stuff Supabase is super cool so  let's get into it use npx to run the create-- app   package which very surprisingly is going to create  a next app but we can specify an example with the-   e flag and then use the with- Supabase template  to scaffold out our project the name of mine is   going to be to-do dbas cuz it's a to-do app with  Supabase and now that that's finished we can CD   into our new folder open it up in vs code and then  run mpm rundev to start our development server   and then head over to Local Host overport 3000  in a browser so we can see this is the fastest   way to build apps with Supabase and nextjs and  we've also got this next step section so you can   see we haven't hooked this up to our Supabase  project yet so head over to database. new and   create a new one if you haven't done that that  yet I have so I'm going to tick this one oh my   God you can actually tick them that's awesome so  we need to declare some environment variables for   our Supabase project so let's go back over to our  vs code project and have a look at this template   and we want to take this EMV do example file and  rename it env. local and then we need our Supabase   URL and our Supabase a non key so if we go over  to our Supabase project and go to settings and   then API and then this is our project URL so we  can paste that one here and then we also need our   Aon or public key so let's copy that from here  and paste it into our env. looc file now if we   go back to our nextjs app we can see the next  steps have been automatically updated and it's   time to sign up our first user something awesome  about this template is that it already has all of   the plumbing for serers side orth configured for  us so we can just scroll up to the top and click   login and then enter an email so mine will be  John atup supabase.com and then a super secure   password and I'm going to click sign up to create  that account and this says check email to continue   signin process so the user we typed in will  receive an email that looks something like this   and if we click this confirm your mail link we'll  get taken back to our application and we can see   that Jon is now signed in and if we click log out  you'll see we're redirected to the sign-in page   again and if we go back we can see JN is no longer  authenticated so let's step through the code that   really saves you some time and headaches using  this template so we're going to look at creating a   Supabase client in all the different environments  that exist in the nextjs app router and then that   server side orlow that we just stepped through to  sign in our user so let's start with our component   for our or button where we're creating a Supabase  client so this create client function is just a   helper function in utils Supabase server and if  we go to this one we can see it just simplifies   creating a server client with all the environment  variables and configuration for cookies that we   need to run on the server so anytime you're using  Supabase in a server component server action or   route Handler this is the one you want to use  there are also helpers for client which is used   for client components where there's a browser  involved and also middleware which is a little   bit more complex and is used in the middleware  dots file which we'll look at shortly so each of   these helpers tells Supabase how to get set and  remove a cookie in each of these environments if   you're not sure why cookies are important in xjs I  recommend you click that card above and learn all   about sessions cookies and role security policies  but for now let's step through that or flow so   on our login page we have this form and that's  where the user enter is their email and password   and then when they click this sign up button it  submits the form to this sign up action which is a   server action and so it creates a Supabase client  using that same create client function from utils   /s Supabase server it then calls the Supabase do  or. signup function and passes across the user's   email and password as well as this options object  with email redirect to set to the origin of our   current URL so either local host or our production  URL and then SL or / callback so anytime we're   sending the user somewhere else to complete the  authentication process so that's with the email   we received earlier in that signup flow or magic  links where the user gets an email with a link to   sign in or with the oo flow that's authenticating  with GitHub or Google we need a place for those   services to redirect the user after the  authentication bit is done and that's this/   or/ callback route which implements the proof key  for code exchange pattern or pixie but don't worry   even if there are Pixies in involved this route  is certainly not magic it's just a route Handler   in our application which takes an or code from  the search prams in the URL and uses Supabase to   exchange that code for the user session and then  we redirect the user to whichever page we want   them to land on after the full authentication flow  has completed another thing to call out is that   server components only get read access to cookies  so if a session needs to be refreshed it needs to   be done in a server action route Handler or in  middleware and so that's why in our middleware   dots file we have this call to Supabase do.get  user and so what this does behind the scenes   is refresh the user's session and then it also  Returns the user but we're not doing anything   with that return value because we're just using  this to ensure that session is updated and fresh   by the time our server component route is loaded  if you want to go deeper with server components   I recommend you check out this video right here  where we look at creating protected routes that   can only be visited by authenticated users  but until next time keep building cool stuff

Channel: Supabase

Views: 4,504

Keywords: Supabase, Next.js, Create Next.js app, Supabase project, Read and write data, Supabase authentication, Real-time updates, AI vector embedding, Supabase tutorial, Supabase and Next.js, Supabase database, User authentication, Supabase integration, Supabase real-time, Build with Supabase, supabase nextjs, build an app in supabase, superbase, saas app supabase, build saas app in supabase, supabase security features, proof key for code exchange route handler, supabase npx command

Id: WdA6b0jPNv4

Length: 5min 31sec (331 seconds)

Published: Fri Feb 23 2024