Forem: Jahongir Sobirov

How to send OTP codes with WhatsApp using Node.js

Jahongir Sobirov — Mon, 16 Feb 2026 17:42:35 +0000

For sending OTP (One-Time Password) codes to clients with WhatsApp using Node.js pretty simple! For that we need only one library which is named auth-verify

npm install auth-verify

Initialize `auth-verify`

We need to configure our WhatsApp phone number for sending OTP codes.

const AuthVerify = require("auth-verify");
const auth = new AuthVerify();

// configuring whatsapp
auth.otp.sender({
   via: "whatsapp",
   phoneId: "YOUR_PHONE_ID",
   token: "YOUR_WHATSAPP_TOKEN"
});

Sending OTP codes to the users

For sending you need to only send() method from auth-verify:

auth.otp.send("RECIEVER_PHONE", {text: `Your OTP code is ${auth.otp.code}`}, (err, info)=> {
    if(err) console.log(err);
    else console.log(info);
});

Verfiying the OTP code

For verifying it you should use verify() method:

auth.otp.verify("RECIEVER_PHONE", "123456", (err, success) => {
    if(err) console.error(err.message);
    else console.log("✅ OTP verified");
});

Full codes

const AuthVerify = require("auth-verify");
const auth = new AuthVerify();

// configuring whatsapp
auth.otp.sender({
   via: "whatsapp",
   phoneId: "YOUR_PHONE_ID",
   token: "YOUR_WHATSAPP_TOKEN"
});

auth.otp.send("RECIEVER_PHONE", {text: `Your OTP code is ${auth.otp.code}`}, (err, info)=> {
    if(err) console.log(err);
    else console.log(info);
});

auth.otp.verify("RECIEVER_PHONE", "123456", (err, success) => {
    if(err) console.error(err.message);
    else console.log("✅ OTP verified");
});

How to use API based providers for sending OTP in Node.js

Jahongir Sobirov — Tue, 03 Feb 2026 08:16:38 +0000

For using API based providers you should have API key or API secret. And in this post I'll show you how to use Resend API provider for sending OTP codes to clients. For this we need only single library which named auth-verify. You can install it from NPM

npm install auth-verify

Setup

Firt of all we should configure API provider to our app:

const AuthVerify = require('auth-verify');
const auth = new AuthVerify();

// configure the otp sender
auth.otp.sender({
   via: 'email',
   service: 'api',
   apiService: 'resend', 
   apiKey: 'YOUR_API_KEY_HERE'
});

You can use also Mailgun, Sendgrid. Just change the apiService

Sending the OTP code

For sending OTP code to the client we'll use send() method.

await auth.otp.send("johndoe@example.com", {
   otpLen: 5, // length of otp codes (default: 6)
   subject: "Account verification",
   text: `Your OTP code is ${auth.otp.code}`
});

Verify the OTP code

For verifying OTP code which is provided by client we'll use verify() method.

const valid = await auth.otp.verify("johndoe@example.com", "12345");
if(valid) console.log('User verified!');
else console.log('Invalid code!');

How to hash passwords before saving it on database in Node.js

Jahongir Sobirov — Thu, 29 Jan 2026 18:16:54 +0000

Hashing password plays crucial role on security of systems and networks. So in this post we'll learn how to hash passwords before saving it on database using Node.js. For this we need a authentication library named auth-verify

npm install auth-verify

Making the configuration

For hashing the password we should make correct configuration:

const AuthVerify = require('auth-verify');
const auth = new AuthVerfiy({
  hashAlg: 'pbkdf2', // or 'scrypt'
  iterations: 100000,
  keyLen: 64
});

`🔐 hashAlg: 'pbkdf2'`

This chooses the hashing algorithm.

`pbkdf2`

Stands for Password-Based Key Derivation Function 2
Built into Node.js crypto
Designed specifically for passwords
Uses:
- password
- salt
- iterations (many rounds)
  - ✔️ Secure
✔️ Battle-tested
✔️ Slower on purpose (good against brute-force)

`scrypt` (alternative)

Even more memory-hard
Stronger against GPU attacks
Slightly heavier on the server

👉 Rule of thumb:

pbkdf2 → safe, standard, widely used
scrypt → stronger, modern, more expensive

🔁 `iterations: 100000`

This is how many times the hash function runs.
Think of it like this:

Instead of hashing once, hash 100,000 times

Why?

Makes attacks VERY slow
If an attacker tries millions of passwords → 💀 CPU melts Example:
1 iteration → ⚠️ weak
10,000 → okay
100,000 → good (production-level)
✔️ More iterations = more security
❌ Too many = slower login

👉 100_000 is a great balance

🔑 `keyLen: 64`

This is the length of the final hash (in bytes).

64 bytes = 512 bits
Longer hash = harder to crack
Stored in DB as hex/base64

Example:

password → pbkdf2 → 64-byte hash

✔️ 32 bytes → ok
✔️ 64 bytes → strong

Hashing the password

auth.crypto.hash("myPassword123", (err, result)=> {
  if(err) console.log(err);
  console.log(result);
});

Verifying the password

auth.crypto.verify("secret123", result, (err, valid)=> {
   if(err) console.log(err);
   console.log(valid) // true
});

Full example

const AuthVerify = require('auth-verify');
const auth = new AuthVerfiy({
  hashAlg: 'pbkdf2', // or 'scrypt'
  iterations: 100000,
  keyLen: 64
});

auth.crypto.hash("myPassword123", (err, result)=> {
  if(err) console.log(err);
  console.log(result);
  auth.crypto.verify("secret123", result, (err, valid)=> {
     if(err) console.log(err);
     console.log(valid) // false
  });
});

How to Add GitHub OAuth Login in Node.js (step by step)

Jahongir Sobirov — Thu, 22 Jan 2026 09:25:17 +0000

If you’re building a Node.js app and want users to sign in with GitHub, the auth-verify library makes it simple. It provides built-in helpers for OAuth (including GitHub) alongside features like JWT, OTP, and session management.

🧠 What You’ll Build

A login flow where:

Users click “Sign in with GitHub”
They’re redirected to GitHub to authorize
GitHub sends back a code
Your server uses that code to obtain user info

The result: a logged-in user session inside your app.

🛠️ Step 1 — Prep Your GitHub OAuth App

Before code, register your app with GitHub:

Go to GitHub Developer Settings → OAuth Apps
Create a new OAuth app
Set the Callback URL (example: http://localhost:3000/auth/github/callback)
Copy your Client ID and Client Secret This is standard GitHub OAuth setup using the authorization code flow.

📦 Step 2 — Install Dependencies

In your project folder:

npm install auth-verify express

This gives you the core auth-verify library plus Express for routing.

💻 Step 3 — Basic Server Setup

Create server.js (or similar) with an Express app:

const express = require("express");
const AuthVerify = require("auth-verify");

const app = express();

// ⚡ initialize auth-verify
const auth = new AuthVerify({ storeTokens: "memory" });

// configure GitHub OAuth handler
const github = auth.oauth.github({
  clientId: process.env.GITHUB_CLIENT_ID,
  clientSecret: process.env.GITHUB_CLIENT_SECRET,
  redirectUri: "http://localhost:3000/auth/github/callback"
});

// redirect user to GitHub OAuth page
app.get("/auth/github", (req, res) => {
  github.redirect(res);
});

// handle callback from GitHub
app.get("/auth/github/callback", async (req, res) => {
  try {
    const userData = await github.callback(req);
    // Here you have GitHub profile + tokens
    console.log("GitHub User:", userData);
    // do your own login logic (session/cookie/JWT)
    res.json({ success: true, user: userData });
  } catch (err) {
    console.error("GitHub OAuth error", err);
    res.status(500).json({ error: "OAuth failed" });
  }
});

// start server
app.listen(3000, () =>
  console.log("Server listening on http://localhost:3000")
);

✔️ github.redirect(res) sends the user to GitHub’s authorization page
✔️ github.callback(req) retrieves access token + user details

Note: auth-verify abstracts away the GitHub token exchange and user fetch for you — this simplifies the manual POST to GitHub’s /login/oauth/access_token endpoint.

🔐 Step 4 — Session or JWT

Once you have the GitHub user data:

Create a session
Issue a JWT
Save user data in DB

Example (simplified JWT):

const jwtToken = await auth.jwt.sign({ id: userData.id }, "1h");
res.cookie("token", jwtToken);

Now your app can use the token to protect routes.

✨ Final Notes

🎯 Scopes

When redirecting, you can request additional scopes — e.g., user:email, repo. Just configure that in GitHub app setup or pass to the redirect function.

🛡 Security

Use secure cookies, CSRF checks, state parameters, and HTTPS in production.

📌 auth-verify Advantage

Instead of wiring manual OAuth flows, auth-verify gives you a unified API for different providers (Google, Facebook, GitHub…), JWT, OTP, and session handling.

💬 In Summary

✅ Register your GitHub OAuth app
✅ Install and configure auth-verify
✅ Create Express routes for redirect + callback
✅ Generate your tokens/sessions after successful login

How to create OTP flow system on Node.js (step-by- step)

Jahongir Sobirov — Fri, 16 Jan 2026 13:56:14 +0000

One-Time Passwords (OTP) are everywhere — login verification, sign-up confirmation, 2FA, password resets, etc. In this tutorial, we’ll build a simple and secure OTP authentication flow in Node.js using the auth-verify library.

The auth-verify package helps you generate, send, and verify OTP codes quickly, and supports multiple delivery methods like email, SMS, Telegram, etc. It also includes useful features like cooldowns and JWT integration.

🚀 What You’ll Build

✔ Endpoint to request/send OTP
✔ Endpoint to verify OTP
✔ Basic user model (memory/DB)
✔ Configurable sender (Email/SMS)

📦 Step 1 — Install & Set Up

First create a new Node.js project and install dependencies:

mkdir auth-verify-otp
cd auth-verify-otp
npm init -y
npm install express auth-verify dotenv

Create a .env file to store sensitive config:

PORT=3000
EMAIL_HOST=smtp.gmail.com
EMAIL_USER=me@example.com
EMAIL_PASS=yourEmailPassword
EMAIL_PORT=yourEmailPort

🧠 Tip: For Gmail, generate an App Password (recommended instead of real password).

📧 Step 2 — Configure OTP Sender

Inside index.js set up auth-verify and configure a sender (e.g., email). The OTP manager automatically handles generation, storage, cooldowns, expiration, and more.

require('dotenv').config();
const express = require('express');
const AuthVerify = require('auth-verify');

const app = express();
app.use(express.json());

// Initialize auth-verify
const auth = new AuthVerify();

// Configure email sender
auth.otp.sender({
  via: 'email',
  host: process.env.EMAIL_HOST,
  sender: process.env.EMAIL_USER,
  pass: process.env.EMAIL_PASS,
  port: process.env.EMAIL_PORT
});

📮 Step 3 — OTP Request Route

When a user hits /send-otp, generate an OTP and send it by email.

app.post('/send-otp', async (req, res) => {
  try {
    const { email } = req.body;

    await auth.otp.send(email, {
      otpLen: 5, // length of OTP code
      subject: "Account verification",
      text: `Your OTP code is ${auth.otp.code}`
    })

    return res.json({ message: 'OTP sent!' });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ error: 'Failed to send OTP' });
  }
});

auth.otp.code is generated code for showing to user

🔍 Step 4 — OTP Verification

Create a route to verify the OTP the user enters:

app.post('/verify-otp', async (req, res) => {
  try {
    const { email, code } = req.body;

    const isValid = await auth.otp.verify(email, code)

    if (!isValid) {
      return res.status(400).json({ verified: false, message: 'Invalid or expired OTP' });
    }

    return res.json({ verified: true, message: 'OTP verified successfully!' });
  } catch (err) {
    return res.status(500).json({ error: 'Verification error' });
  }
});

verify() returns true/false so you can easily branch logic.

🔄 Step 5 — Optional: Cooldown & Resend Logic

To prevent spam and brute-forcing, auth-verify supports cooldowns: after sending an OTP, the user must wait a bit before requesting again.

auth.otp.cooldown("30s"); // cooldown before OTP can be resent
auth.otp.resend("user@example.com")

The cooldown logic prevents rapid repeated OTP sends (important for both UX and security).

🧠 What Happened Behind the Scenes

Step	What it Does
OTP Generation	Creates a secure, random numeric code
Setter	Binds OTP to an identifier (email/phone)
Sender	Delivers code via email/SMS
Verifier	Checks submitted code against stored one
Cooldown	Prevents spam & brute force

All this heavy lifting comes built-in with auth-verify, so you don’t have to manually generate tokens, manage expiration, or build cooldown logic yourself.

🏁 Final Thoughts

Building an OTP system from scratch involves a few moving parts — generating tokens, sending them securely, storing/expiring codes, and verifying them. Libraries like auth-verify simplify this process, letting you focus on product logic rather than boilerplate.

Now your signup and login flows can support secure OTP validation in just a handful of routes!

How to use JWT for authentication on Node.js

Jahongir Sobirov — Wed, 14 Jan 2026 16:49:39 +0000

Authentication is one of the most important parts of any modern web application.
One of the most popular solutions today is JWT (JSON Web Token).

🤔 What is JWT?

JWT (JSON Web Token) is a compact, URL-safe token used to securely transmit information between parties.

A JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

It consists of three parts:

HEADER.PAYLOAD.SIGNATURE

🧩 JWT Structure

1️⃣ Header

Contains token type and signing algorithm.

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

2️⃣ Payload

Contains user data (claims).

{
  "id": 42,
  "email": "user@example.com"
}

⚠️ Never store passwords or sensitive data in payload

3️⃣ Signature

Used to verify the token wasn’t modified.

HMACSHA256(base64UrlHeader + "." + base64UrlPayload, secret)

🔄 How JWT Authentication Works

User logs in with email & password
Server verifies credentials
Server generates a JWT
Client stores JWT (usually in memory or cookie)
Client sends JWT in Authorization header
Server verifies JWT on every request

🛠️ Implementing JWT Auth in Node.js (Express)

📦 Install Dependencies

npm install express auth-verify

🔑 Generate (signing) JWT on Login

const AuthVerify = require('auth-verify')
const auth = new AuthVerify({
   jwtSecret: "SUPER_SECRET" // setting secret for jwt
})

// Generating jwt
auth.jwt.sign({userId: 1, user: "John Doe"}, "1h") // 1h expiration time of jwt

🔐 Login Route Example

const express = require('express')
const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

const AuthVerify = require('auth-verify')
const auth = new AuthVerify({ jwtSecret: "SUPER_SECRET" })

app.post('/login', async (req, res)=> {
  const { email, password } = req.body

  const user = await findUserByEmail(email)
  if (!user) return res.status(401).json({ message: 'Invalid credentials' })
  const isValid = await auth.crypto.verify(password, user.password)
  if (!isValid) return res.status(401).json({ message: 'Invalid credentials' })

  const token = await auth.jwt.sign({userId: 1, user: "John Doe"}, "1h")
  res.json({ token })
})

app.listen(3000, ()=> console.log('App is running...'))

🧱 Protecting Routes with JWT Middleware

auth.jwt.protect()

🔒 Protected Route Example

app.get('/profile', auth.jwt.protect(), (req, res)=> {
  res.json({
    message: 'Welcome!',
    user: req.user
  })
})

📤 Sending JWT from Client

Authorization: Bearer YOUR_JWT_TOKEN

⚠️ Common JWT Mistakes

❌ Storing JWT in localStorage (XSS risk)
❌ Putting sensitive data inside payload
❌ No token expiration
❌ Using weak secrets
✅ Use HTTP-only cookies if possible
✅ Always set expiresIn
✅ Rotate secrets in production

🧠 When Should You Use JWT?

JWT is great when:

You have stateless APIs
You use microservices
You need mobile or SPA authentication

JWT is not ideal when:

You need instant logout everywhere
You need heavy session control

🏁 Conclusion

JWT provides a simple, scalable, and stateless way to handle authentication.
When used correctly, it’s powerful and secure.

If you’re building APIs, SPAs, or mobile apps — JWT is worth mastering.

How to create password back-up system on Node.js

Jahongir Sobirov — Tue, 13 Jan 2026 18:01:39 +0000

Passwords can be forgotten, and forcing users to reset via email every time is annoying. With magic links, we can provide a secure and seamless password backup system. In this tutorial, I’ll show how to implement it in Node.js using the auth-verify library.

Install dependecies

npm install auth-verify express

auth-verify: To handle magic links
express: To create server routes.

Setup `auth-verify`

Initialize in your server.js:

const express = require('express')
const app = express()

const AuthVerify = require('auth-verify')
const auth = new AuthVerify({
  mlSecret: 'super_secret_key', // making secret for magic links
  mlExpiry: '5m', // magic links expiration time
  appUrl: 'http://localhost:3000', // URL of running app
  storeTokens: 'memory' // Storing magic links on 'memory' or 'redis'
})

// Configuring magic link sender
auth.magic.sender({
  service: 'gmail',
  sender: 'yourapp@gmail.com',
  pass: 'your_gmail_app_password'
})

Create Magic Link Endpoint

When a user forgets their password, we send a magic link to their email.

app.post('/send-magic-link', async (req, res)=> {
    const { email } = req.body
    try {
        const result = await auth.magic.send(email, {
            subject: 'Your Reset password Link ✨',
            html: `<p>Click below to sign in:</p>
            <a href="{{link}}">Login Now</a>` // {{link}} automatically changes to link like localhost:3000/auth/verify?token=GENERATED_TOKEN
        })
        res.json({ success: true, message: 'Magic link sent!', result })
    }catch(err){
        console.error(err)
        res.status(500).json({ success: false, message: 'Failed to send magic link' })
    }
})

Create Verification end point

When user clicks the link that sent to his/her email token will be verified

app.get('/auth/verify', async (req, res) => {
  const { token } = req.query; // getting token by link
  try {
    await auth.magic.verify(token)
    res.send(`
        <form method="POST" action="/reset-password">
            <input name="newpassword" type="password">
            <button type="submit">Set new password</button>
        </form>
        `)
  } catch (err) {
    res.status(400).json({ success: false, message: err.message })
  }
})

Set the new password

At this endpoint new password will be set by user

app.post('/reset-password', (req, res)=> {
  const { newpassword } = req.body // getting new password of user
  // And new password will be set in here...
})

Conclusion:

With magic links, users can reset their passwords without remembering old ones. Using auth-verify makes this setup secure and easy. You now have a simple Node.js password backup system that’s user-friendly and secure.

How to create reactive web page with JQuery

Jahongir Sobirov — Thu, 01 Jan 2026 12:25:08 +0000

Modern web apps feel “alive” because the UI updates automatically when data changes.
This is called reactivity.
Most people think you need frameworks like React or Vue for this — but you don’t.

What Is Reactivity?

Reactivity means:

When state changes → the UI updates automatically

Example:

User types text → preview updates
Counter increases → number on screen changes
Checkbox toggles → text appears/disappears

No manual DOM updates everywhere.

Step 1: Basic HTML

<!DOCTYPE html>
<html>
<head>
  <title>Reactive Page</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src='https://signel.onrender.com/signel.js'></script>
</head>
<body>

  <h2>Live Preview</h2>
  <input id="live" />
  <p>Preview: <span id="preview"></span></p>

  <script src="app.js"></script>
</body>
</html>

Step 2: Create Reactive State

In app.js, we'll create reactive state

// making reactive state
const live = state({
   text: ''
});

So we create state for watching and making react when that state changes

// jQuery event → update Signel state
$('#live').on('input', function () {
  live.text = $(this).val()
})

When user types state will automatically change

// Signel render → update DOM using jQuery
render(() => {
  $('#preview').text(live.text)
})

And finally updated state will be displayed in DOM

Full codes of `app.js`:

const live = state({
  text: ''
})

// jQuery event → update Signel state
$('#live').on('input', function () {
  live.text = $(this).val()
})

// Signel render → update DOM using jQuery
render(() => {
  $('#preview').text(live.text)
})

Live demo

I Built a Tiny Reactive JS Library and Discovered Why v-model Exists

Jahongir Sobirov — Wed, 24 Dec 2025 16:05:27 +0000

I Built a Tiny Reactive JS Library — and Rediscovered Why `v-model` Exists

When you use frameworks like Vue or React, a lot of things “just work”.
Recently, I tried to build a tiny reactive JavaScript library called Signel.js, and I learned why those things exist — the hard way.

Why I built it

I wanted to understand reactivity better, so I built a small library using:

Proxy for state
simple template interpolation ($$value)
manual DOM bindings

No virtual DOM. No JSX. Just raw JavaScript.

The demo: currency converter

I built a small USD → UZS currency converter using a free exchange-rate API.

let state = el(".exchange", {
  usdAmount: "",
  uzsAmount: ""
});

I bound the inputs like this:

input("#usd", state, "usdAmount");
input("#uzs", state, "uzsAmount");

And watched the USD value:

watch(state, "usdAmount", async value => {
  const res = await fetch(
    "https://hexarate.paikama.co/api/rates/USD/UZS/latest"
  );
  const data = await res.json();

  state.uzsAmount = (value * data.data.mid).toFixed(2);
});

The bug that confused me

Here’s what happened:

$$uzsAmount in the template updated correctly ✅
but the <input id="uzs"> did not update ❌

At first, I thought:

API issue?
async bug?
state not reactive?

But the state was changing.

The real problem

My el() function re-rendered the element like this:

el.innerHTML = template.replace(...)

That means on every state change:

inputs were destroyed
new inputs were created
old event listeners and bindings were lost

So input() was bound to a DOM element that no longer existed.
This explains why:

text interpolation worked
inputs silently failed

The fix: `model()` instead of `input()`

I already had a model() helper inspired by v-model.

model("#usd", state, "usdAmount");
model("#uzs", state, "uzsAmount");

model() stores state → DOM bindings as functions, so even after re-renders, the input value is updated correctly.

After switching to model():

✅ USD input works
✅ UZS input updates
✅ Text interpolation still works

What I learned

This bug taught me more than any tutorial:

Why frameworks avoid full innerHTML re-renders
Why form bindings are special
Why v-model-style abstractions exist
Why DOM diffing and controlled inputs matter

I accidentally rediscovered a problem that led to React, Vue, and Svelte.

Final thoughts

Building tiny libraries is an amazing way to understand big frameworks.

If you want to learn how reactivity really works:

build something small
break it
fix it

That’s how frameworks are born.

🔗 Signel.js (MIT, experimental)
Online demo

How to create live validation form in JavaScript

Jahongir Sobirov — Sat, 13 Dec 2025 16:02:24 +0000

Forms are everywhere — login, signup, checkout.

But have you ever filled a form and realized you had to submit it just to see errors?

Wouldn’t it be nice if the form validated itself as you type?

In this post, I’ll show you how to build a live validation form in plain JavaScript — no React, no Vue, no heavy frameworks. Just simple, reactive code you can understand and extend.

To make our form validate live, we need a system where:

Every input updates a central state object as the user types.
This state triggers validation logic automatically.
Any errors or messages are reflected in the DOM instantly.

Now we should prepare html part by making form.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live validation form</title>
    <!-- We need a only signel.js for making reactive form -->
    <script src="https://signel.onrender.com/signel.js"></script>
</head>
<body>
    <!-- Register form -->
    <form>
        <label for="username">Username</label><br>
        <input type="text" name="username" placeholder="Username" class="username"><br>
        <label for="password">Password</label><br>
        <input type="password" name="password" placeholder="Password" class="password"><br>
    </form>
    <!-- Warning messages appeares there -->
    <div class="warning-box">
        $$message
    </div>
</body>
</html>

Now in <script> part we make live validation logic for our form:

// Create reactive state bound to DOM
let data = el('.warning-box', {
   username: "", // it changes when user entered something to .username input
   password: "", // it also changes
   message: "" // warning message will be saved there
});

// Bind inputs to state
input(".username", data, "username"); // input() function binds username property of data for getting value when user typed
input(".password", data, "password"); 

// Watch username changes
watch(data, "username", value => {
   // value.length > 0 assures that warning message displays only user started to typing 
   if(value.length < 3 && value.length > 0){
      data.message = "<span style='color:red'>Username must be at least 3 characters</span>";
   }else {
      data.message = "";
   }
});

// Watch password changes
watch(data, "password", value => {
   if (value.length < 6 && value.length > 0) {
      data.message = "<span style='color:red'>Password must be at least 7 characters</span>";
   } else {
      data.message = "";
   }
});

And the result:

The whole codes of form.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live validation form</title>
    <script src="https://signel.onrender.com/signel.js"></script>
</head>
<body>
    <form>
        <label for="username">Username</label><br>
        <input type="text" name="username" placeholder="Username" class="username"><br>
        <label for="password">Password</label><br>
        <input type="password" name="password" placeholder="Password" class="password"><br>
    </form>
    <div class="warning-box">
        $$message
        <!-- $$username and $$password -->
    </div>
    <script>
        let data = el(".warning-box", {
            username: "",
            password: "",
            message: "",
        });

        input(".username", data, "username");
        input(".password", data, "password");

        watch(data, "username", value => {
            if (value.length < 3 && value.length > 0) {
                data.message = "<span style='color:red'>Username must be at least 3 characters</span>";
            } else {
                data.message = "";
            }
        });

        watch(data, "password", value => {
            if (value.length < 6 && value.length > 0) {
                data.message = "<span style='color:red'>Password must be at least 7 characters</span>";
            } else {
                data.message = "";
            }
        });
    </script>
</body>
</html>

Conclusion

In this post, we built a live validation form in JavaScript using Signel.js.

You learned how to:

Create a reactive state object bound to DOM elements
Bind inputs to state automatically
Use watchers to run validation logic in real-time
Update the UI without any framework or virtual DOM

This approach is lightweight, easy to understand, and perfect for small projects or learning how reactive frameworks work under the hood.

No complex build tools, no heavy libraries — just plain JavaScript.

Now it’s your turn:

Try adding more validation rules (email, password strength, etc.)
Combine reactive lists with form validation for a todo app
Explore how watchers and state can power dynamic UIs

What would you build next with Signel.js? Share your ideas in the comments! 🙌

Getting Input Values by ID or Class… On the Backend

Jahongir Sobirov — Mon, 01 Dec 2025 17:06:25 +0000

Ever wanted to read or manipulate HTML form inputs on the backend—just like document.getElementById in the browser—without setting up jsdom?

Meet FetchTL, a lightweight library that lets you sync, read, and update form/input data directly in Node.js. Perfect for server-driven HTML or JS-free forms.

Why Use FetchTL?

Backend developers often face these scenarios:

Server-side form handling: Access input values without relying on frontend JS.
Dynamic templates: Read and modify HTML inputs for emails, reports, or static pages.
Simplified backend forms: No complex DOM emulation needed.

FetchTL provides a mini DOM store on the server—fast, simple, and easy to integrate with Express.

Installation

# Install via npm
npm install fetchtl

Import in your backend code:

const express = require("express");
const $ = require("fetchtl");

const app = express();
app.use(express.json()); // Parse JSON bodies

Syncing Form Data from Frontend

On the frontend, you can send form data with $post, $put, $patch, or $delete attributes.

Example form:

For using frontend you shoul import frontend fetchtl also:
<script src="https://cdn.jsdelivr.net/gh/jahongir2007/fetchtl/fetchtl.js"></script>

<form $post="/api/form" $reload="false" $single-fetch="true">
  <input id="age" name="age" value="18" />
  <input class="email" name="email" value="user@mail.com" />
  <input name="username" value="Jahongir" />
  <button type="submit">Send</button>
</form>

Backend route to sync form data:

app.post("/api/form", (req, res) => {
  // Sync form data into FetchTL store
  $.sync(req.body);

  // Access input values
  const username = $.input("username").val()[0]; // array for names/classes
  const age = $.input("#age").val();            // single value for ID
  const emails = $.input(".email").val();       // array for class

  console.log("Synced $ store:", $.store);

  res.json({
    status: "success",
    data: { username, age, emails }
  });
});

Getting and Setting Input Values

FetchTL uses selectors just like the browser:

Selector	Example	Returns / Updates
ID	`#age`	Single string
Class	`.email`	Array of values
Name	`username`	Array of values

Get Values

const age = $.input("#age").val();           // "18"
const emails = $.input(".email").val();      // ["user@mail.com"]
const usernames = $.input("username").val(); // ["Jahongir"]

Set Values

$.input("#age").val("19");
$.input(".email").val("new@mail.com");
$.input("username").val("John");

console.log($.store);

Why FetchTL is Easier than jsdom

No virtual DOM setup needed.
Works directly with req.body from forms.
Automatically syncs and stores input values.
Supports IDs, classes, and names with minimal code.
Ideal for server-driven UIs or JS-free frontend.

Example: Complete Express App

const express = require("express");
const $ = require("fetchtl");

const app = express();
app.use(express.json());

app.post("/api/form", (req, res) => {
  $.sync(req.body);

  const username = $.input("username").val()[0];
  const age = $.input("#age").val();

  res.json({
    status: "success",
    data: { username, age }
  });
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

Conclusion

FetchTL makes it ridiculously easy to handle form and input data on the backend. No DOM emulation, no complicated setup—just sync, access, and update.

Next time you want to grab input values like in the browser—but on Node.js—reach for FetchTL.

What If You Could Write AJAX Without JavaScript? Meet fetchtl.

Jahongir Sobirov — Mon, 17 Nov 2025 16:03:16 +0000

Ever wished you could make an API request without writing a single line of JavaScript?

Yeah… me too 😅
So I built fetchtl — a tiny library that lets you do things like:

<div $get="/api/user"></div>

or even:

<form $post="/api/register" $send-on="submit">
  <input name="email" />
  <button type="submit">Register</button>
</form>

That’s it. No JS. No frameworks. No fetch(). Just HTML.

🌟 Why I Created fetchtl

As a web developer, I got tired of doing this 100 times:

fetch("/api/user")
  .then(res => res.json())
  .then(data => {
    document.querySelector("#user").innerHTML = data.name;
  });

Too much boilerplate. Too much repetition.
I wanted something like:
“Just write HTML and let the page fetch automatically.”
So I created fetchtl — a tool that gives HTML magical new attributes:

$get → Load data from an API
$post → Submit a form via AJAX

🚀 What Exactly Is fetchtl?

fetchtl is a JavaScript helper that watches your HTML for special attributes and automatically performs API calls.

No build tools. No configs. No React. No Vue.
Just include it and start using it:

<script src="https://cdn.jsdelivr.net/gh/jahongir2007/fetchtl/fetchtl.js"></script>

Now HTML becomes smart.

🤯 Example: Load API Data with Just One Attribute

Before fetchtl (traditional way)

<div id="user"></div>

<script>
fetch("/api/user")
  .then(res => res.json())
  .then(data => {
    document.getElementById("user").innerHTML = data.name;
  });
</script>

With fetchtl 🚀

<div $get="/api/user">
  Loading...
</div>

fetchtl does everything automatically:

fetches the URL
replaces the inside HTML
handles JSON
updates instantly

📝 Example: AJAX Form Without JavaScript

Before

document.querySelector("form").addEventListener("submit", e => {
  e.preventDefault();
  const formData = new FormData(e.target);

  fetch("/api/register", {
    method: "POST",
    body: formData
  });
});

With fetchtl 💛

<form $post="/api/register" $send-on="submit" $reload="false">
  <input name="email" placeholder="Your email" />
  <button type="submit">Register</button>
</form>

The form submits via AJAX automatically.
The page doesn’t reload.
You didn’t write any JavaScript.

Built-in template engine (e.g. `$name` → replaced by JSON value)

So you can get directly and json object value by calling its name

<div $get='/user'>
User name: $name
</div>

🔄 Auto-refresh sections

With $poll you can refresh any section of your web page

<div $get='/api/status' $poll='2000'>
User status: $status
</div>

$poll means that every 2000 ms or 2 seconds fetchtl sends request to server Useful for:
- live dashboards
- instant search
- real-time forms

Github page: https://github.com/Jahongir2007/fetchtl