Okta integration issue with react native app created using expo

[dhaivat2810]

Please provide the following:

1. SDK Version:38.0.0
2. Platforms(Android/iOS/web/all): ios

Hi everyone, i am very new to react native world and I have been trying to integrate okta with my react native application created using expo. But i keep getting one or the other issues. I have also checked the react sample by okta but it does not use expo. All the issues ultimately boil down to the events module being used by okta i believe. I have spent lots of hours trying to figure but couldnt find the fix. I really appreciate if someone could please help me with it.

sample by okta: samples-js-react/custom-login at master · okta/samples-js-react · GitHub

import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './screens/LoginScreen';
import ProfileScreen from './screens/ProfileScreen';
import tokenClient from './auth/TokenClient';

const Stack = createStackNavigator();
const App = () => {
  const [progress, setProgress] = useState(false);
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    const checkAuthStatus = async () => {
      const { authenticated } = await tokenClient.isAuthenticated();
      setAuthenticated(authenticated);
      setProgress(false);
    }
    setProgress(true);
    checkAuthStatus();
  }, []);

  if (progress) {
    return (
      <SafeAreaView>
        <View>
          <Text>Loading...</Text>
        </View>
      </SafeAreaView>
    )
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={authenticated ? 'Profile' : 'Login'}>
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          options={{ title: 'Login', headerLeft: null }}
        />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{ title: 'User Profile'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
};

export default App;

TokenClient.js

import TokenClient from '@okta/okta-react-native'

export default tokenClient = new TokenClient({
  issuer: 'https://{yourOktaDomain}.com/oauth2/default',
  client_id: '{clientId}',
  scope: 'openid profile',
  redirect_uri: __DEV__ ?
    'exp://localhost:19000/+expo-auth-session' :
    'com.{yourReversedOktaDomain}:/callback',
});

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@okta/okta-react-native": "^1.4.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/stack": "^5.2.12",
     "events": "^3.1.0",
    "expo": "~38.0.0",
    "expo-status-bar": "^1.0.2",
    "react": "~16.8.",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

Error:

[adamjnav]

Hey @dhaivat2810,

The okta/react-native library requires linking native code which means it will not work with a Managed project. In order to use it, you would have to create a Bare project that would give you access to the native directories.

With that said, it might be a simpler solution to use the WebBrowser module and follow our Okta guide to set up authentication which you can read about here: Authentication - Expo Documentation

Cheers,
Adam

[dhaivat2810]

Thanks a lot @adamjnav for the information. I would check the webBrowser module.

[adamjnav]

My pleasure! I hope the docs and WebBrowser module were able to satisfy your use case. If you’ve run into any obstacles, please let me know.

[dhaivat2810]

Thanks @adamjnav. Actually i followed the docs but wasnt able to get the desired result. here is a link to my question How to send user credentials to useAuthRequest to get id and accessToken. I appreciate your help.