Open a new terminal and create a new React project by typing the following command in the terminal:Īnd make sure you are in the “ jwt-auth” folder, like the following picture: However, the easiest way is " create react app". There are many ways to create a React js project. If you are not familiar with React JS, I suggest you to learn the “ React JS Tutorial For Beginners” first. Up here you have successfully created a " backend". If it goes well, it will look like the following image: To make sure the application runs properly, run the application by typing the following command in the terminal: You are free to set values in ACCESS_TOKEN_SECRET and REFRESH_TOKEN_SECRET above. REFRESH_TOKEN_SECRET = 825y8i3hnfjmsbv7gwajbl7fobqrjfvbs7gbfj2q3bgh8f42 env” in the “ backend” folder, then type the following code:ĪCCESS_TOKEN_SECRET = jsfgfjguwrg8783wgbjs849h2fu3cnsvh8wyr8fhwfvi2g225 Open the " Database.js" file in the " config" folder, then type the following code:Ĭonst db = new Sequelize('auth_db', 'root', '', )) Īpp.listen(5000, ()=> console.log('Server running at port 5000')) Ĭreate a file named “. Look at the following picture for more details: Then create the file " Database.js" in the folder " config", create the file " Users.js" and " RefreshToken.js" in the folder " controllers", create the file " VerifyToken.js" in the folder " middleware", create " UserModel.js" file in the " models" folder, create the " index.js" file in the " routes" folder, and create the " index.js" file in the " backend" folder. To make the application more structured neatly, we will apply the MVC pattern (Model-View-Controllers).Ĭreate “ config”, “ controllers”, “ middleware”, “ models”, and “ routes” folders in the “ backend” folder. The SQL command above will create a database with the name " auth_db". To create a database in MySQL, it can be done by executing the following query: If you create a database with the same name, that's even better. Here I create a database with the name " auth_db". Then create a new database in MySQL, you can use tools such as SQLyog, PHPMyAdmin or similar tools. To be able to use MySQL, you need to install XAMPP, WAMP, MAMP, or similar software. This is so that we can use ES6 Module Syntax to export and import modules. "test": "echo "Error: no test specified" & exit 1" So that the “package.json” file looks like the following: Next, add the following code to the “package.json” file: Next, install nodemon globally by typing the following command in the terminal: Npm install express mysql2 sequelize jsonwebtoken bcrypt cookie-parser dotenv cors Next, install express, mysql2, sequelize, jsonwebtoken, bcrypt, cookie-parser, dotenv and cors by typing the following command in the terminal: Next, open a terminal in Visual Studio Code on the menu bar terminal => new terminal.Īfter that, type the following command in the terminal to create a “package.json” file: You can download Visual Studio Code at the following link, then install it on your computer:Īfter the " jwt-auth" folder is opened using Visual Studio Code, create a sub folder named " backend" in the " jwt-auth" folder. I also suggest you to use Visual Studio Code. Then open the " jwt-auth" folder using the code editor, here I use Visual Studio Code. You are free to make it anywhere, either in C, D, or on the Desktop. Install DependencyĬreate a folder on your computer, here I name it " jwt-auth". I will also share with you how to create refresh token and save refresh token into httpOnly cookie so that our application will be safe from XSS (Cross-site Scripting) and CSRF (Cross-site Request Forgery) attacks. In this tutorial you will learn how to create login and registration using JWT (JSON Web Token) with node js, express, mysql on backend and react js on frontend.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |