Skip to content
A React Native Login Example
JavaScript Objective-C Ruby Java Python Swift
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android
ios
tests
.buckconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
Auth.js
LICENSE
README.md
app.json
auth.config.js
babel.config.js
index.js
metro.config.js
package-lock.json
package.json
setupJest.js
yarn.lock

README.md

React Native Login Example

This example app shows how to create a React Native application and add Login with Okta.

To see how this example was created, please read Create a React Native App with Login in 10 Minutes.

Prerequisites: Node.js, React Native CLI, and Xcode (for iOS/Mac) or Android Studio (for Android).

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage, and secure users and roles in any application.

Getting Started

To install this example application, run the following commands:

git clone https://github.com/oktadeveloper/okta-react-native-login-example.git react-native-login
cd react-native-login

This will get a copy of the project installed locally.

Create Native Application in Okta

Before you can run this React Native example, you'll need an application to log in to. If you don't have an Okta Developer account, get one today!

Log in to your Okta Developer account and navigate to Applications > Add Application. Click Native and click the Next button. Give the app a name you’ll remember (e.g., React Native), select Refresh Token as a grant type, in addition to the default Authorization Code. Copy the Login redirect URI (e.g., com.okta.dev-123456:/callback) and save it somewhere. You'll need this value when configuring your app.

Click Done and you should see a client ID next screen. Copy and save this value as well.

Specify Your Issuer, Client ID, and Redirect URI

Open auth.config.js and configure OIDC with your settings.

export default {
  oidc: {
    clientId: '{yourClientId}',
    redirectUri: 'com.okta.dev-######:/callback',
    endSessionRedirectUri: 'com.okta.dev-######:/callback',
    discoveryUri: 'https://dev-######.okta.com/oauth2/default',
    scopes: ['openid', 'profile', 'offline_access'],
    requireHardwareBackedKeyStore: false,
  },
};

Update android/app/build.gradle to replace the redirect scheme (com.okta.dev-123456) with the one that matches your native app's redirect URI.

Run the App

To run the app on iOS, you'll first need to install CocoaPods:

sudo gem install cocoapods

Then cd into the ios directory and run pod install. Then you can run the following command to start and deploy the app into iOS Simulator.

react-native run-ios

To run the app on Android, you'll have to an Android Virtual Device (AVD). Open Android Studio, select open existing project, and choose the android directory in your cloned project. If you're prompted to update anything, approve it.

To create a new AVD, navigate to Tools > AVD Manager. Create a new Virtual Device and run it.

react-native run-android

Links

This example uses the following libraries:

Help

Please post any questions as comments on the blog post, as issues in this project, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.

You can’t perform that action at this time.