Error when calling login: Malformed calls from JS: field sizes are different

[joranb]

Hi,
I just wonder if there are some compatibility issues with newer versions of expo/react native, I now run expo v 43.0.1 and react-native v 0.64.2 and your example gives this error:

[Unhandled promise rejection: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:147:8 in nonPromiseMethodWrapper
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:105:13 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-web-browser/build/WebBrowser.js:128:23 in openBrowserAsync
at node_modules/expo-web-browser/build/WebBrowser.js:113:7 in openBrowserAsync
at node_modules/expo-web-browser/build/WebBrowser.js:297:42 in _openBrowserAndWaitAndroidAsync
at node_modules/expo-web-browser/build/WebBrowser.js:289:0 in _openBrowserAndWaitAndroidAsync
at node_modules/expo-web-browser/build/WebBrowser.js:322:47 in _openAuthSessionPolyfillAsync
at node_modules/expo-web-browser/build/WebBrowser.js:312:0 in _openAuthSessionPolyfillAsync
at node_modules/expo-web-browser/build/WebBrowser.js:205:44 in openAuthSessionAsync
at node_modules/expo-web-browser/build/WebBrowser.js:194:7 in openAuthSessionAsync
at node_modules/expo-auth-session/build/AuthRequest.js:123:27 in promptAsync
at node_modules/expo-auth-session/build/AuthRequest.js:90:4 in promptAsync
at node_modules/expo-auth-session/build/AuthRequestHooks.js:73:29 in useCallback$argument_0
at node_modules/expo-auth-session/build/AuthRequestHooks.js:61:36 in useCallback$argument_0
at node_modules/expo-keycloak-auth/src/KeycloakProvider.js:44:22 in useCallback$argument_0
at node_modules/react-native/Libraries/Pressability/Pressability.js:697:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:634:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:528:8 in responderEventHandlers.onResponderRelease

It happens when clicking the login button, when the login function gets called. I could not find any typings so just created a typings folder with expo-keycloak-auth folder with index.d.ts stating declare module '*;

[Slayug]

You could simply use require way to import it:

const keycloak = require("expo-keycloak-auth");
const KeycloakProvider = keycloak.KeycloakProvider;

It works for me, even if I am blocked later, everytime I click on Login, I have a new Login popup.

[joranb]

I don't get that error when I run my app on the web. Logging in just redirects back to the app login page inside the external browser window (just showing me the login button again, and isLoggedIn returns false, even if I can see I have an active session due to the login inside the Keycloak console). But that is if I run it in the browser (for web), for Android on the other hand I don't reach the Keycloak login page at all. If I click on login calling the login function the emulator shows the error:
Possible Unhandled Promise Rejection(id: 0)

The terminal (expo start) error on this error message:
[Unhandled promise rejection: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.]

[mihristov]

this commit made the issue. Could you have a look @rubhiauliatirta ?

[nikolay-slavov]

Hi there, I have the same issue but only when I run my app on Android and after login function call. For iOS there is no problem.
Did you find solution?

[mihristov]

@nikolay-slavov you better write your authentication logic yourself. Have a look at KeycloakProvider.js. It's a matter of calling 3 expo methods :)

[peadarkda]

I encountered this when following the example in the docs:

const { isLoggedIn, login } = useKeycloak();
  if (!isLoggedIn)
    return (
      <View style={{ margin: 24 }}>
        <Button onPress={login} title="Login" />
      </View>
    );

To resolve this I updated the login invocation to be explicitly called with no parameters:

<Button onPress={() => login()} title="Login" />

I assume the arguments provided by onPress are incompatible with the login function