browser-sign-in

Okta React Native + Browser Sign In Example

This example shows you how to use the Okta React Native Library to login a user to a React Native application. The login is achieved through the Auth Code Flow + PKCE, where the user is redirected to the Okta browser login page. After the user authenticates they are redirected back to the application with an Authorization Code, which is exchanged for an ID token and access token.

Running This Example

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

git clone git@github.com:okta/samples-js-react-native.git
cd samples-js-react-native/browser-sign-in

Then install dependencies:

npm ci

Install dependecies for iOS.

cd ios
pod install

For Android development, please make sure redirect schema is properly added by following Add redirect schema section from Okta React Native README.

Now start the app server:

npm start

As an alternative, you can launch an Android Emulator or iOS Simulator:

# Android
npm run android

# iOS
npm run ios

If you see a home page that prompts you to login, then things are working! Clicking the Log in button will redirect you to the Okta browser sign-in page.

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.

Methods

In this sample application, once the user logs in, there will be three methods that each shows a different way to get user info.

Get User From ID Token

This method calls getUserFromIdToken() to retrieve user info from decoding the ID Token claims.

Get User From Request

This method calls getUser() to retrieve user info by passing in the access token, and making a request to the user info endpoint. It is done on the native modules.

Get User From Access Token

This method shows you how to use the access token from getAccessToken() to exchange user information. It shows how to make a fetch request to the user info endpoint with access token as the header.

Update react-native and expo

Modify package.json with latest versions you want to use.

yarn clean
yarn

# optional
yarn fix-deps
yarn deduplicate
yarn doctor
yarn expo-doctor

# regenerate native dirs
rm -rf ./android && rm -rf ./ios
npx expo prebuild

Open ./android/app/build.gradle and add to android.defaultConfig:

    // after versionName "1.0.0"

    manifestPlaceholders = [
            appAuthRedirectScheme: 'com.okta.example'
    ]

(replace com.okta.example with your redirect scheme used in Okta app configuration if it differs)

npx react-native build-android

yarn pod-install
npx react-native build-ios

Then you can run yarn start (yarn android and yarn ios) to check how it works on Android and iOS devices.