Check out a free preview of the full Web Authentication APIs course

The "Creating Register Endpoint" Lesson is part of the full, Web Authentication APIs course featured in this preview video. Here's what you'd learn in this lesson:

Max builds out the registration endpoint on the server. A route is added in Express for handling the post request, and a method for searching for existing users is created.

Preview
Close

Transcript from the "Creating Register Endpoint" Lesson

[00:00:00]
>> The only thing that I'm going to change now, the idea is that we will have now code that we need to call the server. So we need to play a little bit on the server now to create the endpoints, the database, okay? And then we're going to code that from client.

[00:00:19]
Don't worry, it's not too boring. You also have the code in the companion website, but I'm going to write this first code at least just to start the engines. So I'm going to open now server.js. So I'm going to the backend now, okay? So let's analyze some parts here.

[00:00:38]
So you can see that in terms of ExpressJS, I have only two definitions that it says that first, it's statically serving, where is the, here, it's statically serving the public folder. So that's why when you try an emesh or when you try a URL, it first check in the public folder, okay?

[00:00:58]
If it's not there, it continues, and in this case, it's getting here with this star. This star, what it's doing is this is because we are a single page application, so every other route is also going to the index HTML. This is what this is doing, okay? So here we are going to add the rest of the endpoints.

[00:01:20]
And then for the database, For the database, we are going to use a simple database library, it's called lowdb. Just for, let's say, learning purposes and just to make this faster, I'm doing this. But if not, it can be MongoDB, MySQL, wherever you want, okay? Of course, that will take more time.

[00:01:47]
We will add a server, and so on. We are trying to make it simple with lowdb, and why? Lowdb, it's an open source library for Node, also for the browser, but they're going to use the Node version only, that writes the content in JSON files. And that's easy for debugging because we can actually see the JSON file and see if the data has been stored or not or how, okay?

[00:02:14]
That if it's a MongoDB or something like that, where I need a viewer, I need another tool, a dashboard to actually see what's going on. So here with these libraries, it's much simpler. And the library is just creating a JSON file here with the name auth.json in the root folder of the project.

[00:02:32]
But because we didn't write anything yet, the file doesn't exist. But on the first time we write something, something will appear, okay, makes sense? So what we need is on the app, we are going to make a couple of requests on post. So for example, we can say that we will put all the APIs under the auth folder, and we can say register.

[00:03:00]
And if you have experience with Node.js or ExpressJS, this is how you define a new endpoint, in this case, for the post HTTP action or method. And just in case, the arguments that we receive is the request and the response. So in the request, we will get all the information coming from the browser.

[00:03:23]
On the response object, we will send information to the browser, that ExpressJS 101, okay? So what's the idea here? Well, the idea is that we are going to create, first, through these two lines that we have here, what we are doing is that we are reading the body as JSON.

[00:03:47]
We are parsing the body as JSON. So that happens automatically, which means that when the client is sending us a JSON, we will get that through request.body. That's the JSON already parsed, okay? So for example, that means that I can create a user object that we're going to save, okay, like this.

[00:04:08]
And the name of the user will come from the body, from a name property that then we need to send from the client, okay, or later. The email, something similar. And then the password, something similar. Initially, we will save the password in plaintext. So we are going to do it wrong first, okay, just to see that.

[00:04:33]
Then we can change it. So that's the user, and then I need to save the user. The thing is that maybe it's a user that is already registered, right? So I mean, I could go and talk to my DB now that this API works pretty simple, this db.data.

[00:04:54]
And then over the data object is the root folder of that JSON file that we are going to save. So for example, I can create a users collection, I can call them users, okay? And then I can push the user, and then I can ask to the database to write.

[00:05:12]
In this case, it's going to write in the file system. If not, it's going to be in memory and it will write at the end of the server lifecycle, okay? But if the server is aborted for some reason, might change one being the file system, okay? So that's why I'm writing immediately.

[00:05:28]
I'm not taking in consideration here performance, okay, scalability, okay? We are trying to understand authentication here. One thing at a time, okay? But the problem is that, yeah, if I'm registering the same user twice, I will have two entries, which doesn't make any sense. So I should check first if the user does exist, okay, makes sense?

[00:05:53]
So to do that, because we will use that thing a couple of times, so we will need to check or find a user in the database a couple of times, I'm going to create a function. I could create a class also, I can do this OOP, but I will try to make it as simple as possible.

[00:06:09]
Then you can rewrite this or you can refactor this project with your own way of working without any problem. So let me go full screen for a second. So I'm going to create a function, findUser. The user will receive an email that is our key, our username. That's how we are going to do this.

[00:06:30]
But if you wanna have a different username, that's fine. If you wanna have the email and the username differently, it's fine. It's a larger form, more data inside. And a simpler way to do that is to get an array of results. It's always an array even if it's only one.

[00:06:47]
So we're going to talk to the data to users and we're going to filter that array, okay? So we will use a lambda expression using some functional programming. So for each user, I will check if the email of the user, it's equal to the email that we are receiving as an argument.

[00:07:05]
This returns an array always. So I will check if the length of the array is 0, then I will return. I can do null or undefined saying, hey, I don't have that user, it doesn't exist. Both will work, null, it's up to you which one do you prefer.

[00:07:25]
If not, I'm going to return the first user. That should be the only one, actually. So that is simple way to find a user, makes sense? So now, before writing the user, I should check first if that user is found. So I can say, userFound = findUser with the email.

[00:07:56]
And then if the user was found, I need to do something. If not, I need to do something else. So let's organize this. If the user was found is user already exists. So what we need to do, we need to send an error to the client. Remember, we are writing the backend here and we are doing an API.

[00:08:20]
So what I need to do is to the respond, I'm going to send, for example, I can send different code status like a Forehand rail or Shasta 200, it's up to you with an object. And we can say that, okay, it's false, so it's not okay. And the message can be something like the user already exists.

[00:08:44]
And then we can use that message client side to render that to the user, makes sense? And if it's okay, it seems like the user is new, so we are good. After writing the user, I need to send back an answer that it can be, okay, true, meaning that, yeah, it worked.

[00:09:08]
To be in RESTful, 100% compatible, I should send also a different status code on the error, okay, you can do that. And as I mentioned at the beginning of this course, this code will not be right now at least 100% ready for production. In fact, I'm not doing any validation here, such as if the name is empty, the email is empty.

[00:09:35]
So there are many things to do. So I'm going to leave you here a couple of marks, boring things that we need to do that are not important for the authentication flow. They are important for production, okay? So don't leave this code as it is. But for the flow and to understand what we need to do as web developers, we can bypass that part for now, and then you can add validation, yes.

[00:10:02]
>> Just wanted to make a comment that for anybody wanting to dig deeper into Express and API design, Scott Moss's version four of the API design with Node.js course is on the website and covers Express. It uses Prisma and Postgres on the backend, so deeper dive into API design.

[00:10:23]
>> Yeah, also many of the things that we will be covering, you can get deeper in Frontend Masters library in different courses. This is infinite. So that's why we are taking one workshop at a time, right, one topic at a time.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now