Opening another app with React Ionic on IOS

Question

I have a problem with opening another app with React Ionic on IOS using Capacitor. canOpenUrl always returns true, even when the app (bankid) is not installed. When I run openUrl nothing happens.

//First i import capacitor
import {Capacitor} from '@capacitor/core';

const Login: React.FC = () => {
  const openBankID = async () => {
    const iosURL = 'bankid://app.bankid.com/?autostarttoken=${token}&redirect=app://'

    const res = await Capacitor.Plugins?.App.canOpenUrl({ url: iosURL });
    if (res != undefined) {
      await Capacitor.Plugins?.App.openUrl({ url: iosURL })

    } else {
      alert("Can't open the application");
    }

  }

  return (
    <IonPage className="LoginPage">
      <IonContent fullscreen className="LoginPage">
       <IonCol size="12">
                <IonButton
                  onClick={() => {
                    openBankID();


                  }} expand="block" disabled={false}>
                  Logga in med BankID
          </IonButton>
              </IonCol>

      </IonContent>
    </IonPage>
   );
};

export default Login;

)

I've also added the app I'm to open in info.plist

<key>LSApplicationQueriesSchemes</key>
        <array>
            <string>bankid</string>
            <string>bankid://</string>
            <string>bankid://*</string>
        </array>

score 0 · Answer 1 · answered Apr 30 '21 at 20:17

The constant res will always be an object so it won't be undefined. From the docs, the signature of canOpenUrl is:

canOpenUrl(options: { url: string; }) => Promise<{ value: boolean; }>

If you amend your condition from if (res != undefined) to if (res.value === true), it should work.

Opening another app with React Ionic on IOS

1 Answers1