DEV Community: satriaherman

Never Put Sensitive Data in Your JWT Payload

satriaherman — Fri, 14 Nov 2025 03:34:36 +0000

Overview

Do you use JWT for your Authentication?. What the data do you store in the JWT payload?. some non-sensitive data like user_id or sensitive data like password?. If you storing sensitive data in your JWT Payload you should stop it from now.

In this article i will give you the reason why you shouldn't store sensitive data in your JWT payload

What is JSON Web Token?

Json Web Token(JWT) is an open standard used for transmitting data between applications in JSON format. JWT is digitally signed in the backend app, so the data cannot be modified by other parties.

JWT Structure

by default, JWT structure consists 3 part. Header, Payload dan Signature. Every part is separated by dot symbols (.). So, it will looks like

header.payload.signature

And Here's the example of JSON Web Token

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNzA4MzQ1MTIzLCJleHAiOjE3MDgzNTUxMjN9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Header

Header is containing information the type of token and signing algorithm which is encoded in base64.

when you go to base64-decode and decode this header

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

it will showing

{"alg":"HS256","typ":"JWT"}

Payload

Basically Payload is the data that you want to send or people call it claims. claims is divided into 2 type public claims and private claims

Registered Claims

registered claims is type of claims that already registered by jwt.io which recognized as a global standard. the example of registered claims are:

iss
sub
aud
exp
nbf
iat
jti

to see full registered claims, you can visit this link

Public Claims

Public Claims is common claims that created by developer. this claims is usually used by most developers. Developers recommended to register this claims to IANA JWT registry to avoid the collision between claims that has same meaning

Private Claims

Private Claims is custom claims which used by developer to share information between parties and already agree by each parties. This Claims usually used to share information that not included in registered claims and public claims

Now, try to decode the payload on base64-decode

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNzA4MzQ1MTIzLCJleHAiOjE3MDgzNTUxMjN9

And this is what you got

{"sub":"1234567890","name":"John Doe","iat":1708345123,"exp":1708355123}

Looks, the data can be decoded easily!!!. This is the reason why you you should not storing sensitive data in your JWT Payload

Signature

Signature is used to Verify if the data is coming from valid parties. This is what makes JWT is secure. let me explain

Signature is containing encoded header, the encoded payload and a secret. they are signed using algorithm that defined in header.

For example, we are using HMACSHA256 algorithm to sign the signature. The system will created the signature like this

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

When we send jwt token to backend, the backend will verify if the token has valid signature. with this concept, the hacker cannot abuse the system by modifying the payload. without secret key the hacker cannot generate the valid signature

Conclusion

Payload in JWT can be decoded and accessible for public. so, be aware with the data that you sent in payload.

Hacker cannot generate valid signature without secret key. Make sure your secret key is safe

How Race Conditions Can Break Your System?

satriaherman — Thu, 06 Nov 2025 04:47:02 +0000

Overview

Singleton, is a one of most popular design pattern. The main purpose is to saving memory by reuse and sharing one instance rather than create a new one. It sounds like a great concept, but it could be a "Boomerang" if we implement that concept in the wrong case.

Helo, i am Satria. Currently i'm working on Tech Company as a Software Engineer. In this article i will share about my experience in implementing Singleton Design Pattern in the wrong case. So, let's go.

Problem Started

The Incident is started when i created an application to manage the budgeting system in our company. It is using PostgreSQL as a Database Management System. The application that i built is a part of Company's Super App.

When I looked at the code in the Super App, i notice that everytime when we need to query to database, we always use the same database connection and database session that declared as a global variable. here's the sample code

embed engine = create_engine(url)
Session = sessionmaker(bind=engine)
db = Session()

Everytime we need to querying to database, we always use db variable. For the first time, i thought

Hmm, This is good. we can reduce the memory usage

Everything going well when i test and debug the application by myself. But the problem occuring when i entering the UAT Process. A lot of issues coming from users in day 1,and 60% of issues is about Inconsistency Data. on the next day the same issue is still coming. and Users put the comment like this

Why my proposal data is not found?, Why my proposal data is different than i created before, why the approval process is stuck?

Resolving The Problem

At First i thought that the problem is coming from relationship between the table. So, i double-checked on the model and database schema. But, i found no problem with that. i also check the query to database, and still didn't find the problem, the query is fine.

I tried all flow of the application again, and still didn't find t the problem. I’m really stressed out by this issue, I spent 3 days just trying to find the problem. On day 3, i remember that my application is using same database session for all query. And when i check on entry point file, our app is using 4 worker and every worker can running up to 50 threads. That's caused the race condition because one database session is used by more than one Thread. So, i tried to refactor my code and create new database session in every function.

def create_proposal():
  db_session = Session()
  try{
   ....
  except:
   db_session.rollback()
  finally:
   db_session.close()

After i refactoring the code like above, The related issue is gone. And my application is ready to serve on Production.

Conclusion

Singleton is a good concept to reduce memory usage. but not all type of instances is good to use singleton. In this case, database connection is suitable to use Singleton, because the data doesn't change everytime it's used. But implementing a Singleton for a database session is a bad practice, because a database session can change every time it is used.

Manipulasi DOM Di Reactjs

satriaherman — Thu, 11 Nov 2021 07:49:49 +0000

Halo semua, apa kabar nih?. Semoga kabarnya baik-baik saja. Kali ini gw akan membahas tentang "gimana caranya manipulasi DOM di Reactjs?".

Pendahuluan

Sebelumnya gw mau kasih tau kalo React menggunakan Virtual DOM dalam memanipulasi element HTML nya. Nah sih virtual DOM itu?. Virtual DOM adalah sebuah copy dari DOM yang memiliki property yang sama seperti DOM aslinya. Singkatnya gini jika kita membuat sebuah component dengan nama "Button" di React, maka React akan merender Component Button tersebut kedalam element HTML dan juga membuat Copy dari Element Button itu. nah copy dari element Button ini lah yang disebut "Virtual DOM". Nah pasti ada yang nanya?.

"Bang kenapa harus buat copy element itu dulu?, kan udah ada element yang di render?

Nah ini adalah cara react untuk meminimalisir interaksi antar DOM yang tidak perlu. Misal jika kita punya 10 element list. dan kita ingin mengupdate list yang ketiga saja. Maka browser akan mengupdate semua list yang ada. ini akan berdampak pada performa website kita, karena kita mengupdate DOM yang sebenarnya tidak diperlukan. Untuk inilah Virtual DOM hadir sebagai penyelesaian dari masalah ini. Dengan Virtual DOM kita akan meminimalisir terjadinya interaksi antar DOM yang tidak perlu. Virtual DOM akan mengecek perubahan yang ada lalu melakukan update pada DOM yang berubah saja. Sehingga component lain yang tidak dirubah tidak akan diupdate dan dirender ulang.

ilustrasi Virtual DOM

Memanipulasi Virtual DOM

Nah untuk memanipulasi Virtual DOM di Reactjs kita bisa memakai 2 cara yaitu :

Menggunakan State
Menggunakan Ref

kedua cara diatas akan kita praktekkan dalam kesempatan kali ini

1 Menggunakan State

Untuk manipulasi Virtual DOM menggunakan state ini hanya bisa memanipulasi properti sederhana seperti mengganti class dan id.

contoh :

di app.js kita inisialisasikan dulu state nya

const [background, setBackground] = useState('red')

lalu kita buat component button yang akan mentrigger perubahan state nya

return (
    <div className="App">
      <button className={background} onClick={changeBackground}>
        change Background
      </button>
    </div>
  )

setelah itu kita buat function changeBackground untuk menghandle button ketika di klik

const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
    }
    else{
      setBackground('red')
    }
  }

lalu di app.css kita buat style untuk class nya

red{
  background: red;
}

.blue{
  background: rgb(99, 99, 255);
}

hasilnya akan seperti dibawah

1 Menggunakan Ref

Cara yang kedua adalah menggunakan ref atau singkatan dari reference. ref ini adalah sebuah referensi yang mengarah ke element HTML pada react.

Jika kita ingin memanipulasi element Virtual DOM maka kita tidak langsung memanipulasi elementnya, tapi yang kita manipulasi adalah ref dari element tersebut. Oke langsung saja kita praktekkan

definisikan sebuah ref menggunakan useRef jika menggunakan class component pakai createRef

const buttonRef = useRef();

lalu letakkan buttonRef diatas ke element yang ingin kita beri referensi

 <button className={background} ref={buttonRef} onClick={changeBackground}>
        change Background
</button>

(masih menggunakan kodingan yang tadi ya). nah setelah itu di function changeBackground() kita coba memodifikasi element buttonnya menggunakan ref. sebagai contoh saya akan mengubah textContent dari button ketika di click. jadi saya tuliskan seperti ini

const changeBackground = () => {
    if(background === 'red'){
      setBackground('blue')
      buttonRef.current.textContent = 'Berubah biru'
    }
    else{
      setBackground('red')
      buttonRef.current.textContent = 'Berubah Merah'
    }
  }

nah hasilnya jika kita mengklik button maka background dan tulisan dalam button akan berubah

Sekian dulu Tutorial dari saya. Jika ada salah kata mohon dimaafkan. Jika ada pertanyaan silahkan hubungi
Whatsapp Instagram

Wassalamu'alaikum Warahmatullahi Wabarakatuh

Reactjs Overview - (EchLus Community - Part 1)

satriaherman — Thu, 11 Nov 2021 07:17:39 +0000

Halo kawan - kawan kali ini saya akan sharing materi tentang "Reactjs Overview". ini merupakan seri sharing session batch tentang Reactjs.

Overview Materi

Di batch ini kita akan belajar tentang

Install and Setup Reactjs
Basic Props and State
React Hooks
React State Management
Communicating With Server
Esbuild

1. Install dan Setup Reactjs

Pada proses instalasi kita bisa melihatnya di Sini. untuk instalasinya sebenarnya ada dua cara. yakni dengan menggunakan CDN. atau dengan menggunakann Create React App(CRA).

Untuk kesempatan kali ini saya akan menginstall React menggunakan CRA. oke langsung saja ke tutorial.

Buka Terminal atau CMD. lalu jalankan npx i create-react-app belajar_react . npx sendiri kepanjangan dari node package execute. yang mana jika dijalankan maka akan mengeksekusi package yang sudah maupun belum kita install. dengan menggunakan npx kita tidak perlu menginstall CRA ke dalam local computer kita.

D:\programming\belajar Javascript\react>npx create-react-app belajar_react

Creating a new React app in D:\programming\belajar Javascript\react\belajar_react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

[  ................] - fetchMetadata: sill resolveWithNewModule scheduler@0.20.2 checking installable stat

tunggu prosesnya sampai selesai

jika sudah selesai ketik perintah cd belajar_react. lalu ketik perintah code . agar membuka project kita di Visual Studio.