Implement Fauna Signin with Next.js Server Actions and useFormState React Hook

[00:00] We're gonna go back to our sign in page component. Here we have a do sign in function. Let's turn this into a proper server action. Let's go ahead and create a new file called action dotjs. And here in this file, we're going to create a new function called do sign in. [00:24] We're going to get the email and the password from the form data. If either one doesn't exist, we will simply return a message. Next, we're gonna go back to the sign in page component and turn this into a client component. And then we're going to import [00:44] use form state from React DOM. And then we're gonna import do sign in from actions. We can delete this [01:03] other do sign in function. Next, we're gonna create a form state. We're gonna use the use form state hook. We're going to plug in our do sign in action and initial state. Let's go ahead and create this initial state. [01:25] The initial state will have a message. And we'll write some JSX to display the message. Next, we're gonna add name attribute to all the input elements. We're gonna go back in the actions folder, and [01:45] we're gonna import client and SQL from Fauna. And I'll initialize a new Fauna client. And then here, we're gonna do a try catch. [02:11] And we are gonna make a new fauna query, and we're going to call the user login function with email and password. And I'm simply going to console log the response. Next, we're gonna import cookies from next headers. [02:35] Then we're gonna save the token that we get in our response as a cookie. And finally, I'm [02:55] going to redirect to the home page. I'm gonna import redirect from next navigation. Now let's go to the sign in [03:14] page and try to log in. And notice we actually get an error. So let's investigate what's happening. So in the terminal, we can see that we received an error from fauna. It is expecting a document, but it received a set. [03:34] And it's coming from the second line of user login function. So let's take a look. So on line 2, we have user by email query, which will return a set of documents. We're only interested in the first document, so we can just [03:54] write dot first, and it will get the first document. Let's push these changes with phoneme schema push command and then rerun our application. Now if we test our app again, it should be working as expected.