Capacitor + Ionic4 : customurlscheme not redirecting to app from the browser app

[vitonimal]

Hello! I am working on a newly upgrader ionic 4 + capacitor app (I was using Ionic 3 and Cordova).

I am using the Cordova-plugin-customurlscheme plugin in order to redirect the user to the app after he/she logged in from a sso page in the browser (will eventually use an in app browser).

I set the custom url scheme to : http://localhost:3000. I did also set the URL_SCHEME variable when I added the plugin.

The url scheme also appears in the Info.plist file. However, when I type localhost:3000 in the browser on my phone, it does not redirect me to the app.

I was wondering if that behaviour was normal at all, or if I needed to show the login page in an in app browser in order to have the customer scheme working.

The plugin entry in the package.json is the following:

"cordova-plugin-customurlscheme": {
        "URL_SCHEME": "http://localhost:3000"
      }

and here is the setup in my info.plist:

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>http://localhost:3000</string>
			</array>
		</dict>
	</array>

I am using the oidc-client nom package for authentication and I did set the redirect url to localhost:3000.

[jcesarmobile]

you are providing an url, not a custom scheme, a custom scheme looks like “mycustomurlscheme://”

[vitonimal]

Oh it is weird that it worked before the update. I will need to do some configuration in identityserver to add this scheme. So once the url scheme is set I can go to a browser on my phone, enter myapp:// and I will be redirected to my app?

[jcesarmobile]

yeah, if you have configured your app to open from myapp://, entering the url in a browser should open your app

[vitonimal]

If I am using capacitor do I need to specify it in the capacitor config file? I was using cordova before. I specified the custom url scheme in the package.json.

In the Xcode project, I made sure that the custom url scheme was accuvapp:// and Safari still isn’t able to load anything saying that the address is invalid. When I run npx cap add ios I get a warning related to custom url scheme

I then went to the Info.plist and added

My capacitor config file:

{
  "appId": "com.app.app",
  "appName": "AccuV",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "AndroidLaunchMode": "singleTask",
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "android-compileSdkVersion": "28",
      "android-targetSdkVersion": "28",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "SplashScreenDelay": "30000",
      "AndroidPersistentFileLocation": "Compatibility",
      "APPCENTER_ANALYTICS_ENABLE_IN_JS": "false",
      "APP_SECRET": "XXXXXXXXXXXXXXX",
      "windows-target-version": "10.0",
      "URL_SCHEME": "accuvapp://"
    }
  }
}

Xcode:

Am I missing something?

[vitonimal]

I got it! I wrote accuvapp:// with the :// !!! I needed to only write accuvapp! Thanks!

[chelmbold]

Hey how did u get it work ?

we are using Keycloak SSO and after i clicked on Login it should redirect to the app but it just do nothing… if i click again then its open an empty page cause i already logged in but i doesnt get redirected to the app.

my url_scheme is correct

in android is works

[daudihus]

@chelmbold how did you get it to work in Android? I’m using Identity Server and following this demo https://github.com/wi3land/ionic-appauth-capacitor-demo
I’ll add the custom url plugin and give it a try

[nirjapatel10]

Can you let me know how you were able to direct back to the app using OIDC client in ionic 4 cordova app. I Am stuck in it, I am able to open the app through custom URL scheme but nothing happens after that.

[gsoulie]

Hi all, @vitonimal

I have a similar issue, my android app using SSO authentication, based on oidc-client angular lib.

I am not able to find the right configuration on my app (ionic 5 + capacitor) and on my server to redirect user on my android/ios app after logged in on web browser.

I think that is a problem of scheme or URI because when i run my app with ionic serve in localhost, my authentication is working. But when running it on real device, my redirection failed from my SSO page in browser toward my app.

I tried a lot of things but i’m lost…

Here is my is4 configuration file for redirectURI :

export const authConfig: AuthConfig = {
  issuer: environment.authIS4Api,
  clientId: environment.authIS4clientId,
  responseType: 'code',
  redirectUri: window.location.origin + '/home',
  postLogoutRedirectUri: window.location.origin + '/home',
  scope: environment.authIS4scope,
  useSilentRefresh: true,
  silentRefreshTimeout: 20000,
  timeoutFactor: 0.75,
  sessionChecksEnabled: true,
  showDebugInformation: true,
  clearHashAfterLogin: false,
  nonceStateSeparator : 'semicolon'
};

capacitor.config.json

"server": {
    "iosScheme": "ionic",
    "hostname": "com.myapp.mybundle",
  },

android.manifest.xml

 <intent-filter>
            <data android:scheme="@string/custom_url_scheme"/>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
        </intent-filter>

strings.xml

<resources>
    <string name="app_name">myappname</string>
    <string name="title_activity_main">myappname</string>
    <string name="package_name">com.myapp.mybundle</string>
    <string name="custom_url_scheme">com.myapp.mybundle</string>
</resources>

My SSO accepted routes (i tried a ton of routes)

com.myapp.mybundle://
http://com.myapp.mybundle
com.myapp.mybundle://home
...

Or do i need to user InAppBrowser plugin, deeplink or else ?

If someone got an idea thanks !

[shadabumer]

Hi All,

@gsoulie

Did you solve the issue, I’m also stuck in a similar situation.
In my case, I’m using ionic 4 + Cordova with angular-oauth2-oidc library.

export const authConfig: AuthConfig = {
    issuer: environment.oidc.issuer,
    clientId: environment.oidc.clientId,
    responseType: environment.oidc.responseType,
    // redirectUri: window.location.origin, --> for web app
    redirectUri: "com.myapp.mybundle",

    // postLogoutRedirectUri: window.location.origin, --> for web app
    postLogoutRedirectUri: "com.myapp.mybundle",
    // silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
    silentRefreshRedirectUri: "com.myapp.mybundle" + '/silent-refresh.html',
    scope: environment.oidc.scope, // Ask offline_access to support refresh token refreshes
    useSilentRefresh: true, // Needed for Code Flow to suggest using iframe-based refreshes
    silentRefreshTimeout: 30000, // For faster testing
    timeoutFactor: environment.oidc.timeOutFactor, // For faster testing keep it like 0.25
    sessionChecksEnabled: false,
    showDebugInformation: true, // Also requires enabling "Verbose" level in devtools
    clearHashAfterLogin: false, // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/457#issuecomment-431807040,
    nonceStateSeparator: 'semicolon', // Real semicolon gets mangled by IdentityServer's URI encoding,
    dummyClientSecret: environment.oidc.clientSecret,
}

Once I click on login the app is not redirecting to other pages.

[bmadhan90]

Hi all,

Any one solve the issue, I’m also stuck in a similar issue.
I’m using ionic + Cordova urlscheme with angular-oidc-auth-client library.

For me working in android. IOS after login not redirecting to app. Second time click blank page displays.

[richardshergold]

@bmadhan90 I have a similar issue. Ionic 6 app (Capacitor but still supporting some old Cordova plugins). I’m having trouble with callback from an Okta authentication call and I think it’s to do with this custom url scheme. Funnily enough our iOS app works and it’s Android that’s failing. What was your setup in the end? I have a discussion about this in the Okta forum.