Crash android with customer-sdk

[Kenedi231]

Hello. I use
"@livechat/customer-auth": "0.4.0-alpha.6" and
"@livechat/customer-sdk": "2.0.3".
And I getting crash on android with following an error:

Code:

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { AuthWebView } from "@livechat/customer-auth";
import { init } from "@livechat/customer-sdk";

export default class App extends React.Component {
  componentDidMount() {
    const customerSDK = init({
      licenseId: ...,
      clientId: '...',
      redirectUri: '...'
    });
    customerSDK.on("connected", payload => {
      console.log("connected");
      console.log(payload.chatsSummary);
      console.log(payload.totalChats);
    });
  }
  render() {
    return (
      <>
        <AuthWebView key="auth" />
      </>
    );
  }
}

React-Native: 0.60.0

Why is this happening?

[roris]

I also had this issue on android.

[joaohedy]

For me this was happening in a slightly different way.

[Thu Nov 26 2020 14:38:02.104]  ERROR    TypeError: undefined is not an object (evaluating '_ref.callback')

This happens, in my case, when initializing with an invalid license (expired).

I am using @livechat/customer-auth and by evaluating the code there I could see that the code is not considering differences of OS.

It seems that _ref exists in iOS but not in Android, after [Customer SDK] error on AUTHENTICATION.

given the code in customer-auth.native.js on line 221, I have updated it
From:

callback = _ref.callback;

To:

callback = _ref ? _ref.callback : function() {};

The crash does not happen anymore and the behaviour is the same as in iOS.
Not a permanent solution and, for sure, not the right approach (since its changing an external library code)

I hope this can help.
And please post a better solution if you have one.

I will continue to work on this and provide updates if I find a better way to solve this.

[DomBart]

The error is caused by the initial render of AuthWebView component as it fails to fetch accessToken on the first attempt. I am not sure why it behaves in such a way, but it then tries to initialise a license with undefined values.

I came up with a workaround that can be used as a permanent solution. Firstly you want to call customer-sdk init with autoConnect property set to false. After initalising the SDK you want to check if the accessToken you received from the server is defined, if not force rerender the AuthWebView component (it can be done by passing a state value as a component key and then changing the state inside the if statement).

<AuthWebView key={this.state.authState} />

Once you rerender the component call SDK init again and this time you should recieve a defined access_token value.

initCustomerSdk({ licenseId, clientId, redirectUri }) {
		const config = {
			licenseId,
			clientId,
			redirectUri,
			autoConnect: false,
                };
                const customerSDK = init(config);
		customerSDK.auth.getToken().then((res) => {
			if (!res.accessToken) {
				this.setState({
					authState: "init",
				});
				this.initCustomerSdk({
					licenseId,
					clientId,
					redirectUri,
				});
			} else customerSDK.connect();
}