[Android][Jitsi] Cannot read property 'authorize' / 'prefetchConfiguration' of undefined

Edit : This issue is specific to Jitsi-meet (https://github.com/jitsi/jitsi-meet).

Issue

Hello I’m trying to implement this feature inside a jitsi-meet integration (jitsi-meet fork) but I keep getting the "cannot read property ‘xx’ of undefined, and I don’t understand why…

I tried my config in the example app, and it’s working. I don’t “intercept” the return because I guess the Example app isn’t linked to the domain Keycloak returns the authorization.

At first i called authorize inside a dialog, so I thought maybe something was off with the context. So i replaced my class component with what is in the App.js of the example file (see my file below)

I don’t know if it can be related to my build.gradle ?

Any help would be greatly appreciated ! thanks

My version of RN : 0.61.5-jitsi.1

Here is my file :

import React, { Component, useState, useCallback, useMemo } from 'react';
import type { Dispatch } from 'redux';
import { UIManager, Alert, SafeAreaView, View, StyleSheet, TouchableOpacity, Text } from 'react-native';

import { authorize, prefetchConfiguration } from 'react-native-app-auth';

import { ConfirmDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';

import { cancelWaitForOwner, _openLoginDialog } from '../actions';

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

type State = {
    hasLoggedInOnce: boolean,
    provider: ?string,
    accessToken: ?string,
    accessTokenExpirationDate: ?string,
    refreshToken: ?string
};
/**
 * The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
 */
type Props = {

    /**
     * The name of the conference room (without the domain part).
     */
    _room: string,

    /**
     * Redux store dispatch function.
     */
    dispatch: Dispatch<any>,

    /**
     * Invoked to obtain translated strings.
     */
    t: Function
};

const defaultAuthState = {
    hasLoggedInOnce: false,
    provider: '',
    accessToken: '',
    accessTokenExpirationDate: '',
    refreshToken: ''
};

const configs = {
    keycloak: {
        issuer: 'https://leduff-sso.liksi.io/auth/realms/GLD',
        clientId: 'jitsi',
        redirectUrl: 'com.example',
        additionalParameters: {},
        scopes: ['openid', 'profile'],
        usePKCE: false,
        dangerouslyAllowInsecureHttpRequests: true,
    }
}

const WaitForOwnerDialog = (props) => {
    const { _room: room } = props;
    const [authState, setAuthState] = useState(defaultAuthState);

    React.useEffect(() => {
        console.log("here");
        console.log(configs.keycloak);
        prefetchConfiguration({
            warmAndPrefetchChrome: true,
           ...configs.keycloak
        });
      }, []);

      const handleAuthorize = useCallback(
        async provider => {
          try {
            const config = configs[provider];
            console.log(config);
            const newAuthState = await authorize(config);
            console.log("new auth state: ",newAuthState);
            setAuthState({
              hasLoggedInOnce: true,
              provider: provider,
              ...newAuthState
            });
          } catch (error) {
            console.log("error with login", error);
            Alert.alert('Failed to log in', error.message);
          }
        },
        [authState]
      );

      const handleCancel = () => {
        props.dispatch(cancelWaitForOwner());
      }

      return (
            <View style={styles.box2}>
              {!authState.accessToken ? (
              <>
                <TouchableOpacity
                        activeOpacity={0.8}
                        onPress={handleCancel}
                        style={[styles.buttonBox, { backgroundColor: "#24C2CB" }]}
                    >
                        <Text style={styles.text}>Cancel</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={0.8}
                        onPress={() => handleAuthorize('keycloak')}
                        style={[styles.buttonBox, { backgroundColor: "#EF525B" }]}
                    >
                        <Text style={styles.text}>OK</Text>
                    </TouchableOpacity>
              </>
            ) : null}
                
            </View>
    );
}

const styles = StyleSheet.create({
    text: {
        color: 'white',
    },
    buttonBox: {
        height: 50,
        flex: 1,
        margin: 5,
        alignItems: 'center',
        justifyContent: 'center'
    },
    box2:{
      height:300,
      width:250,
      backgroundColor:'green',
      position: 'absolute',
      top:10,
      left:30
    },
});

/**
 * Maps (parts of) the Redux state to the associated props for the
 * {@code WaitForOwnerDialog} component.
 *
 * @param {Object} state - The Redux state.
 * @private
 * @returns {{
 *     _room: string
 * }}
 */
function _mapStateToProps(state) {
    const { authRequired } = state['features/base/conference'];

    return {
        _room: authRequired && authRequired.getName()
    };
}

export default translate(connect(_mapStateToProps)(WaitForOwnerDialog));

---

Environment

• Your Identity Provider: Keycloak
• Platform that you’re experiencing the issue on: Android
• Are you using Expo? no

[kadikraman]

I’ve never used jitsi, but I found this issue which implies that they’ve disabled autolinking for Android. Could see how the other libraries are linked and try following that pattern for linking the library manually?

It should be something like this:

android/app/build.gradle

   dependencies {
     implementation project(':react-native-app-auth')
   }

android/settings.gradle

 include ':app'
   // must be after `include ':app'`

   include ':react-native-app-auth'
   project(':react-native-app-auth').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-app-auth/android')

android/{...}/MainApplication.java

   import com.rnappauth.RNAppAuthPackage;

   // ...

   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(), RNAppAuth.getPackage()
       );
   }

[Jay-A-McBee]

Closing due to lack of response.