使用 ReactNativeKeycloak 应用程序内浏览器选项更改 Safari 的显示

Question

I am trying to change the display of the following login with keycloak page. https://imgur.com/a/X18bmgC This shows up with Safari when starting the app.

The problem I have is that the user has to scroll to see the " New user " part of my WebView. And this is a problem. I'd like to change the display of my WebView to make it look like this if possible : https://imgur.com/a/DYfpkRS Here I had to manually unzoom the page.

<ReactNativeKeycloakProvider
      authClient={keycloak}
      onEvent={onEvent}
      initOptions={{
        redirectUri: 'mobile://presentation',
        inAppBrowserOptions: {
          ephemeralWebSession: true,
          modalEnabled: true,
        },
      }}>

This is the code displaying the Keycloak Login page in Safari ( https://github.com/react-keycloak/react-native-keycloak ). I've checked the different InAppBrowser options here : https://github.com/proyecto26/react-native-inappbrowser#ios-options

When changing the values of each of these options, I can see no differences on the iPhone I'm using. When I change 'ephemeralWebSession' from true to false, I can see the difference. But every other option makes no difference for me. I tried to change 'modalTransitionStyle', 'modalPresentationStyle', 'readerMode' and 'preferredBarTintColor' values, but nothing shows different on the WebView.

I don't understand what I should change to get my WebView to change aswell.

Answer 1

I realize this is about 6 months old as I'm writing this answer, but I had this same issue and came across this in a search.

There is an open issue with InAppBrowser that addresses this: https://github.com/proyecto26/react-native-inappbrowser/issues/292

In short, RN Keycloak calls the InAppBrowser openAuth method to start an ASWebAuthenticationSession instead of a typical web session with the open method. ASWebAuthenticationSession is not customizable, per Apple.

So, the choice is to modify the RN Keycloak package to use the open method, or to do some overriding trickery with Objective-C as found here: https://msolarana.netlify.app/2021/01/06/fixing-aswebauthenticationsession-presentation/