Implement Signup Functionality through Fauna with Next.js 14 Server Actions
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.