Web / JavaScript Shield SDK

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

const { solvePow, getTurnstileToken } = window.AkedlyShield;

{
  verified: boolean        // true only on a completed, successful ceremony
  supported: boolean       // false only when WebAuthn is unavailable
  purpose: string | null   // 'enroll' | 'auth'
  transactionId: string | null
  resultToken: string | null // signed proof of a verified outcome — verify on YOUR backend
  code: string | null      // reserved — currently always null; branch on `verified`/`reason`
  reason: string | null    // null when verified; else 'closed' | 'popup_blocked'
                           //   | 'unsupported' | 'timeout' | 'no_proof' | 'failed'
}

import { openPasskeyCeremony, isPasskeySupported } from '@akedly/shield'

if (verify.data.enrollmentToken && isPasskeySupported()) {
  // For result.verified to be true here, the OTP /verify that minted enrollmentToken must
  // also have passed returnTarget: { origin: 'https://your-site.example' }. Without it
  // enrollment still succeeds, but this resolves verified:false / no_proof — treat it as advisory.
  // In the click handler of an "Enable Face ID / fingerprint" button:
  const result = await openPasskeyCeremony(verify.data.enrollmentToken)
  // result.verified === true => the passkey now exists (proven on next sign-in).
}

// Your backend proxy → POST /transactions/passkey/auth-options with:
//   { APIKey, pipelineID, verificationAddress: { phoneNumber },
//     powSolution, turnstileToken,  // <-- same bot proofs as /send (see note above)
//     returnTarget: { origin: 'https://your-site.example' } } // <-- REQUIRED for the web resultToken

// In the sign-in click handler:
const popup = window.open('about:blank', 'akedly_passkey', 'width=480,height=680')
const { ceremonyToken, requestID } = await startAuth(phoneNumber) // keep requestID for proof binding
if (!ceremonyToken) { popup?.close(); return fallbackToOtp() } // 404 NO_PASSKEY

const result = await openPasskeyCeremony(ceremonyToken, { popup })
if (result.verified) {
  await completeSignIn(result.resultToken, requestID) // backend verifies + binds the proof
} else if (result.reason === 'no_proof') {
  // The authentication may have SUCCEEDED and been billed — the relay just carried no proof.
  // Reconcile via GET /result or the backend callback BEFORE starting OTP, or you charge twice.
  await reconcileThenMaybeOtp(requestID)
} else {
  await fallbackToOtp()
}

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.

// Pass the same 4, 5, or 6 value that your backend requests from Akedly.
// The UI length is not sent to Akedly and must not be hardcoded independently.
function OTPAuth({ phoneNumber, otpLength, 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 only when the pipeline requires it.
      let powSolution;
      if (data.challengeRequired) {
        const { nonce } = await solvePow(data.challenge, data.difficulty);
        powSolution = { challengeToken: data.challengeToken, nonce };
      }

      // 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 ? { powSolution } : {}),
          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 ${otpLength}-digit OTP`}
        maxLength={otpLength}
      />
      <button onClick={handleVerify} disabled={loading || otp.length < otpLength}>
        {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
    let powSolution;
    if (data.challengeRequired) {
      const { nonce } = await solvePow(data.challenge, data.difficulty);
      powSolution = { challengeToken: data.challengeToken, nonce };
    }
    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 ? { powSolution } : {}),
        turnstileToken,
      }),
    });
    return sendRes.json();
  }
</script>