Open Closed

React Native Auth flow problem #9466


User avatar
0
ugurkepler created

My react native expo app with abp oAuth flow does not redirect to login page, and I get:

400 Error An internal error occurred during your request!

ERROR.

my request Url is:

Auth request:', { url: 'https://xxx.com/connect/authorize?code_challenge=kyP5cKPn2PRk-PZ5pMrpzVKrkl4rCuAQTCs84JrVAfE&code_challenge_method=S256&redirect_uri=portalsystem%3A%2F%2F&client_id=PortalSystem_Mobile&response_type=code&state=v5bbNtueBe&scope=offline_access+PortalSystem', }

My redirect uri in DB matches url redirect uri. When I try to login using expo go, it works perfectly fine. But it doesnt work when I create apk using npx eas build --profile preview --platform android. Any help would be appreciated.

My other files are as following:

app.json:

{ "expo": { "name": "pisagorops-app", "slug": "pisagorops-app", "owner": "yavuzz", "version": "1.0.0", "orientation": "portrait", "scheme": "portalsystem", "newArchEnabled": true, "splash": { "image": "./assets/pisagor-logo-mainpage.png", "resizeMode": "cover", "backgroundColor": "#201b48" }, "updates": { "fallbackToCacheTimeout": 0, "url": "https://u.expo.dev/bb6ce82f-3315-4f74-82ae-38fdc8028583" }, "assetBundlePatterns": [ "/*" ], "ios": { "supportsTablet": true, "bundleIdentifier": "com.pisagor.PortalSystem", "buildNumber": "1.0.0", "infoPlist": { "NSCameraUsageDescription": "This app uses the camera to scan barcodes on event tickets." } }, "android": { "package": "com.pisagor.PortalSystem", "versionCode": 1, "adaptiveIcon": { "foregroundImage": "./assets/pisagorops-icon.png", "backgroundColor": "#FFFFFF" }, "permissions": [ "android.permission.RECORD_AUDIO", "android.permission.RECORD_AUDIO" ] }, "web": { "favicon": "./assets/pisagorops-icon.png" }, "plugins": [ [ "expo-image-picker", { "photosPermission": "The app accesses your photos to let you share them with your friends." } ] ], "extra": { "eas": { "projectId": "59251175-b5fd-49bd-bea8-448ac361c258" } }, "runtimeVersion": { "policy": "appVersion" } } }

enviroment.ts:

import { Environment } from '@portal-system/models';

// const yourIP = '192.168.57.25'; // http://10.0.2.2:44311/ // const yourIP = '192.168.1.137'; TEST API

const yourIP = 'xxx.com'; // See the docs https://docs.abp.io/en/abp/latest/Getting-Started-React-Native?Tiered=No const apiUrl = 'https://xxx.com'; const dev = { apiUrl: 'https://xxx.com', appUrl: exp://${yourIP}:19000, oAuthConfig: { issuer: apiUrl, // https://xxx.com/ gibi gir clientId: 'PortalSystem_Mobile', scope: 'offline_access PortalSystem', }, localization: { defaultResourceName: 'PortalSystem', }, } as Environment;

const preview = { apiUrl: 'https://xxx.com', appUrl: exp://${yourIP}:19000, oAuthConfig: { issuer: 'https://xxx.com', clientId: 'PortalSystem_Mobile', scope: 'offline_access PortalSystem', }, localization: { defaultResourceName: 'PortalSystem', }, } as Environment;

const prod = { apiUrl: 'https://xxx.com', appUrl: exp://${yourIP}:19000, oAuthConfig: { issuer: 'https://xxx.com', clientId: 'PortalSystem_Mobile', scope: 'offline_access PortalSystem', }, localization: { defaultResourceName: 'PortalSystem', }, } as Environment;

const ENV = { dev, preview, prod };

export const getEnvVars = () => { // eslint-disable-next-line no-undef if (DEV) { return ENV.dev; }

if (process.env.EAS_BUILD_PROFILE === 'preview') { return ENV.preview; }

return ENV.prod; };


4 Answer(s)
  • User Avatar
    -1
    AI-Bot created
    Support Team ABP Agent
    • The issue you are experiencing is a common one when using custom URI schemes (like portalsystem://) for OAuth redirect URIs in ABP with React Native/Expo, especially when moving from Expo Go (development) to a built APK (production). In Expo Go, deep linking is handled differently than in a standalone build, which can cause redirect issues.

    • Here are the steps to resolve the problem:

    1. Check Redirect URI Registration in ABP/IdentityServer:

      • Ensure that the redirect URI registered in your ABP IdentityServer/OpenIddict client matches exactly the URI used in your app (including the scheme and trailing slashes).
      • For Expo/React Native, the redirect URI should be in the form: portalsystem://
      • In your database, the client should have this exact redirect URI (no http/https, just the scheme).
    2. AndroidManifest Configuration:

      • In a built APK, Android must be configured to handle your custom URI scheme. In Expo managed workflow, this is handled via the scheme property in app.json (which you have set to portalsystem).
      • If you are using EAS Build, ensure you are not missing any required configuration for deep linking. For bare workflow, you would need to add an intent filter in AndroidManifest.xml, but for managed workflow, Expo handles this if the scheme is set.
    3. App.json/Build Configuration:

      • Your app.json looks correct with "scheme": "portalsystem".
      • Make sure you do not have typos or extra slashes in the redirect URI in both your app and ABP client config.
    4. Expo AuthSession/Redirect URI:

      • When using Expo AuthSession or similar, use AuthSession.makeRedirectUri({ useProxy: false }) to generate the redirect URI. This should match portalsystem://.
      • Example:
        const redirectUri = AuthSession.makeRedirectUri({ useProxy: false });
        // Should output: portalsystem://
        
    5. Production Build Differences:

      • In Expo Go, the redirect URI is handled by Expo’s proxy, but in a standalone build, it must be handled by your app directly.
      • If the redirect URI is not handled, or if the app is not opened when the OAuth server redirects, you will get a 400 error.
    6. Check for Typos and Consistency:

      • Double-check that the redirect URI in your ABP client registration, your app.json scheme, and the URI used in your OAuth request are all exactly the same.
    7. Testing:

      • Uninstall any previous versions of the app from your device before installing the new APK.
      • Use adb logcat (for Android) to check if the intent is being received by your app.
    8. ABP/IdentityServer Logs:

      • Check the ABP AuthServer logs for the exact error message. If it says the redirect_uri is invalid, it means there is a mismatch.
    9. Expo Documentation:

      • Refer to the official ABP and Expo documentation for React Native OAuth integration:
        • https://docs.abp.io/en/abp/latest/Getting-Started-React-Native?Tiered=No
        • https://abp.io/community/articles/adzzfnji

    If you follow these steps and ensure all redirect URIs and schemes are consistent, the OAuth flow should work in your built APK as it does in Expo Go.

    Sources:

    • https://docs.abp.io/en/abp/latest/Getting-Started-React-Native?Tiered=No
    • https://abp.io/community/articles/adzzfnji

    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  • User Avatar
    0
    ugurkepler created

    Unfortunately, I tried what was stated here but it didn't work: the server log is as follows:

    [INF] The authorization request was successfully extracted: { "code_challenge": "kkiB6iXdmWKYxGOagIAzfhJVSuPiLeoqv3aNK_m3N_E", "code_challenge_method": "S256", "redirect_uri": "portalsystem://", "client_id": "PortalSystem_Mobile", "response_type": "code", "state": "0NPRzIbaCF", "scope": "offline_access PortalSystem" }. [INF] Client validation failed because 'portalsystem://' was not a valid redirect_uri for PortalSystem_Mobile. [INF] The authorization request was rejected because the redirect_uri was invalid: 'portalsystem://'.

    The definition named PortalSystem_Mobile that I added from the applications section did not work. I added it to appsetiing.json as follows. I was able to run it locally but I am having problems in the production environment.

    "IdentityServer": { "Clients": { "PortalSystem_Mobile": { "ClientId": "PortalSystem_Mobile", "ClientName": "PortalSystem Mobile App", "AllowedGrantTypes": [ "authorization_code" ], "RequireClientSecret": false, "RequirePkce": true, "RedirectUris": [ "portalsystem://" ], "PostLogoutRedirectUris": [ "portalsystem://" ], "AllowedScopes": [ "openid", "profile", "email", "offline_access", "PortalSystem" ], "AllowOfflineAccess": true, "AllowedCorsOrigins": ["portalsystem://"], "AccessTokenLifetime": 3600 } }, "ApiResources": { "PortalSystem": { "Scopes": [ "PortalSystem" ], "UserClaims": [ "role", "email", "name" ] } }, "ApiScopes": { "PortalSystem": { "Description": "Portal system API access" } } },

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Client validation failed because 'portalsystem://' was not a valid redirect_uri for PortalSystem_Mobile.

    Have you added the portalsystem:// as redirect_uri of PortalSystem_Mobile?

    You can check the OpenIddictApplications table.

    Thanks.

  • User Avatar
    0
    alper created
    Support Team Director

    @ugur did the @maliming's answer solve your problem? if yes could you please mark the answer as solution

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on July 09, 2025, 06:20