Set up a Login Page in Next.js with Supabase's auth.session()

Instructor: [0:00] We're now inside of our INDEX function. This is going to be the single route that we have setup currently in our application. We'll use this to set up a new authorization or login page for our users.

[0:12] Before we get there, it would be nice, of course, to see what this looks like. Let's run this using the command line so we can begin to preview it in development. To do that, I'll run, npm run dev. In this case, if you're like me and you have other things running on your computer, you can see sometimes the port 3000, which it uses by default, is already in use.

[0:35] If I run port 3001, setting a environment variable and say, npm run dev, you can see that it will start here with a different port. You can do that if you're like me and you have a lot of other things running on your computer at the same time. This link here localhost 3001, we'll click this and open it up in browser.

[0:57] We've opened up port 3001 on localhost and we can see we get this welcome to Next.js back, which is the default Next.js screen when you created a new application. This is great, obviously, that gives you a sense of things. For instance, using components and things like that, writing JSX in your application.

[1:16] For us, we're going to delete all of these, and instead we're going to start filling in our own information here. Inside of main here, which is the div directive that indicates everything of our content. I'm going to select everything inside of main and I'm going to delete it. In fact, I'm also going to take the entire footer here and delete that as well, and then delete the Meta and link inside of our head tag.

[1:41] I'll replace this title here with something like Supabase chat. Now, you can see this image component here isn't being used, so let's delete that as well. All that we're left with is a blank screen here where it says Supabase chat app.

[1:55] What we want to do inside of this component is show a login screen. If a user is not currently logged in, then give them a link to be able to sign in. Otherwise, of course, we'll start showing them the real application that we're going to be writing. To do this we're going to use two react hooks. We're going to import useEffect and we're also going to import useState.

[2:17] Inside of our page, I'm going to set up a new hook using useState, called logged in. That will have logged in as the first variable out of this hook and then set logged in which will allow us to update that. I'm going to call use state passing in a initial value of false, so it defaults to not being logged in. I'm also going to set up a new instance of a use effect hook. Use effect is a function that takes another function in as its argument.

[2:48] Inside of that, I'm going to say, set logged in to the value of what? Well, we know that we want to check if someone is logged in by referring to the current Supabase auth session, right? That represents as we talked about earlier, whether someone is logged in, whether someone's logged out, and it gets updated when that changes. Basically, what we want to do here is check for the presence of session.

[3:14] If session is set, then that will contain all of the information about whether someone's logged in or not. In this case, use state has a initial value here of false. We're indicating that this is a Boolean. Use state is either true, so you're logged in, or its false, you're not logged in.

[3:33] Since session here could be an object containing a lot of different information, we need to prefix this with the double exclamation point, which coerces a variable or value into a Boolean. If it's an object here, the double exclamation point says, basically, is this true or false? Is this value truthy? Does it have some sort of data inside of it? That will turn this into either true or false.

[3:58] Finally, with use effect we need to pass in a second argument here, which is an array of variables essentially for use effect to watch for changes too. If something in this variable changes, this use effect will run again. The best way to know how to do this is to look for variables inside of your function that you know could change. In this case, the clear obvious one here is session. I'll parse in session here.

[4:24] What this will do is say, at the very beginning of our function running, run this use effect and set logged in to either true or false. Also, if something else changes, for instance, if I log out or something like that, this set logged in function needs to be called once more and update session, or update logged, in that is based on the Boolean value of this session.

[4:47] With all of that, we now have this logged in variable which is either true or false that we can use to determine how to handle our user interface. Inside of our main here, let's make use of that logged in variable. I'm going to set up a ternary statement which is a shorthand for saying, if else.

[5:07] I'll say, if I'm logged in, return a span, a text field here that says, logged in. Else, return some sort of log in button. I'll say, log in button here. If I save and come back to my UI, you can see it says Login button here, right? I'm not logged in, so we know that this will need to be where our auth lived.