Web / JavaScript Shield SDK

<script src="https://unpkg.com/@akedly/shield/dist/akedly-shield.min.js"></script>

const { solvePow, getTurnstileToken } = window.AkedlyShield;

import { useState } from 'react';
import { solvePow, getTurnstileToken } from '@akedly/shield';

// This React component calls YOUR backend proxy (see Quick Start for the Node.js server).
// Never put AKEDLY_API_KEY or AKEDLY_PIPELINE_ID in REACT_APP_* — those ship to the browser.

function OTPAuth({ phoneNumber, onSuccess }) {
  const [transactionReqID, setTransactionReqID] = useState(null);
  const [otp, setOtp] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSendOTP = async () => {
    setLoading(true);
    setError(null);
    try {
      // Get challenge from YOUR backend
      const challengeRes = await fetch('/auth/akedly/challenge');
      const { data } = await challengeRes.json();

      // Solve PoW
      const { nonce } = await solvePow(data.challenge, data.difficulty);

      // Get Turnstile token
      const turnstileToken = data.turnstile?.required
        ? await getTurnstileToken(data.turnstile.siteKey)
        : undefined;

      // Send proof via YOUR backend
      const sendRes = await fetch('/auth/akedly/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          phoneNumber,
          powSolution: { challengeToken: data.challengeToken, nonce },
          turnstileToken,
        }),
      });
      const result = await sendRes.json();
      setTransactionReqID(result.data.transactionReqID);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleVerify = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch('/auth/akedly/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ transactionReqID, otp }),
      });
      const result = await res.json();
      if (result.status === 'success') onSuccess(result);
      else setError('Invalid OTP');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (!transactionReqID) {
    return (
      <div>
        <button onClick={handleSendOTP} disabled={loading}>
          {loading ? 'Sending...' : 'Send OTP'}
        </button>
        {error && <p>{error}</p>}
      </div>
    );
  }

  return (
    <div>
      <input
        value={otp}
        onChange={(e) => setOtp(e.target.value)}
        placeholder="Enter 6-digit OTP"
        maxLength={6}
      />
      <button onClick={handleVerify} disabled={loading || otp.length < 6}>
        {loading ? 'Verifying...' : 'Verify'}
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

export default OTPAuth;

<script src="https://unpkg.com/@akedly/shield/dist/akedly-shield.min.js"></script>
<script>
  const { solvePow, getTurnstileToken } = window.AkedlyShield;

  async function authenticate(phone) {
    // 1. Get challenge from YOUR backend
    const res = await fetch('/auth/akedly/challenge');
    const { data } = await res.json();

    // 2. Solve PoW + (optional) Turnstile in the browser
    const { nonce } = await solvePow(data.challenge, data.difficulty);
    const turnstileToken = data.turnstile?.required
      ? await getTurnstileToken(data.turnstile.siteKey)
      : undefined;

    // 3. Send proof via YOUR backend
    const sendRes = await fetch('/auth/akedly/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        phoneNumber: phone,
        powSolution: { challengeToken: data.challengeToken, nonce },
        turnstileToken,
      }),
    });
    return sendRes.json();
  }
</script>