Okta React Native with AWS Gateway Resource Server

This example shows you how to use the Okta React Native SDK to adopt Okta Authentication flow in your app and use it with a secure API, running in AWS API Gateway.

The AWS API Gateway part is covered in https://github.com/maneeshsahu/aws-howdy-partner

Clone repo

To run this application, you first need to clone this repo and then enter into this directory:

git clone git@github.com:maneeshsahu/OktaMobile.git
cd OktaMobile

Setup the app in Okta using the Okta CLI

okta start

Once this completes, you should get a console output as in the screenshot below:

Install dependencies

Setup Development Environment for ReactNative

OktaMobile requires the React Native CLI. See documentation for environment setup: https://reactnative.dev/docs/environment-setup

You will need to setup Android Studio and an Android Virtual Device Emulator for Android Development. For iOS, you will need to install Xcode (MacOS only) and create an Apple iPhone Simulator.

Install JS dependencies

Install dependencies based on package.json

npm ci

Install CocoaPods dependencies (iOS)

CocoaPods dependencies are needed for ios development

cd ios && pod install && cd ..

Generate Andorid Keystore for Development (Android)

keytool -genkey -v -keystore android/app/debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

Run OktaMobile

Start Metro

npx react-native start

Run on Emulator

Launch an Android Emulator or iOS Simulator, then

# Android
npx react-native run-android

# iOS
npx react-native run-ios

Using This Example

Enter your credentials and tap the Login button. You can login with the same account that you created when signing up for your Developer Org, or you can use a known username and password from your Okta Directory.

After you complete the login flow, you will see your account information.

If you click on the message icon in the AppBar, you will be able to see the messages from the Resource Server (AWS API Gateway).

Note: You will need to edit the samples.config.js and update the resourceServer.messagesUrl to specify your API Gateway endpoint.

...
  resourceServer: {
    messagesUrl:
      'https://ABBAA.execute-api.us-east-1.amazonaws.com/api/messages',
  },
};