Prompt Your LLM: React Native

Copy the prompt below into ChatGPT, Claude, Cursor, or any AI coding assistant. It contains everything the LLM needs to generate a working Akedly Shield V1.2 integration for your React Native project.


Copy This Prompt

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

## Architecture: keep APIKey on the backend

APIKey and pipelineID are credentials. They MUST NOT be compiled into a React Native bundle — bundles can be extracted and anything inside is public.
My backend exposes three thin proxy routes that the RN app will call:
  GET  /auth/akedly/challenge
  POST /auth/akedly/send            body: { phoneNumber, powSolution, turnstileToken? }
  POST /auth/akedly/verify          body: { transactionReqID, otp }

The React Native code you generate must ONLY call these three routes.
Never reference APIKey or pipelineID in JS/TSX. Never call api.akedly.io from the client.

## 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 RN receives from /auth/akedly/challenge)

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

## Frontend flow

1. GET {BACKEND_URL}/auth/akedly/challenge
2. Solve PoW on-device with @akedly/shield: `const { nonce } = await solvePow(challenge, difficulty)`
   Note: In React Native, this runs on the JS thread with batched yielding (no Web Worker).
3. If turnstile.required, use react-native-webview pointing to the Turnstile bridge page. The WebView posts the token back via onMessage.
4. POST {BACKEND_URL}/auth/akedly/send   body: { phoneNumber, powSolution: { challengeToken, nonce }, turnstileToken? }
   Response: { status, data: { transactionReqID } }
5. POST {BACKEND_URL}/auth/akedly/verify   body: { transactionReqID, otp: "123456" }

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

Install: npm install @akedly/shield react-native-webview

Key functions from @akedly/shield:
- solvePow(challenge, difficulty, options?) -> Promise<{ nonce: number }>
  Automatically falls back to batched main-thread in RN (no Worker).
- getTurnstileToken() is browser-only, NOT available in RN.
  Instead, use a hidden WebView: <WebView source={{ uri: `https://turnstile.akedly.io?siteKey=${siteKey}` }} onMessage={e => token = e.nativeEvent.data} />

## Requirements

Please generate a complete integration with:
- React Native component with full OTP flow that ONLY talks to my backend
- Hidden WebView for Turnstile when required
- solvePow from @akedly/shield for PoW
- Error handling and loading states (ActivityIndicator)
- Phone number input and OTP verification
- A top-level `const BACKEND_URL = 'https://yourapp.com';` the user can change
- StyleSheet for clean, mobile-friendly UI
- Works with both Expo and bare React Native
- No APIKey and no pipelineID anywhere in the RN code

Customizing the Prompt

Add any of these to the end of the prompt to tailor the output:

  • Framework: "I'm using Next.js App Router with TypeScript" or "I'm using Expo with React Navigation"
  • State management: "Use Zustand for state" or "Use Redux Toolkit"
  • Styling: "Use Tailwind CSS" or "Use styled-components" or "Use NativeWind"
  • Auth flow: "After OTP verification, create a JWT session" or "Store the session in SecureStore"
  • Error handling: "Show toast notifications for errors" or "Use react-hot-toast"

Was this page helpful?