将集成Okta验证的ReactJS Web应用通过CapacitorJS转为Android APP时出现redirect_uri无效错误

API 探路者

2026-4-30

Fixing Okta 'invalid_request' Redirect URI Error in Capacitor Android App

Let’s break down why your React + Okta app works perfectly on web but throws errors in the Capacitor-built Android app, and walk through the fixes step by step:

The Root Cause

The error message spells it out clearly: your app is sending http://localhost/login/callback as the redirect URI to Okta, but this isn’t recognized as a valid redirect for your Android client. Web apps rely on localhost for local development, but Capacitor Android apps run in a webview with a custom URI scheme (usually capacitor://localhost by default), not the standard HTTP localhost you use for web.

Step-by-Step Solutions

1. Add Capacitor-Specific Redirect URI to Okta

Head to your Okta admin console, open your OIDC client settings, and add the Capacitor-compatible redirect URI to the Login redirect URIs list:

Default Capacitor scheme: capacitor://localhost/login/callback
If you customized your app’s scheme in capacitor.config.ts, use that instead (e.g., myapp://login/callback)

Don’t forget to save the settings after adding this URI.

2. Dynamically Adjust Redirect URI in Your React App

Your React app needs to use different redirect URIs depending on whether it’s running on web or Android. Use Capacitor’s Platform API to detect the environment and tweak your Okta config:

import { Platform } from '@capacitor/core';

const oktaConfig = {
  clientId: '0oa1mwa34crTomUOH5d7',
  issuer: 'https://dev-26880336.okta.com/oauth2/default',
  redirectUri: Platform.is('android') 
    ? 'capacitor://localhost/login/callback' 
    : 'http://localhost/login/callback',
  // remaining Okta configs...
};

3. Verify Capacitor Android Intent Filter

Check your android/app/src/main/AndroidManifest.xml to ensure the intent filter for handling redirects is correctly set up. It should look like this:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="capacitor" android:host="localhost" android:path="/login/callback" />
</intent-filter>

If you used a custom scheme, replace capacitor with your scheme name here.

4. Clear Cache and Retest

Okta config changes can take a minute to propagate—wait 30 seconds, then restart your Android app.
Clear the app’s cache/data in the emulator/device settings, then rebuild and re-run from Android Studio to ensure no stale configs are stuck.

5. Double-Check Trusted Origins (Optional)

While the error is specifically about redirect URIs, make sure your Okta client’s Trusted Origins include both your web localhost (e.g., http://localhost:3000) and the Capacitor scheme (capacitor://localhost) to avoid any cross-origin issues.

Why This Works

Capacitor Android apps don’t share the same localhost context as your web dev server—they use a custom URI scheme to handle deep links and authentication redirects within the webview. Okta strictly validates redirect URIs against the list in your client settings, so the web URI won’t work for the Android app until you add the Capacitor-specific one.

内容的提问来源于stack exchange，提问作者Vinay Kumar