Implement Signup Functionality through Fauna with Next.js 14 Server Actions

Shadid Haque
InstructorShadid Haque
Share this video with your friends

Social Share Links

Send Tweet
Published 4 months ago
Updated a day ago

Now it's time to actually sign users up for our appliaction.

We'll implement the doSignup function that we created earlier. This function will run on the server with the 'use server' directive so we can instantiate a fauna client and call UserRegistration within this function.

From there we'll redirect the user to the /signin page which will error out because it's not implemented yet.

[00:00] Before we implement the form, we have to make one small change in the roles. So under auth role, we need to define which collection the identities are saved in. So I'm going to write membership user and user being the collection where the identities are saved. This tells fauna that when we authenticate using the user collection, an authenticated [00:19] user gets this specific role. We're gonna run fauna schema push in our terminal and push these updated changes. Next, let's go to the sign up page and start implementing the form. We're gonna add [00:39] name attribute to all our input elements. So the first one is going to be username, and then we have email, and then we got password. Next, we're gonna make the to sign up function a async function and rename the parameter to form [00:59] data. And we're gonna grab our username, email, and password from the form. And we're gonna write use server to turn this function into a server function. Next, we're going to import client and SQL from fauna. [01:19] And we will initialize a new fauna client inside the server function. Next, let's make a try catch block. Instead of the try, we're gonna make a fauna query. So we're going to write 0 8 client dot query and then fql [01:39] backticks. And inside the backticks, we're gonna call our user registration function, and we're gonna pass in username, email, and password as argument. And on form submission, we're gonna redirect the user back to sign in page. [01:59] So I'm going to write redirect slash sign in. And let's go ahead and import redirect from next navigation. So back in our browser, we're gonna go to the slash sign up route. And here, we're gonna try to sign up a new [02:18] user. Now we're gonna get an error, but this error is coming from the sign in page itself because sign in page is not implemented yet. However, the user has been successfully signed up. So if you go check our database, under user collection, we'll see that a new user [02:38] indeed got created.

egghead
egghead
~ 12 seconds 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