In our development life, we might experience most of the instances that some endpoints are still not available for implementation in our client side, we might wait for several sprints before we can fully connect our front end code and call the provided url endpoints. This might take some time and can create delays in our development cycle.
Nowadays The trend for a separate front end and back end development is really going high, most applications are being developed using REST APIs or Graph QL where our client app is independent in our backend code, this means that our code for our frontend and backend is completely separated, in this case development happens separately or parallel in both applications, we will mostly encounter that in our frontend, we might already need to call endpoints to consume data but the endpoints required are still on development, in this case we might want a mock or fake endpoints that will have the capability to mimic the behavior of the endpoints. This is where json-server saves the day!
What is JSON-Server
JSON-server is an NPM library that allows us to create our mock endpoints using a plain JSON file that will act as our database, this will create a server that will generate CRUD endpoints for us to consume in our frontend code and you might ask if this requires coding to create our endpoints, well, the answer is no, we will just create a JSON object and the creation of our endpoints will follow by just following the JSON structure. lets see the example below:
{
"todo": [
{
"id": 1,
"title": "code my website",
"author": "seiji villafranca"
},
{
"id": 2,
"title": "play a game",
"author": "seiji villafranca"
}
]
}In my example, we have created a simple JSON Object, with a todo property which is an array, let's think of this as a nosql database and we will create an endpoint for this one by using json-server, we will allow json-server to watch for this JSON file, it will automatically create several endpoints that we can use to read, create edit and even update a specific data in the JSON object
GET /todo
GET /todo/1
POST /todo
PUT /todo/1
PATCH /todo/1
DELETE /todo/1The format of the endpoint for the plural routes would be the name of the property which is todo and it will automatically generate the basic http requests we need in our CRUD application, we can also use the --routes parameter on running the watch command on our json-server to add custom routes, JSON-server offers other features like sorting filtering of data and I cannot tackle here all as we will focus on authentication mocking , for more information on other offered functionalities of JSON Server, you can checkout their documentation on the following link https://github.com/typicode/json-server
Configuring our JSON-Server
In this configuration we will focus on how to mock our authentication endpoints, we will need three dependencies for us to install but first our first step is we need to create a folder that will serve as our json-server project
in our created folder, we will execute the npm init command to initialize the folder as an npm project, this will create a package.json file that will contain our dependencies.
the next step is we will now install the three dependencies for our project, these are express, json-server and json-server-auth.
execute the following command to install express, json-server and json-server-auth
npm install express json-server json-server-auth --saveexpress - a node framework that will be used for creating Web APIs
json-server - The json-server itself that will watch for our json file and create a REST Server
json-server-auth - The exetension of json-server that will allow us to generate login and register endpoints that can generate a mock jwt.
now the root of our project, we will create a file named db.json file with the following content:
{
"users": []
}the users is currently empty, this will contain all the registered users coming from our mock endpoint.
now this should be our folder structure would look like:
and that's basically it we are now ready to run our json-server-auth application, to run our application we will execute the following command:
json-server db.json -m ./node_modules/json-server-auth
we can see above that our json-server is successfully running! let's test our endpoints using Postman
we will now try to register a sample user to add a user data. we will use the /register endpoint for us to create a new user, this will add a new record on the db.json file.
we can see above that our endpoint has successfully returned a token, this means that our json-server is running, we can also check if our user has been added to our db.json
and yes! it is already added, our register is now fully functioning, remember that email and password is required on this endpoint, we can also add additional properties by adding additional data on our request body.
Now we will test the /login endpoint if it will return a valid JWT token.
and our login endpoint is also working as expected, we have created our fake endpoints without a single complicated code, we can now use this on our client side application on our login component.
Guarding Routes and Accessibility
json-server-auth has also provided features that will allow us to control who will be able to access (read and write) a specific resource based on the logged in user, json-server-auth has used the concept of Unix filesystem permissions by using their numeric notation.
Read and Write Permissions
We add 4 for read permission.
We add 2 for write permission.
We add 6 for both read and write
Who can Access?
First digit are the permissions for the resource owner.
Second digit are the permissions for the logged-in users.
Third digit are the permissions for the public users.
So implementing this example is using the value 644, the owner can read and write the resource while other users has only the read access.
Other examples from the documentation.
/664/*
User must be logged to write the resource.
Everyone can read the resource.
/660/*
User must be logged to write or read the resource.
/644/*
User must own the resource to write the resource.
Everyone can read the resource.
/640/*
User must own the resource to write the resource.
User must be logged to read the resource.
/600/*
User must own the resource to write or read the resource.
/444/*
No one can write the resource.
Everyone can read the resource.
/440/*
No one can write the resource.
User must be logged to read the resource.
/400/*
No one can write the resource.
User must own the resource to read the resource.
Now using this route permissions for example, we will request the users endpoint with a logged in user with the id 1.
GET /600/users/1
Authorization: Bearer xxx.xxx.xxx200 OK
GET /600/users/23
Authorization: Bearer xxx.xxx.xxx403 FORBIDDEN
as we have used the 600 code, we are allowing the resource to have a write and read permission if you are the owner but will not have any read and write if you are not the owner having requesting an id of 23 is forbidden.
Conclusion
And that's it, we have now created our mock authentication with guards endpoint using json-server-auth endpoint, this is very useful when we want to proceed to our frontend development, this can also be used if we are creating prototypes for us to save time on creating our backend application and if you are a tech speaker and your purpose is only to create a simple application on the fly that needs an example authentication, json-server-auth can be used to save time and effort to create a no code backend.
for the example code you can checkout and clone this repository for your reference cheers!
Comments