Learn to Code via Tutorials on Repl.it!

← Back to all posts
How To Make A Simple Login And Sign Up System!
GameDev46 (49)

How To Make A Simple Login And Sign Up System!

So ages ago I wanted to make a working login and sign up system, but had no idea where to start! So I looked for some tutorials, but there were no really direct ones, only ones saying that it is really complicated! But here I am going to tech you directly how to make a simple login and sign up system which is stores on a webserver!

Starting up our server!

So for the server create a new Node.js server. No lets install some Node.js extensions for our server so it is ready to recieve requests!

const url = require('url');
const Database = require('@replit/database');
const express = require('express');
const app = express();
const db = new Database();

In this code we have installed everything we will need to actually get the server up and running!

Receiving and responding to requests!

So now we need to setup our code to be able to listen for certain URLs and respond to them with he correct information!

app.use((req, res, next) => {
	res.append('Access-Control-Allow-Origin', '*');
	res.append('Access-Control-Allow-Headers', 'Content-Type');
	res.set('Access-Control-Expose-Headers', '*');
	next();
});

app.get('/', (req, res) => {
	res.send('Server');
});

// Check whether the users pass and username our correct

app.get('/api/logins/check', (req, res) => {
	var q = url.parse(req.url, true);
	var urlquest = q.query;

	var usersNameOnWeb = urlquest.user;
	var usersPassword = urlquest.pass;

	db.get('users').then(value => {

                if (value == "" || value == null) {
                   value = "User123||pass||"
                }

		var userData = value.split('||');

		for (var i = 0; i < userData.length; i++) {
			if (userData[i] == usersNameOnWeb) {
				if (usersPassword == userData[i + 1]) {
					res.json('Success');
					return res.end();
				} else {
					res.json('Access denied!');
					return res.end();
				}
			}
		}

		res.json('Access denied');
		return res.end();
	});
});

// Add a user when this url is put in

app.get('/api/logins/add', (req, res) => {
	var q = url.parse(req.url, true);
	var urlquest = q.query;

	var usersNameOnWeb = urlquest.user;
	var usersPassword = urlquest.pass;

	if (usersNameOnWeb == null || usersPassword == null) {
		res.json('Denied');
		return res.end();
	}

	if (usersNameOnWeb.includes('|', 0)) {
		res.json('Denied');
		return res.end();
	}

	console.log('request recieved');

	db.get('users').then(value => {

                if (value == "" || value == null) {
                   value = "User123||pass||"
                }
		var userData = value.split('||');

		for (var i = 0; i < userData.length; i += 3) {
			if (userData[i] == usersNameOnWeb) {
				console.log('username found');

				res.json('Denied');
				return res.end();
			}
		}

		// Add the user

		res.json('Accepted');
		res.end();

		var combinedText = '';

		db.get('users').then(value => {
			combinedText = value;

			combinedText =
				combinedText +
				usersNameOnWeb +
				'||' +
				usersPassword +
				'||' +
				'default||';

			db.set('users', combinedText).then(() => {});
		});
	});
});

The code we have just put in will now add and check login details from a replit database! Now all we have to do is get a personal HTTP for our server, which is simply done by adding this to the bottom of your code:

const portOfServer = process.env.port || 3000;
app.listen(portOfServer, () =>
	console.log(`listening on port ${portOfServer}...`)
);

And click run and wait for the packages to install (It can take a few minutes) and then you should now have a web page saying "Server"!

Making requests from your project

This next bit of code would be done from a HTML, CSS and JS repl which would be separate to your node.ha server!

To communicate from the server you can use fetch requests, for example to check a users name and password the you would do:

var urlToGet = 'http://yourURL.repl.co/api/logins/check?user=' + usersName + '&pass=' + usersPassword;

fetch(urlToGet)
.then(response => {
  return response.json();
})
.then(data => {
  if (data == "Success") {
    // User has logged in
  }
  else {
     alert("Account already exists");
  }
})

and as for adding an account you pretty much do the same thing:

var urlToGet = 'http://yourURL.repl.co/api/logins/add?user=' + usersName + '&pass=' + usersPassword;

fetch(urlToGet)
.then(response => {
  return response.json();
})
.then(data => {
  if (data == "Accepted") {
    // User has signed up
  }
  else {
     alert("Account already exists");
  }
})

Find any errors in this?

If you have found any errors or are unsure of anything comment down below and I will be with you as soon as I can!

Remember to upvote if you like!!

Hope you have fun with this simple login and sign up tutorial!

Comments
hotnewtop
ThatGhost (4)

when adding users and logging in users, you use a fetch variable that does not exist in your website's project, do i have to add a package? what is the deal?

ThatGhost (4)

@ThatGhost nevermind i saw that it was a default variable

DynamicSquid (5029)

Nice! Quick question though, in your second apt.get thingy, what does this do:

	var q = url.parse(req.url, true);
	var urlquest = q.query;
GameDev46 (49)

@DynamicSquid It gets the url of the server and gets it ready for you to ask for everything after the ? at the end. Such as http://example.com/api/users?user=Test123

So you would be able to get the user variable from the url, which is equal to Test123