Build a Fullstack Music App with Next.js Sign In & Sign Up

Transcript from the "Sign In & Sign Up" Lesson

[00:00:00]
>> Now we're gonna continue working on the auth form. So people can sign in and sign up, and then we can move on to the actual music player. So to do that, we're gonna head back into the auth form component that we created. And we'll just start working on the form that I have here.

[00:00:18] So we'll get rid of this default text for form and we will actually build out a form. So it's gonna make a box here and this box is just gonna be centered in a page where our inputs in the button are gonna. So I'm just gonna add some padding all around it something like 50 pixels.

[00:00:37] And then I'm gonna make the background just slightly lighter than black, so we can do gray.900. And it's gonna give it a border radius so it's not square, so like 3 px or 4 pixels, get crazy, let's say 6 pixels. And then from there, we're gonna actually use a form, so we can be semantic and we can actually hit Enter.

[00:01:01] And then inside that form it's just gonna be two inputs and a button and that's basically it. So we're gonna have one input and we're gonna use the input component From chakra and not the native input form. So another input here, and then we'll just have a button like that from chakra as well.

[00:01:23] And in for this first input, we'll put a placeholder of Email, type email And then we will do an on change. So on change is going to take the events and it's just gonna set email to whatever e.target.value is. So we got our email there, The second ones also have a placeholder for password And a type of password so it won't actually be visible, and then on change very similar, we're just gonna set password.

[00:02:10] So e.target.value. And then for the button, Place simple button here but it's got some really nice things attached to it. So for the button, first thing to do make sure it says type Submit. If we don't do this, we won't be able to hit Enter when we do our own submit, so make sure you have that.

[00:02:34] Something here has to be type submit by this input or button. And then what we'll do is I just wanna change it green. So what I'll do is I'll say bg which is background and I'll do like green dots 500, that's kind of bright, so we'll do that.

[00:02:52] And then there's a loading prop that we can pass, so I'll say is loading and I want that to be true if is loading is true. So they'll show like a little spinner, and then we want to do it on click here. Well, I guess we don't need to do on click, we could just do the on Submit and the form so we won't do that.

[00:03:12] And then as far as the text that's on the button, it'll just be mode. So either sign in or sign up. So yeah, we just basically added a box that'll be the center of the page. That box is going to be a container for form and that form has an input that has a type of email that on change will set the email state and another input.

[00:03:41] That's type password that will set the password state and then a button that's green that will load or not load depending on loading is true. So I'll come back to this just want to verify that it looks the way it should look and there we go we have box in the middle the page two inputs a button.

[00:04:04] And yeah, the button screen so we're getting there. The hover colors, pretty gross and we can change that but yeah, it's pretty gross hover color. That's cuz I think they want you to do so just changing the background directly. They want you to make a different variant that handles like all the different things.

[00:04:27] But pretty sure we could come in here and do something like sx and then we can do something like and hover. We can do say hover background, green dot something slightly lighter 400 that might do it. Yeah, it's pretty cool. That's why I like this component loop because you can just literally do Sudo states in CSS right on the prop, it's pretty awesome.

[00:05:07] Probably make that a little lighter 300 maybe. Yeah, there we go okay, so now we need to actually make this work need to hook it up. I mean there's still some styling we can do to we should probably add a link down here that says already have an account or don't have an account click or to sign up.

[00:05:26] Don't you know like we could do that. Maybe we'll get we'll add that but it's pretty simple stuff. And then we should add a logo up top it says hello, which I like a logo or at least a border. So a border bottom up here. So say border bottom, white, 1 px solid, there we go.

[00:05:47] And then we could probably add the logo up here, the tracks logo so people know what they're signing into. So let's do that, I'm gonna import next image from next image And then here I'll just say Next image. Source will be I forgot what I called it, I think it's this logo, SVG and height.

[00:06:19] How tall this thing is things 100 px, so let's say 60 px Ops. Height will be 60 and width will be, Once we double that there, so now we got a logo there, email, password, sign in button. Okay, let's make this thing work. So in order to make this work, we need to add an On submit on the form.

[00:06:53] So the on submit for function called handle submit, and then now we just got to go make that function. So what we'll do is we'll come up here, we'll say const handleSubmit like this Gonna take an event. Because it's a form, we wanna prevent the default. Otherwise, it'll reload the page and try to submit it to the server, and do whatever.

[00:07:16] So we don't want that to happen, so we'll prevent the defaults. And then from here, there's a couple things we wanna do. First thing we wanna do is because we're about to make API calls, we wanna set loading to true, so set is loading is true. So we'll do that and, I'm just gonna test out that our button actually loads when we try to submit this form.

[00:07:40] So if I just come in here, Got my hack emails, you can see that it's actually loading and it's disabled, which is pretty cool. So that works and then from there, we wanna go ahead and make the API call. So I'll say const user = await, and then I wanna use that Auth method that we made, so this needs to be a sync.

[00:08:11] So like the auth method that we made which takes in a mode which we have here and then you can see it also takes in a body. So we also have that this email and password. And yeah, this thing's freaking out because it's like it has to be either they're sign in or sign up and not just a regular string.

[00:08:37] So yeah, that's what you get for making this super strict but yeah that's why that thing's freaking out. The way I'll fix that as they come up here say, okay, this is sign in or sign up. And now, it's fixed or just don't use the types at all.

[00:09:00] [LAUGH] you don't have that problem, [LAUGH] so, yeah. Okay, so now we have our user, eventually we're gonna update the cache, but we'll get to that later. For now we'll just say set, loading to be false so we'll do that and then we'll say router.push which will navigate us to the home page.

[00:09:26] And for now we don't even really need the user will just await it, we'll come back and set the cache once we talk about that, okay? So now I'm going to try and test this out things like stuck in a state there we go, so I'm actually going to try to sign, yeah try to stop Sign in actually.

[00:09:45] So I'm about to sign in with the test email, so that will be user@test.com, password, then Enter, boom, signs man brings me here. If I try to sign up for some accounts And I say new@new.com and password is admin, that also works. And we know that because if we go back and we look pull up the console, and click on application and you go to the cookies, you can see that the cookies actually stored there with the JSON web token.

[00:10:25] So we are now signed in, this is proof of us being signed either. If this wasn't here we would not be signed in, we'll circle back on the USSWR config. Later when we get to making an API call to get the user and then it'll make more sense when we come back here and update the cache.

[00:10:43] I should feel like traditional react we didn't I mean, there was really nothing specific. I mean, it was all just client side, making an API call. But I think the really cool thing is that like we made a API call to an API function that we made in the same repo.

[00:10:58] We don't have another server running, it's just here so some file, which is really interesting. Whereas traditionally, you would have another server running like Python, express rails, whatever. And then you make a call to that, whereas we don't. It's just running in the same process, at least locally here, so it's pretty cool.

[00:11:19] And that's just one way to fetch data. In next js that's client side. When we do server side data fetching, we actually don't even need to make an API call. We can just actually talk directly to the database and we will be doing that with the playlist. So we'll check that out.