rauth-client/README.md

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

# 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`](https://www.npmjs.com/package/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`](https://www.npmjs.com/package/rauth-provider`).


---


## 🔧 Install

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

```bash
npm install rauth-client
```

### Using CDN

```html
<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](https://rauth.io)
2. Generate your `appId` and `apiKey` from the dashboard.
3. Use this library on your frontend.
4. Use [`rauth-provider`](https://www.npmjs.com/package/rauth-provider) on your backend to verify tokens.

---


## 💡 Usage

### a. With TypeScript / ES Modules / React

```ts
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)

```html
<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`

```json
{
  "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

---