How do I create a registration and login feature?

A login form is used on the front end of a website, web app, or mobile app to collect information needed to verify whether a user has been registered in a system’s database.

Table of Contents Show

Prerequisites
Building a Node.js login form
Setting up a database connection in Node.js
Setting up the homepage
Over 200k developers use LogRocket to create better digital experiences
Creating the login and register forms in Node.js
Registering the user
200’s only Monitor failed and slow network requests in production
How do I create a login and registration for my website?
How do I create a registration and login form in HTML with a database?
How do I create a User Registration form?
How do I create a login and registration form in WordPress?

The authentication process is simple. First, the user submits some credentials — typically an email and password — to the backend through a login form. Then, the backend application checks if the email and password are in the database. From there, the backend app will either grant users access or require them to register.

In this tutorial, we’ll learn how to build a simple login form with Node.js. The form will require a user to register an account. Then, we’ll use the entered information and store it in a MySQL database before signing the user in.

Now that we have an overview of the project, let’s start building!

Jump ahead:

Prerequisites

You’ll need Node.js and npm installed on your local development machine to follow this tutorial. If you’re not sure if you have them installed, run the following commands to check their availability:

# To check if Node is installed, run:
node -v

# To check if Node is installed, run:
npm -v

Besides Node.js, you’ll need a MySQL server installed and running. You can use the standalone MySQL installer or server distributions with MySQL built-in, such as WAMP and XAMP.

Let’s create a new folder for the app and navigate to the folder using the command line with the

npm i express mysql dotenv hbs bcryptjs

9 directive:

cd path/to/your/folder

Then, run the following command to install the dependencies required for this tutorial:

npm i express mysql dotenv hbs bcryptjs

Let me explain what each library is for:

Express: for creating API and web routes and setting up the app backend
MySQL: for connecting to our local MySQL server
dotenv: for storing environmental variables that should not be exposed in the app source code
hbs: for rendering HTML on the server
Bcryptjs: for hashing passwords

In addition, I recommend installing nodemon, which automatically restarts the server when file changes are detected, saving you precious time in development. Install it with the following command:

npm i nodemon --save

Finally, open your app’s

npm i nodemon --save

0 file with a code editor and add the following field inside the

npm i nodemon --save

1 object:

"start": "nodemon app.js"

Now, we’re finished with the project setup. Next, we’ll connect to our MySQL database and create a table to store user login information.

Setting up a database connection in Node.js

Start by creating a new database in your MySQL environment named

npm i nodemon --save

2. After that, build a

npm i nodemon --save

3 table with the ID, name, email, and password. Set the ID to

npm i nodemon --save

4 and

npm i nodemon --save

5, and the name, email, and password to

npm i nodemon --save

In the end, the database in

npm i nodemon --save

7 will look like this:

Then, create an

npm i nodemon --save

8 file in your app’s root folder. Inside

npm i nodemon --save

8, add your database name, host domain, username, and password values to their corresponding variable names. These are the default values for MySQL:

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

Once you’ve set the variables, create

"start": "nodemon app.js"

0 in the root folder. Open it with your text editor and import the following dependencies:

const express = require('express');
const mysql = require("mysql")
const dotenv = require('dotenv')

Then, create an Express app:

const app = express();

After that, specify the path to the environmental variables:

dotenv.config({ path: './.env'})

Here, we’re telling the server to find

npm i nodemon --save

8 inside the same directory as

"start": "nodemon app.js"

Next, access the variables from

"start": "nodemon app.js"

3 and pass them to their respective connection properties:

const db = mysql.createConnection({
    host: process.env.DATABASE_HOST,
    user: process.env.DATABASE_USER,
    password: process.env.DATABASE_PASSWORD,
    database: process.env.DATABASE
})

Now that you have configured the connection with your database credentials, connect the database:

cd path/to/your/folder

The connection will either succeed or fail. If it fails, we’ll see

"start": "nodemon app.js"

4 in the callback, and we’ll print it on the console. Otherwise, we output the

"start": "nodemon app.js"

5 string.

Finally, start the server by running the following command on your terminal:

cd path/to/your/folder

If everything goes well, you’ll see

"start": "nodemon app.js"

6. Let’s create the homepage.

Setting up the homepage

Inside your project’s root folder, create the

"start": "nodemon app.js"

7 folder. Then, in

"start": "nodemon app.js"

7, create

"start": "nodemon app.js"

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

0, and

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

1. As you may have guessed, these are the Handlebars files for the home, login, and register pages.

Now, for each of them, include the base HTML markup:

cd path/to/your/folder

Here, we linked the two

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

2 elements to our custom

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

3 and the Bootstrap CSS library. We also created a navigation menu that will be reused across all pages to include links to the login and register pages.

Over 200k developers use LogRocket to create better digital experiences

Learn more →

Next, inside

"start": "nodemon app.js"

9, use the following markup within the

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

5 tags to add a jumbotron to your website’s homepage:

cd path/to/your/folder

Then, specify the

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

6 as Handlebars in

"start": "nodemon app.js"

cd path/to/your/folder

From there, import

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

8 to specify the static assets used in your Handlebars templates:

cd path/to/your/folder

Next, register a route for rendering

"start": "nodemon app.js"

9 on the homepage:

cd path/to/your/folder

Finally, configure the port for the app in

const express = require('express');
const mysql = require("mysql")
const dotenv = require('dotenv')

cd path/to/your/folder

Start your server by running

const express = require('express');
const mysql = require("mysql")
const dotenv = require('dotenv')

1, then navigate to

const express = require('express');
const mysql = require("mysql")
const dotenv = require('dotenv')

2 to view the homepage:

Next, we’ll create the register and login forms.

Open

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

0 in

"start": "nodemon app.js"

7 and include the following markup within

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

5 and after

const express = require('express');
const mysql = require("mysql")
const dotenv = require('dotenv')

cd path/to/your/folder

We’ll create an HTML Form with inputs for the user’s name, email, password, and password confirmation. The form will post the data to the route we specified in

const express = require('express');
const mysql = require("mysql")
const dotenv = require('dotenv')

Next, in

"start": "nodemon app.js"

0, register the route to the register page and save the file:

cd path/to/your/folder

After that, navigate to your browser and select register in the navigation bar. You should see the registration form:

To create the login form, open

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

1 inside

"start": "nodemon app.js"

7 and use the same form as above. Delete

const app = express();

1 and

const app = express();

2 for the email and password confirmation. In addition, change

const app = express();

3 attributes and the card title from Register Form to Login Form.

Next, register the login route in

"start": "nodemon app.js"

npm i express mysql dotenv hbs bcryptjs

Save the files and go to the browser. It should appear like this when you select Login on the navigation bar:

Now that we’ve finished the work on the front end, let’s shift our focus to registering the user in the backend.

Registering the user

The form values will be sent to the

const app = express();

5 route when the registration form is submitted. Let’s build it!

"start": "nodemon app.js"

0, begin by importing

const app = express();

npm i express mysql dotenv hbs bcryptjs

Next, configure the Express server to receive the form values as

const app = express();

npm i express mysql dotenv hbs bcryptjs

Then, create

const app = express();

9 and retrieve the user’s form values:

npm i express mysql dotenv hbs bcryptjs

Now that you have the values, query the database to check if the email is on the server. That way, a user cannot register multiple times with the same email:

npm i express mysql dotenv hbs bcryptjs

If there is an error while executing the query, we’ll access

"start": "nodemon app.js"

4 and display it on the server’s terminal:

npm i express mysql dotenv hbs bcryptjs

Next, check if there is a result and if the two passwords are a match. If any conditions are true, re-render the register page to notify the user the email is already in use or that the passwords don’t match:

npm i express mysql dotenv hbs bcryptjs

If the conditions above are not true, the user will be added to the database. Encrypt the password and post it to the database along with the other values:

npm i express mysql dotenv hbs bcryptjs

If there is an error, we’ll print it on the console. Otherwise, re-render the page and send a message to the user that they are registered.

It’s important to note that to show the user messages, you’ll need to edit

DATABASE = login-db
DATABASE_HOST = localhost
DATABASE_ROOT = root
DATABASE_PASSWORD =

0 and include the following template below

dotenv.config({ path: './.env'})

npm i express mysql dotenv hbs bcryptjs

Finally, save all file changes and test the app on your browser:

Conclusion

I hope you had as much fun following this tutorial as I did creating it. Feel free to fork the from the GitHub repository and play with the code. After all, getting your hands dirty is the best way to learn.

If you have questions, comment below!

200’s only Monitor failed and slow network requests in production

Deploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third party services are successful, try LogRocket.

https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.

How to Make a Website With User Accounts and Profiles.

Navigate to settings and set up or enable user registration..

Alternatively, install and configure a membership plugin..

Create a registration form..

Create a login page..

Create an edit profile page..

Step 1- Create a HTML PHP Login Form. To create a login form, follow the steps mentioned below: ... .

Step 2: Create a CSS Code for Website Design. ... .

Step 3: Create a Database Table Using MySQL. ... .

Step 4: Open a Connection to a MySQL Database. ... .

Step 5 - Create a Logout Session. ... .

Step 6 - Create a Code for the Home Page..