Check out a free preview of the full Build a Fullstack App with Next.js, v2 course:
The "AuthForm Pages" Lesson is part of the full, Build a Fullstack App with Next.js, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott adds the AuthForm component to the register and sign in pages.

Get Unlimited Access Now

Transcript from the "AuthForm Pages" Lesson

[00:00:00]
>> All right, so we left off with the AuthForm which is exactly what it sounds like, it's a form that we can use for auth. So what we're gonna do now is we're just gonna put it on the auth layout. And then that way we can actually, well, so what we're gonna do is we're gonna have the AuthForm be inside of the sign in and register, which are gonna be on the layout.

[00:00:27] And that way we can actually try to sign in and create an account and go from there. And then what will be next is just finishing out everything on the dashboard page. So let's do that. So what we'll do is we'll import the sign in, or I'm sorry, the AuthForm into the sign in page.

[00:00:50] So if you go to app > auth > signin > page, we wanna import the AuthForm in here. So let's say import AuthForm from here, Like so. Like that, and then for the mode, this one is gonna be signin. So we got that, and then for register, it's mostly the same, let's open an AuthForm.

[00:01:28] So I'm gonna say register. I'm gonna change the name of this to register as well. Good there? Okay, so let's go check it out. So let's run this, Is this [INAUDIBLE]? No, it's not. run dev, check it out. Go to /register, like that. I forgot to import the link in the AuthForm, so I'm gonna go back and do that.

[00:02:09] Thought I did, I must have deleted it or something. I got that back in there. Expects a string, got an object. Let's check that out. So where would that be? That is in the, In here, let's see. Content.linkURL, linkText.
>> Is it the casing?
>> It might be the casing.

[00:02:45] Let's see, yeah, it's definitely the casing. I'll change it up here. I'll be smart. It's like we need TypeScript or something.
>> [LAUGH]
>> [LAUGH] Okay, there we go. Now we have this form here where you can register, create a user, and if you click here, you can sign in.

[00:03:11] So this is how you toggle, you just click this thing here. So I can tell right now, the font is just messed up, it's not even using the right font. So right on the go, I'll fix the font cuz this is not, I can't do this.
>> [LAUGH]

[00:03:31]
>> [LAUGH] I can't do this. This is making, like I wanna peel my skin off-
>> [LAUGH]
>> Looking at this font. So we need to fix this font in the layout, but that's fine. That's fine for now. Any questions on bringing in the AuthForm here? Or on these pages?

[00:03:53] Does it make sense why I made it this way because they're basically the same thing and now you get this nice one-liner in the server component which just feels good. But if you think about it, all we're really doing is wrapping this client component on a server page.

[00:04:10] Actually pretty simple. So if you were like, look at this page to see how things are loading. This whole background here is loading pretty much immediately on the server and then this client gets shipped through JavaScript and then it pops up. We could probably even push it further to the edge away from the form.

[00:04:33] I don't know, I'm getting crazy. I think the form is as low as you can go. Maybe you can go lower than that, cuz that's where the event is. But there might be a way. I'll figure it out, not right now, though.
>> Can you talk about prefetch at link?

[00:04:46]
>> Yeah, prefetch. So let me find example of that somewhere, AuthForm I guess. So you could do prefetch here, like this. Basically what prefetch does, I mean, if you hover over it, it kinda tells you but, what it'll do is, if you know there's a link that someone's for sure are gonna click on, they're gonna click on it, why wait for them to click on it to load up that route.

[00:05:19] You can just put a prefetch prop right on the link component to tell, which will hint at the browser to go ahead and kinda make that request in the background. Because if maybe that page that you're linking to has data it has to fetch on the server, maybe it has other requirements that it needs, authentication requirements.

[00:05:40] Go ahead and start doing that stuff right now, so when they click on it, it's faster. It just loads up faster. So I think Rails had something like this back in the day when it was turbo links or something like that, I don't remember, it's still a long time ago.

[00:05:53] But it's something like that, you're just doing that request ahead of time cuz you're so sure that the user is gonna click on this thing. Maybe it's because that's the only thing they can click on, but they can't do it until they finish something, so you could do a prefetch.

[00:06:09] Or it's just like, hey, we got all these navigations, they're gonna click on them eventually, let's prefetch the navigations. There's many reasons why you would do it, but that's basically it.