rauth-client

A lightweight, framework-agnostic JavaScript/TypeScript library for adding reverse authentication via WhatsApp on the client side.

This library allows you to generate a reverse authentication token in your frontend application. The user verifies their identity via WhatsApp, and your client app can send the session token to your backend for verification.

🔒 You must install rauth-provider on your Node.js backend to verify tokens issued by rauth-client.

✅ Features

📱 Client-Side Reverse Auth – Generate session tokens from your frontend without traditional OTP flows.

📦 Framework-Agnostic – Works with any JavaScript/TypeScript frontend (React, Vue, Svelte, plain JS, etc.)

💬 WhatsApp-Based Verification – Lets users verify themselves via WhatsApp without requiring any SMS.

🧩 Plug-and-Play SDK – Just call rauth.init() with appId and phone number, and you're done.

🔐 Secure Token Generation – Uses signed session tokens to prevent tampering or spoofing.

🌐 Cross-Platform Support – Compatible with web, PWA, Electron, mobile browsers, etc.

🖼 QR + Link Options – Automatically returns a WhatsApp Web link and QR image for alternate login devices.

🧠 TypeScript Support – Comes with full typings (RauthInitParams, RauthSessionResponse, etc.) for better DX.

🧪 Easy Testing & Debugging – Logs session token for dev tools and integrates seamlessly with rauth-provider.

🚀 Production Ready – Designed to integrate securely with your backend for session verification via rauth-provider.

🔧 Install

Using npm (for React, Vue, Svelte, etc.)

npm install rauth-client

Using CDN

<script src="https://cdn.jsdelivr.net/npm/rauth-client/dist/rauth-client.min.js"></script>

📦 Prerequisites

1. Create a free account at https://rauth.io
2. Generate your appId and apiKey from the dashboard.
3. Use this library on your frontend.
4. Use rauth-provider on your backend to verify tokens.

💡 Usage

a. With TypeScript / ES Modules / React

import { rauth, RauthInitParams, RauthSessionResponse } from 'rauth-client';

const params: RauthInitParams = {
  appId: 'your-app-id',
  phone: '+917000000000'
};

rauth.init(params).then((token: RauthSessionResponse) => {
  console.log('Token:', token.session_token);
  
  // Show QR image to login with a different device
  // <img src={token.qr_image_link} />

  //  Add link to open WhatsApp for verification
  // <a href={token.wa_link} target="_blank">Verify on WhatsApp</a>
});

b. With Plain JavaScript (via <script> tag)

<script src="https://cdn.jsdelivr.net/npm/rauth-client/dist/rauth-client.min.js"></script>
<script>
  rauth.init({
    appId: 'your-app-id',
    phone: '+917000000000'
  }).then(res => {
    console.log(res.session_token);
    
    // Show QR
    // document.getElementById('qr').src = res.qr_image_link;

    // Add link to WhatsApp
    // document.getElementById('wa').href = res.wa_link;
  });
</script>

🔐 Backend Verification Example

After the user verifies via WhatsApp, send the session token to your backend:

POST /login

{
  "phone": "+917000000000",
  "token": "dfsdf-fdsdfsdfsd-dsfsdfg84-fsadfgsdag"
}

Your backend (using rauth-provider) should validate the token and return a JWT or session data if verified.

📝 License

MIT