This document explains how to safely embed the App-Learning Academy inside a mobile app WebView. It covers identity, transport & navigation controls, the message bridge, storage/cookies, and a final go-live checklist.

1) Unique User Identification (JWT)

Goal: Load the correct user progress without exposing User ID in the URL.

How it works: Your backend creates a short-lived JWT identifying the user and passes it to the WebView via HTTP headers (not query params).

Header contract (required):

• token: a JWT you generate per session/user.

Example (React Native):

<WebView
  source={{
    uri: `https:/your-academy-urll/${locale}/inapp`,
    headers: {
      token: jwtToken,
      [...]
    },
  }}
/>

2) Trusted Origins & Navigation Controls

Goal: Only load academy pages; open everything else in the system browser.

What to do:

• Allowlist hosts you intend to load in-WebView.
• Block non-HTTPS and unexpected hosts.
• Deflect external links to the system browser.

Example (React Native):

const ALLOWED_HOSTS = ["app.simple-bitcoin.app", "auth-sba.app-learning.com"];

onShouldStartLoadWithRequest={(req) => {
  try {
    const u = new URL(req.url);
    if (u.protocol !== "https:") return false;
    if (!ALLOWED_HOSTS.includes(u.host)) {
      Linking.openURL(u.toString()); // system browser
      return false;
    }
    return true;
  } catch {
    return false;
  }
}}