Okta Not Working in React Native Web

[LessenVWDev]

I’m working on an integration that our mobile team has done but doing it in web (we use react native web and they use react native).

I’m already running into issues (similar to this Does OktaAuth work with React Native for Web? - #2 by Lijia where I am getting the error:

Cannot read properties of undefined (reading 'createConfig')

My AuthEventListenerService.ts file:

import { createConfig, signInWithBrowser, signOut, isAuthenticated, refreshTokens, EventEmitter } from '@okta/okta-react-native';
import { config } from '../../../okta.config';

/**
 * Create listeners for authentication events
 */
const createAuthenticationListeners = (): void => {
  EventEmitter.addListener('signInSuccess', function (error) {
    if (error) {
      console.warn(error);
    }

    console.log('Logged in!');
  });

  EventEmitter.addListener('signOutSuccess', function (error) {
    if (error) {
      console.warn(error);
    }

    console.warn('Logged out!');
  });

  EventEmitter.addListener('onError', function (error) {
    console.warn(error);
  });

  EventEmitter.addListener('onCancelled', function (error) {
    console.warn(error);
  });
};

/**
 * Create the authentication configuration
 */
const createAuthenticationConfig = async (): Promise<void> => {
  await createConfig({
    clientId: config.oidc.clientId,
    redirectUri: config.oidc.redirectUri,
    endSessionRedirectUri: config.oidc.endSessionRedirectUri,
    discoveryUri: config.oidc.discoveryUri,
    scopes: config.oidc.scopes,
    requireHardwareBackedKeyStore: config.oidc.requireHardwareBackedKeyStore,
    androidChromeTabColor: config.oidc.androidChromeTabColor,
  });
};

const initializeAuthentication = async (): Promise<void> => {
  createAuthenticationListeners();
  await createAuthenticationConfig();
};

.....

export { checkAuthentication, cleanupAuthenticationListeners, initializeAuthentication, login, logout, refreshAuthTokens };

Then in okta.config.ts:

const config = {
  oidc: {
    clientId: 'our-client-id-here',
    redirectUri: 'com.oktapreview.our-domain:/login',
    endSessionRedirectUri: 'com.oktapreview.our-domain:/logout',
    discoveryUri: 'https://our-domain.oktapreview.com/oauth2/default',
    scopes: ['openid', 'profile', 'offline_access'],
    requireHardwareBackedKeyStore: false,
  },
};

export { config };

Then we call it in our loginscreen:

import { initializeAuthentication } from '../../services/authentication/AuthenticationListener';
  useEffect(() => {
    initializeAuthentication()
      .then(_result => console.log(_result))
      .catch(err => console.error(err));
  }, []);

but we get that error

Cannot read properties of undefined (reading 'createConfig')

here’s my stacktrace:

TypeError: Cannot read properties of undefined (reading 'createConfig')
    at _callee$ (index.js:57:1)
    at tryCatch (runtime.js:63:1)
    at Generator.invoke [as _invoke] (runtime.js:294:1)
    at Generator.next (runtime.js:119:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21:1
    at createConfig (index.js:57:1)
    at _callee5$ (AuthenticationListener.ts:91:1)
    at tryCatch (runtime.js:63:1)
    at Generator.invoke [as _invoke] (runtime.js:294:1)
    at Generator.next (runtime.js:119:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21:1
    at createAuthenticationConfig (AuthenticationListener.ts:91:1)
    at _callee6$ (AuthenticationListener.ts:102:1)
    at tryCatch (runtime.js:63:1)
    at Generator.invoke [as _invoke] (runtime.js:294:1)
    at Generator.next (runtime.js:119:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21:1
    at initializeAuthentication (AuthenticationListener.ts:102:1)
    at WelcomeContainer.tsx:57:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at HTMLUnknownElement.dispatchEvent (<anonymous>)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at react-dom.development.js:23324:1
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)

Is this going to work? Should we be using the react SDK for react native web?

[danishshaik]

Hi @LessenVWDev were you ever able to resolve this? Seeing an identical error for my react native for web integration.

[rishabhsehgal]

Sorry for late reply, but for anyone still looking for the solution. I’ve made a library based on react-native-web technology. Very easy to use and simple integration.

https://www.npmjs.com/package/okta-react-native-web

Just run npm i okta-react-native-web and follow the readme guide.

You can follow this link as well for more detailed guide

https://medium.com/@sehgalrishabh/deep-dive-into-integrating-okta-authentication-sdk-with-react-native-web-a-comprehensive-guide-a98305a7af13