Forem: Luthfi Khusyasy

Simple auth system using JWT

Luthfi Khusyasy — Tue, 09 Aug 2022 04:23:00 +0000

Continuation of the last post, I will try to implement auth system by using JWT (Json Web Token) for my Multiplayer TicTacToe game.

Live Website
Source Code

What is JWT

JWT is an authorization token created from the backend, passed to the frontend and then the frontend can send this token alongside requests to access protected API routes, it is to make sure that the request from user X is indeed made by user X itself. Usually JWT token is created with expiration time.

There is a downside here for using JWT, every token that was created and not yet expired can still be used for accessing the protected API routes. Which is usually not what you wanted.

Little disclaimer here: I think JWT itself is actually very simple, but implementing it the right way is the hard part, so if you know a better way or have a correction, please let me know! thanks.

JWT Revoke Method

So to invalidate and limit the access of the token, from what I have found is mainly 2 methods:

Blacklist/Whitelist the token.
Use per user secret key for the token.

To be honest I still don't know the pros/cons of those methods, but I'm going to use the second one.

Creating User Personal Key

note: all of the examples shown are simplified version

const bcrypt = require('bcrypt');

function generatePersonalKey() {
  return bcrypt.genSaltSync(10);
}

First the personal key, we need to create a function to generate the keys, like random strings, numbers, or anything. But here I created generatePersonalKey() by using the bcrypt packages to create a random salt.

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  username: String,
  password: String,
  personalKey: String,
});

And for example my UserSchema (mongoose), we just initialize the personalKey when the user is created. And when user logged out we just regenerate the personalKey, this way the tokens before will always be invalid because they used the different key.

Creating JWT

const jwt = require('jsonwebtoken');

const payload = { username: 'khusyasy' };
const token =
  jwt.sign(payload, user.personalKey, {
    expiresIn: '1h',
  });

To create the token itself I used jsonwebtoken packages. It is actually very simple like the example above. After that we set the response cookies with the flag httpOnly so the token cannot be set/get by using javascript on the browser.

Checking Authorization

When I first read about this I'm very confused, how do you know which key to use, if you can't even read the token?

Well it turns out we can... just by using decode to read the payload and getting the user personalKey, and then using the personalKey to verify the token itself. For example:

const payload = jwt.decode(token);

const user = await User.findOne({ username: payload.username });

try {
  const verified = jwt.verify(token, user.personalKey);
  // token is verified
} catch (err) {
  // token is invalid
}

That is all for today, thank you for reading!

packages used:

Flame Chat, a Chat App built using Firebase

Luthfi Khusyasy — Mon, 08 Aug 2022 07:46:00 +0000

Personal chat app built using React and Firebase!.

Live Website
Source Code

note: this is an old post (22 June 2021) from my website, posting for archiving purposes

Features

Person to person private chat.
Register and Login using Google Auth.

Objectives

Firebase is a BaaS (Backend as a Service) owned by Google that can help developers quickly develop apps. By using firebase for backend service, I can focus more on the looks and experience or known as UI/UX of the apps. I wanted to learn more about firebase, so I decided to create a Personal Chat App.

The goal of this project is:

Setup Firebase and Firestore.
Create UI/UX using React.
Connect Firebase with React.

1. Setup Firebase and Firestore.

Because this is the first time I used Firebase, I have to learn it first. Searching through Youtube and reading the documentation.

The process of creating a Firebase project is actually really simple (thanks Google), it took only a couple hours for me.

2. Create UI/UX using React.

I decided to try out React Bootstrap, it is just Bootstrap but for React. I am actually a little bit familiar with Bootstrap. This should be easy for me.

I also decided to use React Context for managing some of the state like user auth and messages. That is to prevent passing props too many layers down the children element.

3. Connect React with Firestore.

This part is basically just using React with API that is provided by Firestore. Firestore handles all CRUD function. Firestore is a NoSQl database more or less like MongoDB.

Techonologies used

React JS
React Context
React Bootstrap
Firebase
Firestore
Google Auth

Creating a Quiz Game, Koding Kuiz

Luthfi Khusyasy — Mon, 08 Aug 2022 07:40:00 +0000

A quiz game about programming, coding, and related stuff. You can test your knowledge about the subject while having fun!.

Live Website
Source Code

note: this is an old post (09 May 2021) from my website, posting for archiving purposes

Features

Quiz game with multiple categories and difficulties.
Scoring system.
Leaderboard system.
GitHub OAuth integration.

Objectives

I always wanted to create a quiz game about the stuff that i loved, that is tech and programming, and then the player can see how they rank among the other players.

So to sum it up, the goal of this project is:

Create a quiz game.
Create an account system.
Create a leaderboard system.

1. Create a quiz game.

Firstly, I make a quick quiz game prototype using a framework that I'm currently learning (Vue JS), and this prototype is gonna be the very basic requirement for my quiz game, so I can visualize what would be needed for the quiz game.

I actually wanted to create my own API for the questions, but after a while I decided to use a public API, and I found QuizApi, and I have to modify the prototype for a bit so the structure of the quiz is compatible.

I also decided to keep using Vue JS for this project.

2. Create an account system.

I'm using GitHub OAuth to save time and my sanity, because by using that, I don't have to deal much about account management and security, GitHub already do that better than me.

I actually never used GitHub OAuth or any Auth API before, so this is some kind of an amazing new learning experience.

3. Create a leaderboard system.

I created a Express JS server and configure MongoDB, and all the usual server configuration stuff, this step is pretty straight forward, that is creating an backend for database CRUD and creating API endpoint like what I usually do.

Techonologies used

MongoDB
Express JS
Vue JS
Vuex
Node JS
JWT
GitHub OAuth

Making a Link Shortener

Luthfi Khusyasy — Mon, 08 Aug 2022 07:34:00 +0000

This is a website where you can shorten your link, and make it easier to share with your friends.

Live Website
Source Code

note: this is an old post (07 March 2021) from my website, posting for archiving purposes

Features

Register and Login to your account.
Shorten your link in just 1 click.
View how many times your link has been clicked.

Objectives

I wanted to learn the MERN Stack, so i have to combine what i have learned about React JS and Express JS, i also learn how to do CRUD with MongoDB databases using Mongoose, and using JWT for authentication.

Techonologies used

MongoDB
Mongoose
Express JS
React JS
React Router
Node JS
JWT

Multiplayer TicTacToe With Websockets

Luthfi Khusyasy — Mon, 08 Aug 2022 06:12:00 +0000

Recently I'm trying to learn about websockets and I decided why not create a Multiplayer TicTacToe game using websocket.

Live Website
Source Code

note: this is an old post (30 May 2022) from my website, posting for archiving purposes

Objectives

Learning more about websockets and how to implement them in a realtime game application. Basically websockets are a way to connect to a server for back and forth communication, this is very useful for realtime applications especially in multiplayer games. Also often used in client side websites.

The goal of this project is:

Create format for websockets.
Implement the server.
Create the game using Vue.

1. Create format for websockets.

Because I am new to websockets, I am trying to understand the format that will be used to communicate with the server, and to be honest I don't find many resources talking about this, so I am going to try to create my own format.

{
  "type": <type of message>,
  "data": {
    <any data that is needed>
  }
}

From the type of message, the data will be used to determine what the server or client should do. For example, if the type is "move", the data will be used to determine which player moved, and where.

{
  "type": "move",
  "data": {
    "user": <user data>,
    "x": <row number>,
    "y": <col number>
  }
}

The message above means that the user has moved to row number x and column number y.

2. Implement the server.

I used express to create the server, and I used express-ws to create the websocket so that I can easily use websockets just like other HTTP requests endpoint in express, as an simple example, the following code is used to create the websocket server.

const express = require('express');
const app = express();
const ws = require('express-ws')(app);

app.ws('/', (ws, req) => {
  ws.on('message', (msg) => {
    const { type, data } = JSON.parse(msg);
    if (type === 'move') {
      // do something with data
    }
  });
});

But for storing Users and Rooms in the server, I used an array... for now. I think it's okay, because I only make this for learning purposes. If I ever need to store more data, I can easily extend this project to use database.

3. Create the game using Vue.

This part is basically creating a TicTacToe game but using Vue. I tried to use a new ui library called Naive UI, I think it looks nice, but I don't know if it's the best way to use the library.