Easily Add Authentication With Nuxt 3 + Supabase

a few weeks ago I started working on my first SAS product which is going to be a challenge platform for developers on the front and I'm using nux 3 and for the back end to keep things simple for myself I opted to use super bass for those unaware Super Bass is an open source back-end as a service that provides you with a set of tools to build scalable applications it's been a breeze to work with and as a front-end developer it's helped me be able to get my products back in built quickly and allow me more time to focus on the front end now often looking to build an application authentication can feel quite daunting for developers however with Super Bass it's super easy and can be actually set up within your application in only a matter of minutes so in this video I'm going to show you how I implemented Super Bass authentication into my SAS product using nux 3 and this includes signing up a user signing in and signing out a user detecting if a user is signed in and lastly protecting authenticator routes using some custom middleware to get started we're going to create a new nux 3 application once that's finished we'll want to see the into this new folder and install the project dependencies and for this video I'm also going to be using the Tailwind CSS module with the nox3 application setup let's create a new Super Bass project if you don't have an account you can create one or you can opt to use your GitHub account now once you create your account or signed in we'll start by creating a new project we're just going to call this nux3 plus auth and then for the database password we'll use the option to generate a password for us we're going to leave the region as a pre-selected option and keep it on the free plan and click on create new project once that's set up will be taken back to the dashboard for our Super Bass project so back here inside of our nux3 application we'll need to connect the Super Bass project to our application and luckily nux has a module that makes this integration extremely easy first we're going to need to install this module into our application once that's complete we need to add this module to the nux config and lastly we're going to need to create two environment variables and since we don't have an EnV file inside of our project we can easily create one by using the commandtouch.env inside of the integrated terminal then inside of this EnV file we need to add our two environment variables one called superbase underscore URL and the other one called Super Bass underscore key for the value of these variables we can head back over to our Super Bass project and we want to click on the settings gear inside of the navigation we're going to be using this project URL for the Super Bass underscore URL variable and then the first value within the project API key section for the Super Bass underscore key variable and now that we have that added if you do have your nux server running you're going to want to restart that and then Super Bass will have been integrated and ready to use inside of our next application now to speed things up I went ahead and created a few pages that we're going to be using here within this video so let's start by looking how we can register or create a user now in this file I went ahead and created a few variables the first two are going to be to capture the input from our inputs for the email and password and then these bottom two are going to be for handling invalid and successful attempts to Super Bass and we also have an empty function called sign up which we're going to be using to make our request to superbase and this function is going to be executed every time that we click submit within our form now the first thing we need to do to sign up a user is we need to gain access to the Super Bass client within this file and to do this we can actually use a composable that's available to us in this module called use superbase auth client and what this composable does is it gives us access to all the available methods from Super Bass to hand handle authentication and we're going to store this composable in a new variable called clients so inside of this function we're going to create what is called a try catch block inside of the try block we're going to reference our client variable which is set equal to this composable called use super bass auth client and on here we have access to a property called auth and on this auth property we have available to us a few methods and the method we're going to be using is called sign up now this method accepts an object with a few properties for signing up our users so the properties it accepts is going to be the email which we'll set equal to our email variable and then it accepts a password property which we're going to set equal to our password variable now once this function executes it's going to return back data and then errors if any are present and if you wanted to access that data or the errors what we could do is set this function equal to a new variable and then reference it accordingly however to make things a little bit cleaner we can actually destructure the response that we get back from Super Bass so what we can say is we can create a new variable and then we can destructure the data and the errors from the response now since this function will take some time to execute we're going to want to wait for it to finish before continuing on now since we're using the async keyword here in front of our function we can just use the await keyword in front of here to wait for this function to finish before continuing on so after this function finishes we're going to want to check to see if we have any errors being returned from Super Bass so what we'll do is an if check to see if we have any errors being returned from Super Bass so we're going to say if we have an error then we want to throw that error and then it's going to be caught here inside of this try catch block and what we want to do is we're going to then take our error message variable and we're going to set it equal to the error.message being returned from superbase now if we don't have any errors being returned from Super Bass then what we want to do is we want to set our success message variable here which is going to say check your email to confirm your account and one thing we do need to fix here so when we destructured our response from Super Bass it should not be errors it should just be error so this is actually all the functionality that we're going to need in order to sign up a user from our application to superbase so let's test this out so we have the application running here on Port 3000 so let's give this a go so let's just put an email here we'll say test.yahoo.com and if we forget to put the password in here and we click on register then as you can see we're going to get spit out a message here from Super Bass saying signup requires a valid password then for example if we leave out the email we just put in a password then we should get back a different response and you can see it's going to say to sign up please provide your email so I do think this is pretty cool that super bass provides us with this information so that way we can properly inform the users of what exactly the issue is and the best part about this is we don't have to worry about writing any of this logic we can just grab it from Super Bass and we can display it accordingly here inside of our UI so now that we've seen that let's actually create our account so we'll use my email of John johncombernicki.com and we'll just give ourselves a password here and then let's just click on register and as you can see we are able to successfully go ahead and create our account we got our success message but one issue that we do have is that we still see our error message so what we could do is every time that we run our function we could clear out the error and also success message and on the network tab for our successful sign of function this is what superbase went ahead and returned to us and back here inside of our Super Bass project underneath the authentication tab we can see that newly registered user that we just went ahead and created so now that we have the ability to register a user let's see how we can log in a user and for this I already have a page created call log in and we have a few things already defined in here so we have this variable called router which we're going to be using to redirect the user once they have logged in then we have these two variables here one for the email and then one for the password and then we have this variable for our error message to handle any invalid attempts that we may have from Super Bass and lastly we have a function called sign in which we'll use to make our request and this function will be executed each time that we hear the submit event on our form so again in this file to get started we're going to need to import these Super Bass clients so for this we're going to use that composable we use in a register file called use superbase auth client and we'll set this equal to a new variable called clients and for this function it's going to look pretty identical to the one we wrote for registering a user so let's begin by creating a try catch block and within the try block we're going to create a new variable and we're going to destruction the response to get back from Super Bass but for the sign in function we're only going to be destructuring the error that we get back from Super Bass and we'll set this equal to a weight and then we'll reference our client then we'll use that auth property and this time we're going to use a method called sign in with password and this method also accepts an object and we're going to pass it to properties we're going to pass it the email and then we're going to pass the password and if we do encounter an error what we're going to do is the same thing we're going to do an if check to see if the error exists and if it does we're going to throw that area get back from Super Bass and then we'll handle that here inside of our catch block So within this catch block we're going to reference our error message.value and then we're going to set it equal to the error.message we get back from Super Bass and lastly if you don't encounter any errors then we're going to use our router and then we're going to use the push method and then we're going to direct them to a page I created called profile so back here in our application Let's test this out so if we attempt to log in with an account that doesn't exist so we'll just say test yahoo.com and I'll just do a fake password and if we click sign in then obviously that account doesn't exist and we're going to get an error message back saying invalid login credentials so now if we use the account that we went ahead and registered with which was this John at John kormaniki.com and I did go ahead and verify this and then we enter the password that we did we should then get redirected to the profile page which we do okay so now they're able to log into our account we want to be able to detect in the application if a user is currently logged in So within the profile page we can use another composable from this module called use superbase user and what this composable does is it gives us access to the currently logged in user and if there is no user logged in then this value will return null so what we'll do is we'll store this composable in a variable called user and to show you what this returns we can log out to the console this user.value so if we save this and head over to the application that you can see in the console we're going to get all this information about the currently logged in user and then here inside of the temple what we can do is access this user to display certain information about the current logged in user so for example we can display the current email of the logged in user and here in the application you can see the email of the currently logged in user all right so now that we have the ability to register a user log any user and detect if a user is currently logged in we also want to be able to let the user log out of their account now to do this the first thing we'll need is our super based clients what we'll do is use our composable of used Super Bass auth client and then we'll store it here in a variable called client and in this function of log out what we'll do is we'll Define a new try catch block and inside of the try block we're going to create a new variable and to structure the response we get from Super Bass but again this time we're only going to be the structuring the air and then we'll set this equal to and we'll use a keyword to wait and then we'll reference our client variable the auth property and then a method on here called sign out and if we have any errorism Super Bass we'll do the same thing we've done before is we're going to check if that error exists and if it does we're going to throw that error and then we'll handle it within our catch block and for this example what we're going to do is just log out of the console the error that message that we might get if we do encounter an error and if we don't encounter any errors and we're able to sign out successfully then what we're going to do is redirect the user back to the login page and back within the application if we click on the log out button we should be logged out and then we'll be redirected back to our login page now the last thing I want to cover in this video is protecting your authenticator route so what I mean by that is for example in this demo we have that profile page that we created which is essentially only for authenticated users so if a user is not signed in then we wouldn't want them to be able to hit that page but currently if we were to go to this page Sophie say slash profile we can obviously go ahead and hit this page but we're not going to be seeing our email being displayed since we don't have a user currently logged in now ideally we want to restrict users from ever being able to reach this page and we can easily set this up using some custom middleware within next and for those unaware of what middleware is simply it's going to be some logic that is going to run before reaching that particular route and what we can do is we can check to see if the user is authenticated or not before reaching this route and if they are let them through and if they are not authenticated then we can redirect them back to somewhere else within our application so back here inside of our next application we first want to do is you want to create a new folder and this will be called middleware and then within this middleware folder we're going to create a new file and we'll call this auth.js now within this file we're going to start by exporting this helper function that's available to us by nux called the find route middleware and this goes ahead and accepts a callback function and within this function we first want to get reference to if a user is currently logged in so to do this we're going to use our composable of use super bass user and then we'll store that in a variable called user then what we'll do is we're going to check to see if this user value is null meaning they're not logged in and if they're not logged in then what we want to do is we'll say return and then we're going to navigate the user back to the login page and back inside of our profile page to use the middleware we just created we first need to use what is called the Define page meta macro and then within here we can then Define something called middleware and pass it a array and then we can reference the name that we gave our middle where which was called auth and now each time that we try to get to this page this middleware function of auth is going to be run and it's going to check to see if the user is currently logged in and if they're not logged in then it's going to redirect them back to the login page now for this to work properly you're also going to want to stop and then restart your nux server so we can just hit Ctrl C here to stop this and then we can rerun it with npm run Dev and now back within the application if we attempt to go to the profile page and we're not logged in we're just going to get simply redirected back to our login page all right so that's going to wrap it up for this video and how to add super based authentication into your next 3 app so hopefully you found this video useful if you did be sure to leave a like on it down below and if you are new here be sure to subscribe for more content like this thank you guys for watching I'll see in the next one take care

Channel: John Komarnicki

Views: 12,318

Keywords: vue, vue 3, vue js, john komarnicki coding, nuxt 3, nuxt, supabase

Id: yO-JMkjc4oo

Length: 14min 23sec (863 seconds)

Published: Wed Jun 14 2023