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.
How to Use
- Copy the prompt from your platform tab below.
- Paste it into your AI assistant.
- Optionally add context about your specific project (framework, state management, etc.).
- The LLM will generate a complete, working integration.
Backend-first architecture
Every prompt below tells the LLM to generate frontend code that calls your own backend (/auth/akedly/challenge, /auth/akedly/send, /auth/akedly/verify) — never Akedly directly. Each prompt also includes a ready-to-copy Node.js/Express backend snippet you can drop in if you don't already have one.
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"