auth-verify 1.6.1 → 1.7.0

package/authverify.client.js

@@ -0,0 +1,71 @@
+window.AuthVerify = class AuthVerify {
+    constructor(options = {}){
+        this.apiBase = options.apiBase || 'http://localhost:3000';
+        this.qrContainer = options.qrEl || null;
+    }
+
+    // Fetch QR code from backend and display
+    post(url){
+        this.fetchPostUrl = url;
+        return this;
+    }
+
+    get(url){
+        this.fetchGetUrl = url;
+        return this;
+    }
+
+    async qr() {
+        if (!this.qrContainer) return;
+        try {
+        const res = await fetch(`${this.apiBase}${this.fetchGetUrl}`);
+        const data = await res.json();
+        if (data.qr) {
+            this.qrContainer.src = data.qr;
+        } else {
+            this.showResponse('No QR received');
+        }
+        } catch (err) {
+        console.error(err);
+        this.showResponse('Error fetching QR');
+        }
+    }
+
+    showResponse(msg){
+        console.log("[AuthVerify]", msg);
+    }
+
+    async data(payload){
+        try {
+            const res = await fetch(`${this.apiBase}${this.fetchPostUrl}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+            });
+
+            const data = await res.json();
+
+            // if backend returned jwt we store it but still return whole data
+            if (data.token) {
+            this.jwt = data.token;
+            }
+
+            return data;
+
+        } catch(err){
+            console.error(err);
+            return { error: true, message: err.message };
+        }
+    }
+
+    header(){
+        if(!this.jwt) return {};
+        return {
+            Authorization: `Bearer ${this.jwt}`
+        };
+    }
+
+    async verify(code){
+        return this.data({code});
+    }
+}

package/package.json

@@ -12,8 +12,8 @@
     "uuid": "^9.0.1"
   },
   "name": "auth-verify",
-  "version": "1.6.1",
-  "description": "A simple Node.js library for sending and verifying OTP via email, SMS and Telegram bot. And generating TOTP codes and QR codes. And handling JWT with Cookies",
+  "version": "1.7.0",
+  "description": "A simple Node.js library for sending and verifying OTP via email, SMS and Telegram bot. And generating TOTP codes and QR codes. And handling JWT with Cookies. And also handling passwordless logins with passkeys/webauthn",
   "main": "index.js",
   "scripts": {
     "test": "jest --runInBand"

package/readme.md

@@ -8,7 +8,9 @@
   - ✅ Session management (in-memory or Redis).
   - ✅ OAuth 2.0 integration for Google, Facebook, GitHub, X (Twitter), Linkedin, and additional providers like Apple, Discord, Slack, Microsoft, Telegram,and WhatsApp.
   - ⚙️ Developer extensibility: custom senders via `auth.register.sender()` and chainable sending via `auth.use(name).send(...)`.
+  - ✅ Frontend client SDK (`authverify.client.js`) for browser usage: QR display, OTP verification, JWT requests, and auth headers; works without modules, just `<script>`.
   - ✅ Automatic JWT cookie handling for Express apps, supporting secure, HTTP-only cookies and optional auto-verification.
+  - ✅ Passwordless login and registration with passkeys and webauthn.
   - ✅ Fully asynchronous/Promise-based API, with callback support where applicable.
   - ✅ Chainable OTP workflow with cooldowns, max attempts, and resend functionality.
 ---
@@ -247,6 +249,15 @@ auth.otp.setSender({
   // if smtp service: host, port, secure (boolean)
 });
 
+// or you can use sender() method
+// auth.otp.sender({
+//   via: 'email',
+//   sender: 'your@address.com',
+//   pass: 'app-password-or-smtp-pass',
+//   service: 'gmail' // or 'smtp'
+//   // if smtp service: host, port, secure (boolean)
+// });
+
 // sms example (the internal helper expects provider/apiKey or mock flag)
 auth.otp.setSender({
   via: 'sms',
@@ -283,6 +294,21 @@ auth.otp.setSender({
 });
 ```
 
+### 🛫 Simple and easy sending OTP codes
+
+OTP codes can be simply and easily sent by `send()` method.
+
+```js
+auth.otp.send('johndoe@mail.com', {otpLen: 5, subject: "Email verification", html: `Your OTP code is ${auth.otp.code}`}, (err)=>{
+  if(err) console.log(err)
+  console.log('OTP sent!');
+});
+```
+or you can simple use it like this:
+```js
+auth.otp.send('johndoe@mail.com');
+```
+ 
 ### ⛓️ Generate → Save → Send (chainable)
 
 OTP generation is chainable: `generate()` returns the OTP manager instance.
@@ -344,6 +370,13 @@ auth.otp.verify({ check: 'user@example.com', code: '123456' }, (err, isValid)=>{
   if(isValid) console.log('Correct code!');
   else console.log('Incorrect code!');
 });
+
+// or you can use it like this:
+// auth.otp.verify('user@example.com','123456', (err, isValid)=>{
+//   if(err) console.log(err);
+//   if(isValid) console.log('Correct code!');
+//   else console.log('Incorrect code!');
+// });
 ```
 
 ### Resend and cooldown / max attempts
@@ -540,7 +573,7 @@ console.log(uri);
 ### generate QR code image
 (send this PNG to frontend or show in UI)
 ```js
-const qr = await auth.totp.qrcode(uri);
+const qr = await auth.totp.qrcode(uri); // or you can use await auth.totp.qr(uri);
 console.log(qr); // data:image/png;base64,...
 ```
 ### generate a TOTP code
@@ -571,6 +604,112 @@ if (auth.totp.verify({ secret, token })) {
 }
 ```
 ---
+
+## auth-verify client
+### 1️⃣ Introduction
+
+**AuthVerify Client** is a lightweight frontend JavaScript library for TOTP / JWT authentication.
+It works with your backend APIs to:
+ - Display QR codes for TOTP enrollment
+ - Verify user OTP codes
+ - Request JWT tokens from backend
+ - Send authenticated requests easily
+
+Works like jQuery: just include the script in HTML, no module or bundler needed.
+
+## 2️⃣ Installation
+```html
+<script src="https://cdn.jsdelivr.net/gh/jahongir2007/auth-verify/authverify.client.js"></script>
+```
+
+### 3️⃣ Initialization
+```js
+const qrImage = document.getElementById('qrImage');
+
+const auth = new AuthVerify({
+  apiBase: 'http://localhost:3000',  // Your backend API base URL
+  qrEl: qrImage                       // Image element to display QR
+});
+```
+
+### 4️⃣ Generating QR Code
+```js
+auth.get('/api/qr').qr();
+```
+ - Fetches QR code from backend
+ - Displays it in the `qrEl` image element
+
+### 5️⃣ Sending Data / JWT Requests
+```js
+const payload = { name: 'John', age: 23 };
+
+const token = await auth.post('/api/sign-jwt').data(payload);
+console.log('JWT token:', token);
+```
+ - `post(url)` sets endpoint
+ - `data(payload)` sends JSON payload
+ - If backend returns a token, it is stored in `auth.jwt`
+
+### 6️⃣ Verifying OTP
+```js
+const result = await auth.post('/api/verify-totp').verify('123456');
+console.log(result); // e.g. { verified: true }
+```
+ - Wraps the OTP code in `{ code: '...' }`
+ - Sends to backend for verification
+
+### 7️⃣ Sending Authenticated Requests
+```js
+const profile = await fetch('http://localhost:3000/api/profile', {
+  headers: auth.header()
+}).then(res => res.json());
+
+console.log(profile);
+```
+ - `auth.header()` returns `{ Authorization: "Bearer <jwt>" }`
+ - Easy to attach JWT to any request
+
+### 8️⃣ Method Summary
+| Method          | Description                                     |
+| --------------- | ----------------------------------------------- |
+| `get(url)`      | Set GET endpoint                                |
+| `post(url)`     | Set POST endpoint                               |
+| `qr()`          | Fetch QR from backend and display               |
+| `data(payload)` | Send payload to backend; stores JWT if returned |
+| `verify(code)`  | Send OTP code to backend                        |
+| `header()`      | Return JWT auth header object                   |
+
+### 9️⃣ Example HTML
+```html
+<img id="qrImage" />
+<div id="response"></div>
+<button id="getQRBtn">Get QR</button>
+<button id="sendBtn">Send Data</button>
+
+<script src="authverify.client.js"></script>
+<script>
+const qrImage = document.getElementById('qrImage');
+const responseDiv = document.getElementById('response');
+
+const auth = new AuthVerify({ apiBase: 'http://localhost:3000', qrEl: qrImage });
+
+document.getElementById('getQRBtn').addEventListener('click', () => auth.get('/api/qr').qr());
+
+document.getElementById('sendBtn').addEventListener('click', async () => {
+  const payload = { name: 'Jahongir' };
+  const result = await auth.post('/api/sign-jwt').data(payload);
+  responseDiv.textContent = JSON.stringify(result, null, 2);
+});
+</script>
+```
+
+### 10️⃣ Tips for Developers
+ - Always call `auth.get('/api/qr').qr()` **after page loads**
+ - Use `auth.header()` for any authenticated request
+ - Backend must provide endpoints for `/api/qr`, `/api/verify-totp`, `/api/sign-jwt`
+
+---
+
 ## 🌍 OAuth 2.0 Integration (v1.2.0+)
 `auth.oauth` supports login via Google, Facebook, GitHub, X (Twitter), Linkedin, Microsoft, Telegram, Slack, WhatsApp, Apple and Discord.
 ### Providers & Routes table
@@ -917,6 +1056,7 @@ auth-verify/
 │  ├─ totpmanager.test.js
 │  ├─ passkeymanager.test.js
 ├─ babel.config.js
+├─ authverify.client.js
 ```
 
 ---

package/src/otp/index.js

@@ -27,6 +27,16 @@ class OTPManager {
             }
         }
 
+        if(otpOptions.sender){
+            this.senderVia = otpOptions.sender.via;
+            this.senderService = otpOptions.sender.service;
+            this.senderMail = otpOptions.sender.sender;
+            this.senderPass = otpOptions.sender.pass;
+            this.senderHost = otpOptions.sender.host;
+            this.senderPort = otpOptions.sender.port;
+            this.senderSecure = otpOptions.sender.secure;
+        }
+
     }
 
     // generate(length = 6, callback) {
@@ -50,6 +60,11 @@ class OTPManager {
         this.senderConfig = config;
     }
 
+    sender(config){
+        if(!config.via) throw new Error("⚠️ Sender type { via } is required. It shouldbe 'email' or 'sms' or 'telegram'");
+        this.senderConfig = config;
+    }
+
     async set(receiverEmailorPhone, callback){
         const expiryInSeconds = Math.floor(this.otpExpiry / 1000);
 
@@ -534,33 +549,39 @@ class OTPManager {
     //     return this._verifyInternal(identifier, code);
     // }
 
-    async verify({ check, code }, callback) {
+    async verify(options, code, callback) {
+
         const handleError = (err) => {
-            // normalize message
-            if (err.message.includes("expired")) err = new Error("OTP expired");
-            else if (err.message.includes("Invalid")) err = new Error("Invalid OTP");
+            if (err.message?.includes("expired")) return new Error("OTP expired");
+            if (err.message?.includes("Invalid")) return new Error("Invalid OTP");
             return err;
         };
 
-        // callback style
-        if (callback && typeof callback === 'function') {
-            try {
-                const res = await this._verifyInternal(check, code);
-                return callback(null, res);
-            } catch (err) {
-                return callback(handleError(err));
-            }
+        // shape normalize
+        if (typeof options === "string" && typeof code === "string") {
+            // options as check string
+            options = { check: options, code: code };
+            code = undefined; // remove
+        }
+
+        // callback detect
+        if (typeof code === "function") {
+            callback = code;
         }
 
-        // promise style
         try {
-            return await this._verifyInternal(check, code);
+            const res = await this._verifyInternal(options.check, options.code);
+            if (callback) return callback(null, res);
+            return res;
         } catch (err) {
-            throw handleError(err);
+            err = handleError(err);
+            if (callback) return callback(err);
+            throw err;
         }
     }
 
 
+
     // helper used by verify()
     // async _verifyInternal(identifier, code) {
     // // memory
@@ -1118,7 +1139,54 @@ class OTPManager {
         console.log("🚀 Telegram verification bot ready!");
     }
 
+    async send(reciever, mailOption , callback){
 
+        if(typeof mailOption == 'function'){
+            callback = mailOption;
+            mailOption = {}
+        }else if(!mailOption){
+            mailOption = {};
+        }
+
+        const sendProcess = async () => {
+            // const otpCode = this.generate(mailOption.otpLen = 6).set(reciever);
+            // console.log(otpCode);
+            if(this.senderConfig.via == 'email'){
+                await this.#sendEmail(reciever, mailOption);
+            }else if(this.senderConfig.via == 'sms'){
+                await this.#sendSMS(reciever, mailOption);
+            }else {
+                throw new Error("senderConfig.via should be 'email' or 'sms'")
+            }
+        }
+
+        if(callback) sendProcess().then(result => callback(null, result)).catch(error => callback(error));
+        else return sendProcess();
+    }
+
+    #sendEmail(reciever, mailOption){
+        return this.generate(mailOption.otpLen).set(reciever, (err)=>{
+            if(err) throw err
+
+            this.message({
+                to: reciever,
+                subject: mailOption.subject || "Your OTP code",
+                text: mailOption.text || `Your OTP code is ${this.code}`,
+                html: mailOption.html || `Your OTP code is ${this.code}`
+            });
+        });
+    }
+
+    #sendSMS(reciever, code, smsOption){
+        return this.generate(smsOption.otpLen).set(reciever, (err)=>{
+            if(err) throw err;
+
+            this.message({
+                to: reciever,
+                text: smsOption.text || `Your OTP code is ${code}`
+            });
+        });
+    }
 }
 
 module.exports = OTPManager;

package/src/totp/index.js

@@ -43,6 +43,11 @@ class TOTPManager {
     return await qrcode.toDataURL(uri);
   }
 
+  async qr(uri) {
+    const qrcode = require("qrcode");
+    return await qrcode.toDataURL(uri);
+  }
+
   // internal HOTP algorithm
   _hotp(secret, counter) {
     const key = base32.decode(secret);