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

Shadid Haque
InstructorShadid Haque
Share this video with your friends

Social Share Links

Send Tweet
Published 5 months ago
Updated 2 months ago

For user signin, we'll implement a proper server action by creating a actions.js file where our server actions can live. In our login page, we'll set the component to be a client component to hold some state. This way we can use the new useFormState hook from react-dom and pass in our login server action.

Within the action we'll call our UserLogin function from Fauna and set a cookie with the secret we get back that we can use throughout our application.

[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.

egghead
egghead
~ 44 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today