rauth-client/demo/react/src/App.jsx

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

import React, { useState } from 'react';
import { rauth } from 'rauth-client'

export default function App() {
  const [phone, setPhone] = useState('');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleLogin = async () => {
    setError('');
    setResult(null);
    setLoading(true);
    try {
      const res = await rauth.init({ appId: '4ee3575a-7176-495f-bc49-b84de37c1fde', phone });
      setResult(res);
    } catch (e) {
      setError(e.message || 'Something went wrong');
    }
    setLoading(false);
  };

  return (
    <div style={{ maxWidth: 400, margin: '40px auto', padding: 24, border: '1px solid #eee', borderRadius: 8, fontFamily: 'sans-serif' }}>
      <h2>Login with WhatsApp</h2>
      {!result && (
        <>
          <input
            type="tel"
            placeholder="Enter phone number"
            value={phone}
            onChange={e => setPhone(e.target.value)}
            style={{ width: '100%', padding: 8, marginBottom: 12, fontSize: 16 }}
          />
          <button onClick={handleLogin} style={{ width: '100%', padding: 10, fontSize: 16 }} disabled={loading || !phone}>
            {loading ? 'Processing...' : 'Login with WhatsApp'}
          </button>
          {error && <div style={{ color: 'red', marginTop: 12 }}>{error}</div>}
        </>
      )}
      {result && (
        <div style={{ marginTop: 24 }}>
          <div><b>Session Token:</b> <code>{result.session_token}</code></div>
          <div style={{ margin: '16px 0' }}>
            <img src={result.qr_image_link} alt="QR Code" style={{ width: 180, height: 180, border: '1px solid #ccc' }} />
          </div>
          <div style={{ marginBottom: 12 }}>
            <a href={result.wa_link} target="_blank" rel="noopener noreferrer">
              <button style={{ width: '100%', padding: 10, fontSize: 16, background: '#25D366', color: '#fff', border: 'none', borderRadius: 4 }}>
                Login with current WhatsApp
              </button>
            </a>
          </div>
          <div style={{ color: '#555', fontSize: 14 }}>
            Or scan the QR code above to login with a different WhatsApp account.
          </div>
        </div>
      )}
    </div>
  );
}