Security

This guide explains how @dpage-ai/react-native-dpage authenticates with the API and security best practices.

API Token Authentication

Every request sent by the SDK includes an Authorization header with a Bearer token:

Text

Authorization: Bearer {API_TOKEN}

Configuring the SDK

Set the token at app start:

TSX

import { initDPage } from '@dpage-ai/react-native-dpage';

initDPage({
  projectId: 'acme-prod',
  apiToken: 'dpage_live_a1b2c3d4e5f6',
});

The token can be rotated at any time; the next request will pick up the new value.

Token Management

Generating Tokens

Generate secure tokens using a cryptographically secure random generator:

Terminal

# Using Node.js
node -e "console.log('dpage_live_' + require('crypto').randomBytes(16).toString('hex'))"

Token Rotation

Generate a new token

Create a new secure token using the command above.

Add to backend allow-list

Add the new token to your backend's configuration.

Update app configuration

Update initDPage or rebuild your app with the new token.

Monitor usage

Watch logs to ensure old token usage drops to zero.

Remove old token

Remove the old token from your backend's allow-list.

Supplying API Token

Option 1: Expo Configuration (Recommended)

app.json

{
  "expo": {
    "extra": {
      "dpage": {
        "projectId": "acme-prod",
        "apiToken": "dpage_live_a1b2c3d4e5f6"
      }
    }
  }
}

Option 2: Runtime Configuration

TSX

import { initDPage } from '@dpage-ai/react-native-dpage';

initDPage({
  projectId: 'acme-prod',
  apiToken: 'dpage_live_a1b2c3d4e5f6',
});

Runtime configuration takes precedence over Expo configuration, making it easy to switch between environments.

Backend Validation

Example pseudo-code for enforcing the token on your backend:

TypeScript

const validTokens = new Set(process.env.DPAGE_TOKENS.split(','));

export function validateDPageRequest(req: Request) {
  const authHeader = req.headers.get('authorization');

  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    throw new Error('Missing or invalid Authorization header');
  }

  const token = authHeader.substring(7); // Remove 'Bearer ' prefix

  if (!validTokens.has(token)) {
    throw new Error('Invalid API token');
  }
}

Best Practices

🔐

Never hardcode tokens

Use environment variables or secure configuration management.

🔄

Rotate tokens regularly

Implement a token rotation schedule (e.g., every 90 days).

📊

Monitor for anomalies

Set up alerts for unusual token usage patterns.

💪

Use strong tokens

Minimum 32 characters of random data.

🌍

Separate environments

Use different tokens for dev, staging, and production.

🚦

Implement rate limiting

Prevent token abuse with per-token rate limits on your backend.

Security Testing Checklist

1. Token Validation

Use a proxy tool (Charles, Proxyman, mitmproxy) to inspect requests
Confirm the Authorization: Bearer {token} header is present
Verify your backend correctly validates the token

2. Invalid Token Handling

Test with an invalid token to ensure backend returns HTTP 401/403
Verify the app handles authentication errors gracefully

3. Token Rotation

Generate a new token and update the app configuration
Remove the old token from your backend allow-list
Confirm requests with old token are rejected
Verify requests with new token succeed

Important

Dynamic components execute code from your server. Ensure:

API endpoint uses HTTPS
Only trusted sources provide templates
Templates are validated before caching
Consider code signing for production

Troubleshooting

Symptom	Likely Cause	Fix
HTTP 401/403 responses	Missing or invalid token	Verify `apiToken` is set correctly
Token not in headers	Custom fetch overwrote headers	Merge headers in `requestTransform`
Requests failing after deploy	Token not updated in build	Update token via config and rebuild