Prompt Your LLM: Web / JavaScript

I need to integrate Akedly Shield V1.2 OTP authentication into my web application.

## Architecture: keep APIKey on the backend

APIKey and pipelineID are credentials and MUST NOT appear in browser code.
My backend exposes three thin proxy routes that the frontend will call:
  GET  /auth/akedly/challenge
  POST /auth/akedly/send            body: { phoneNumber, powSolution, turnstileToken? }
  POST /auth/akedly/verify          body: { transactionReqID, otp }

The FRONTEND code you generate must ONLY call these three routes.
Never reference APIKey or pipelineID in the frontend. Never call api.akedly.io from the browser.

## Reference backend (Node.js / Express) — drop in if I don't have one yet

import express from 'express';

const app = express();
app.use(express.json());
// Optional: only needed if you want per-end-user-IP rate limiting (drop
// this line and the x-end-user-ip header below if you don't). Makes req.ip
// the real client IP behind Cloudflare / Vercel / AWS ALB / Nginx.
app.set('trust proxy', 1);

app.get('/auth/akedly/challenge', async (_req, res) => {
  const r = await fetch(
    `https://api.akedly.io/api/v1.2/transactions/challenge` +
    `?APIKey=${process.env.AKEDLY_API_KEY}` +
    `&pipelineID=${process.env.AKEDLY_PIPELINE_ID}`
  );
  res.status(r.status).json(await r.json());
});

app.post('/auth/akedly/send', async (req, res) => {
  const { phoneNumber, powSolution, turnstileToken } = req.body;
  const r = await fetch('https://api.akedly.io/api/v1.2/transactions/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-end-user-ip': req.ip },
    body: JSON.stringify({
      APIKey: process.env.AKEDLY_API_KEY,
      pipelineID: process.env.AKEDLY_PIPELINE_ID,
      verificationAddress: { phoneNumber },
      powSolution,
      turnstileToken,
    }),
  });
  res.status(r.status).json(await r.json());
});

app.post('/auth/akedly/verify', async (req, res) => {
  const { transactionReqID, otp } = req.body;
  const r = await fetch('https://api.akedly.io/api/v1.2/transactions/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ transactionReqID, otp }),
  });
  res.status(r.status).json(await r.json());
});

## Challenge response shape (what the frontend receives from /auth/akedly/challenge)

{ status, data: { challenge, difficulty, challengeToken, challengeRequired, turnstile: { required, siteKey } } }

## Frontend flow

1. GET /auth/akedly/challenge
2. Solve PoW with @akedly/shield: `const { nonce } = await solvePow(challenge, difficulty)`
   Algorithm: SHA256(challenge + ":" + nonce) must start with `difficulty` leading hex zeros.
3. If turnstile.required: `const token = await getTurnstileToken(siteKey)`
4. POST /auth/akedly/send   body: { phoneNumber, powSolution: { challengeToken, nonce }, turnstileToken }
   Response: { status, data: { transactionReqID } }
5. POST /auth/akedly/verify   body: { transactionReqID, otp: "123456" }

## SDK: @akedly/shield (v1.0.1)

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

Key functions:
- solvePow(challenge, difficulty, options?) -> Promise<{ nonce: number }>
  options: { onProgress: (hashesChecked) => void, useWorker: 'auto'|true|false }
- getTurnstileToken(siteKey, options?) -> Promise<string>
- renderTurnstile(siteKey, container, options?) -> Promise<string>
- new AkedlyShield(options?) with .solve() and .terminate()

Web Worker is used automatically in browsers. Falls back to batched main-thread where Workers aren't available.

## Requirements

Please generate a complete integration with:
- A reusable function/hook for the full OTP flow (challenge -> solve -> send -> verify) that talks ONLY to my backend
- Error handling for all backend responses
- Loading states
- Phone number input, OTP input, verification UI
- No APIKey and no pipelineID anywhere in the frontend code