Skip to content
Sign upLog in

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!

You are viewing a single comment. View All
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();