CODEWITHSUNDEEP
angularcordovaionic-frameworkinappbrowsercapacitor
vitonimal
vitonimal

Reputation: 463

oidc-client ionic 4 : InAppBrowser shows app in system browser instead of inside the application

I have been working on migrating a pretty big app from ionic 3 + cordova to ionic 4 + capacitor.

We are using IdentityServer4, so I use the npm package oidc-client in order to show a login popup. However, instead of showing up inside the application as it was back when the app was powered by ionic 3, the login page now shows up in the system's browser.

After reading the entire source code, I realized that the package was, by default, using an in app browser and not the system's browser. The weird thing is that I never told InAppBrowser to remain in system mode or never configured the package's settings to use the system's browser...

Here is the authentication code. I am not the author, but I did test this code on ionic 3 and it worked perfectly.

public startAuthentication() {
if (this.app.isApp()) {
 this.manager.signinPopup().then((user) => {
   this.setUserInfo(user);
 }).catch((e) => {
   console.log(e);
 });
} else {
  return this.manager.signinRedirect();
}

}

Here is my AppModule file

@NgModule({
  declarations: [
    AppComponent,
    VideoChatComponent,
  ],
  imports: [
    CommonModule,
    WorkOrderPageModule,
    DemoPageModule,
    BrowserModule,
    AccuvPageModule,
    AboutPageModule,
    HomePageModule,
    FormsModule,
    IonicModule.forRoot(),
    CoreModule,
    // ReceiveMaterialsPageModule,
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    // IonicAudioModule.forRoot((audioProviderFactory)),
    // PowerBIModule.forRoot(),
    // // AudioNoteModule,
    // SpeechToTextModule,
    // LazyLoadImageModule,
    // DailyFieldReportPageModule,
    // DailyVehicleInspectionPageModule,
    // WorkOrderCONModule,
    // WorkOrderOFModule,
    // DashboardPageModule,
    // PoWorkflowApprovalsPageModule,
    // VideoQaModule,
    // WarehouseCheckInPageModule,
    // ChatEnginePageModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    // AppComponent,
    // MainComponent,
    // HomePage,
    // AboutPage,
    // AccuvPage,
    // WorkOrderPage,
    // ReceiveMaterialsPage,
    // DemoPage
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    // IonicAudioModule,
    HttpClient,
    Diagnostic,
    LocationAccuracy,
    ScreenOrientation,
    IonicStorageModule,
    AppCenterAnalytics,
    AndroidPermissions,
    VideoCapturePlus,
    LocalNotifications,
    InAppBrowser,
    // IonicModule
  ]
})
export class AppModule { }

Note that a lot of modules and services are commented since I am gradually integrating them into the new application.

I tried to replace the startAuthentication method to a simple InAppBrowser create() method with the '_blank' target and it worked as expected.

I was wondering if anyone could understand why, given that the plugin works and that the InAppBrowser seems correctly injected, I would see the popup in the system's browser.

Here is the UserManagerSettings Object:

  private _getClientSettings(): UserManagerSettings {
    return {
      authority: this.app.config.identityServerURL,
      checkSessionInterval: 10000000,
      client_id: this.app.config.clientId,
      filterProtocolClaims: this.app.config.filterProtocolClaims,
      iframeNavigator: new CordovaIFrameNavigator(),
      loadUserInfo: this.app.config.loadUserInfo,
      monitorSession: false,
      popupNavigator: new CordovaPopupNavigator(),
      post_logout_redirect_uri: this.app.config.postLogoutRedirectURI,
      redirect_uri: this.app.config.redirectURI,
      response_type: this.app.config.responseType,
      scope: this.app.config.scope
    };
  }

}

I also tried to explicitly set the popupWindowTarget to '_blank', but it did not work.

Thank you for reading my question :)

Upvotes: 1

Views: 1991

Answers (1)

vitonimal
vitonimal

Reputation: 463

Turns out the plugin was incompatible! I am now using angular-auth-oidc-client and it works. However, I am having trouvle with redirect uris (localhost:3000 or even a custom url scheme).

I will open another question for this subject, since capacitor's server seems to be running on capacitor://localhost.

UPDATE: the plugin was not incompatible. The platform plugin check (platform.is(xxx) was returning false. That being said, the signin REDIRECT was executed instead of the SIGNIN POPUP.

I then made sure to check for platform.is(‘cordova’) instead of cordova.is(‘ios’) that was not working on my ipad.

Sorry for bad format. I am on my phone.

Make sure that the signin popup function is triggered.

Pseudo:

if(platform.is(cordova)) oidc.signinpopup() else oidc.signinRedirect()

Peace

Use platform.is(capacitor) if using capacitor

Upvotes: 0

Related Questions