Skip to content
← Back to Community
How To Make A Simple Login And Sign Up System!
Profile icon
GameDev46

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!

Voters
Profile icon
MJHOOOOOOOOOL
Profile icon
Thebeston123YT
Profile icon
NicolasColucci
Profile icon
lukVn
Profile icon
theduck2010
Profile icon
ThatGhost
Profile icon
DynamicSquid
Profile icon
GameDev46
Comments
hotnewtop
Profile icon
TheCodingMug

How do i delete a user?

Profile icon
ThatGhost

can you make an updated tutorial but with password encryption, or can ya send the npm package you used to encrypt passwords on chit-chat

Profile icon
ThatGhost

also, how do you send replies back to the website?

Profile icon
GameDev46

@ThatGhost I use bcrypt to hash the passwords:

Const bcrypt = require(“bcrypt”); // hash the password bcrypt.hash(pass, 10, function (error, hash) { // Save the hash to the database and not the password }); // compare the password to the hash bcrypt.compare(password, encryptedPassword, function (err, result) { // if result is true then the password is correct })
Profile icon
GameDev46

@ThatGhost if you use the node.is res.send(); you can send whatever you want to for the fetch code to then display as the data

Profile icon
nff50

@ThatGhost i just used the js-sha512 package, its really easy to use it.

const sha512 = require("js-sha512") sha512('Message to hash'); sha384('Message to hash'); sha512_256('Message to hash'); sha512_224('Message to hash'); // Support ArrayBuffer output var arrayBuffer = sha512.arrayBuffer('Message to hash'); // Support Array output var bytes = sha512.digest('Message to hash'); var bytes = sha512.array('Message to hash'); // update hash var hash = sha512.update('Message to hash'); hash.update('Message2 to hash'); hash.hex(); // or to use create var hash = sha512.create(); hash.update('Message to hash'); hash.hex(); // clone var hash = sha512.update('Message to hash'); var hash2 = hash.clone(); hash2.hex(); hash.update('Message2 to hash'); hash.hex(); // HMAC sha512.hmac('key', 'Message to hash'); sha384.hmac('key', 'Message to hash'); var hash = sha512.hmac.create('key'); hash.update('Message to hash'); hash.hex(); var hash2 = sha512.hmac.update('key', 'Message to hash'); hash2.update('Message2 to hash'); hash2.array();
Profile icon
DynamicSquid

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;
Profile icon
GameDev46

@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

Profile icon
DynamicSquid

@GameDev46 Ah okay, cool!