React Native API integration: call an AI video API safely

React Native API integration means calling an HTTP API from your app with fetch, which React Native provides. For an API that needs a secret key, such as an AI video API, the app calls your own backend instead, and the backend calls the API with the key, because React Native's docs say never to store sensitive API keys in app code.

The React Native facts below come from its Security and Networking pages, read 2026-09-28. The video API side uses Sume's authentication and video generation docs. Sume has no React Native package; this is plain HTTPS.

How do I call an API in React Native?

With fetch. React Native "provides the Fetch API for your networking needs"; it returns a Promise, and the docs warn to catch its errors, "otherwise they will be dropped silently" (Networking). On iOS, App Transport Security requires HTTPS by default. The app below calls your backend, not the video API, and sends your app's own login token, not a Sume key.

// In the app. No Sume key here: it calls your backend.
export async function startVideo(prompt: string, requestId: string, idToken: string) {
  try {
    const res = await fetch("https://example.com/api/videos", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${idToken}`, // your app's own session token
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ prompt, requestId }),
    });
    if (!res.ok) throw new Error(`Backend answered ${res.status}`);
    const { jobId } = await res.json();
    return jobId as string;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

Where should the API key go in a React Native app?

On a server, never in the app. React Native's security guide says: "Never store sensitive API keys in your app code. Anything included in your code could be accessed in plain text by anyone inspecting the app bundle." It adds that tools like react-native-dotenv and react-native-config "should not be confused with server-side environment variables". Its answer is "an orchestration layer between your app and the resource", such as a serverless function that forwards the request with the key (Security).

Sume's docs say the same from the API side: "Browser and mobile clients should call your backend", and keys don't belong in "mobile apps" (Authentication). A Sume key spends your credits, and there is no browser-safe variant (TypeScript SDK). Where to store API keys covers the server side.

What does each side do?

Split the work so the app only ever talks to you. Your backend should build the Sume request itself from the user's prompt, not forward whatever body the app sends.

How does the app know the video is ready?

Video jobs take time: Sume's docs say "30 seconds to several minutes". Keep the job id in the app so it survives a restart, and poll your own backend on a gentle interval, or send a push when the webhook arrives; Firebase push when a video is ready shows that. Sume makes up to 10 attempts to deliver each webhook, and delivery can still fail, so the backend should also be able to poll the job (Webhooks).

Give the app the public media.sume.com file URL from the job result, not the unsigned_urls entry, which only works with your key. Download a generated video explains the difference.

Is this different in Flutter or other mobile frameworks?

No. Whatever the HTTP client, the rule is the same: the mobile app holds only the user's own session, and the API key stays on a server you control. No-code builders need the same split; FlutterFlow API calls for AI video shows it with FlutterFlow's private API calls.