Auth Forms with Server Actions

[00:00:00]
>> Scott Moss: We are going to be doing configuring the Auth Forms, okay? So instead of submitting a form with the on submit handler, which is probably what you're used to, and making a request to an API. We're instead gonna use the new use action state hook from React and add a form action to the form that uses our server functions that we just made.

[00:00:26]
So if you've never seen this hook before, this is cool. This is gonna be your first time using it. It's pretty great. The use action state, essentially what it does is back in the day when people wanted to submit forms, before Jquery came along, before Ajax came along, before Google Maps.

[00:00:45]
You would have a form action, it'd be like, what is the name of the action you want this form to do? And that action correlated to something on the server. This is very common in PHP days and things like that. Even in JavaScript, they're just using that. But the action itself is going to be some unique.

[00:01:06]
It's obfuscated from you, but it's gonna be some unique identifier that maps to the server action that you created. Remember when I said when you create the server actions, it just creates routes for you, but the paths of those routes are like generated and obfuscated and random and unique.

[00:01:21]
Okay, the action that we pass into the form is gonna be a handler for that value that you did not create. So whatever the value, just like CSS modules, you didn't create that end part on the CSS module that was unique, the build system did. Well, next JS is gonna do the same thing for all your server actions.

[00:01:36]
It's gonna create a unique path for them. We're gonna reference that path in our form action with a variable, and that variable is gonna be the handler to our function. So when you import a server action into a client component, what you're really importing is just like the handler for that function, you're not actually importing the code, you're just saying this is the handler for that function.

[00:01:57]
So when it gets called make a network request to that function and then give me the result back. That's what it's actually doing. It's not actually importing the code. Does that make sense? Okay, they're using the action, prop on a form, which is super OG to do that.

[00:02:17]
So we aren't doing any controlled inputs. We're not keeping track of the loading state coz use action state does that for us. It gives us the status of whether or not an action is still running. It gives us the state of the input and it allows us to describe what we wanna do once the form is submitted.

[00:02:45]
So it gives us all those things that we would have made anyway. We just get them for free. So it's kinda cool. So let's go make signup. So sign up. We already have some code here. First thing you wanna do is put a use client at the top.

[00:03:01]
Why do we need to put a use client here? You have to put a use client if you're gonna use hooks. If you try to use any hook on a component that does not have use client, you will get an error. Why, because hooks run in the browser.

[00:03:18]
To tell React that you want this component to be like, think of use client as like use client is basically saying, I want this. This component is gonna have some interactivity. It's gonna respond to some interaction on the Browser. I need JavaScript to run on the browser. You gotta put use client.

[00:03:38]
This is a form. So there's gonna be some type of JavaScript that's running on the browser. In this case, it could be validation, it could be anything. So if you need to do some type of browser calculation, some type of browser interaction handling, you're gonna do a use client.

[00:03:53]
You need to do anything where code is running in the browser and it's not just presentational like the landing page that we created, where it's just a landing page and it's not doing anything. You're probably going to use client. And unfortunately if you go use a component library that uses CSS and JavaScript, you just gotta do use client everywhere.

[00:04:15]
A lot of them have fixed it, but you might have to literally take a component that you want, go make another component that wraps it, just to put use client at the top and then use that component for every component that you wanna use. This is why I don't do CSS and JavaScript.

[00:04:27]
A lot of them have fixed it, but still I don't wanna risk it. So use client is the React that you've come to know. Not putting use client means it's gonna be a server component. If that makes sense, okay? We can interchange how we use them. I'm not covering too much about that because again, it's not really Next JS specific.

[00:04:52]
It's mostly React specific. So you can check out Brian's course on that, but you can pull in client components into server components and that's typically actually the pattern. I think next JS calls it, what do they call it? The donut pattern or something like that. Where it's the server components on the outside and then the donut hole is where you would stuff client components or something.

[00:05:14]
I don't know, I think that's what they call it. I don't call it that. I like to fetch my data on the server, so server components make sense, you'll see. When we do data fetching, then I like to pass that data to the clients and those clients can do whatever they want with it.

[00:05:27]
They could use React query and initiate a client request. Which by the way, here's a tip. React query isn't just for HTTP requests. You can use server actions in React Query. React query takes any async function as a fetcher. So if I ever use React query, which I do, sometimes I just give it a server function.

[00:05:50]
I don't actually make a fetcher or anything like that, just give it a server function. So it's really great.