AppAuth is a client SDK for native apps to authenticate and authorize end-users using OAuth 2.0 and OpenID Connect. Available for iOS, macOS, Android and Native JS environments, it implements modern security and usability best practices for native app authentication and authorization.

npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start

To view your app with live reloading, point the Expo app to this QR code.
You'll find the QR scanner on the Projects tab of the app.

[QR Code]

Or enter this address in the Expo app's search bar:

 exp://172.31.98.12:19000

Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

› Press a to open Android device or emulator, or i to open iOS emulator.
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)

• I tried react-native-oauth, but discovered it required using an existing provider before adding a new one. I only wanted to have Okta as a provider. Also, it's high number of issues and pull requests served as a warning sign.
• I tried react-native-simple-auth, but had issues getting the deprecated Navigator component to work with the latest React Native release.
• I tried doing this OAuth 2 with React Native tutorial, but also had problems redirecting back to my app.

Create Native Application in Okta

Add React Native AppAuth for Authentication

npm run eject

npm i [email protected] --save
react-native link

iOS Setup

sudo gem install cocoapods

platform :ios, '11.0'

target 'OktaRN' do
 pod 'AppAuth', '>= 0.91'
end

<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLName</key>
   <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>{yourReversedOktaDomain}</string>
   </array>
 </dict>
</array>

<key>CFBundleIdentifier</key>
<string>com.okta.developer.reactnative.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLName</key>
   <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>com.oktapreview.dev-158606</string>
   </array>
 </dict>
</array>

+ @protocol OIDAuthorizationFlowSession;

 @interface AppDelegate : UIResponder <UIApplicationDelegate>
+ @property(nonatomic, strong, nullable) id<OIDAuthorizationFlowSession> currentAuthorizationFlow;
 @property (nonatomic, strong) UIWindow *window;
 @end

#import "AppAuth.h"

- (BOOL)application:(UIApplication *)app
           openURL:(NSURL *)url
           options:(NSDictionary<NSString *, id> *)options {
 if ([_currentAuthorizationFlow resumeAuthorizationFlowWithURL:url]) {
   _currentAuthorizationFlow = nil;
   return YES;
 }
 return NO;
}

Android Setup

buildscript {
   repositories {
       jcenter()
       google()
   }
   dependencies {
       classpath 'com.android.tools.build:gradle:3.0.1'
   }
}

dependencies {
 compile "com.android.support:appcompat-v7:25.3.1"
}

android {
 compileSdkVersion 25
}

android {
 defaultConfig {
   ...
   manifestPlaceholders = [
     appAuthRedirectScheme: '{yourReversedOktaDomain}'
   ]
 }
}

defaultConfig {
   applicationId "com.oktarn"
   minSdkVersion 16
   targetSdkVersion 22
   versionCode 1
   versionName "1.0"
   ndk {
       abiFilters "armeabi-v7a", "x86"
   }
   manifestPlaceholders = [
       appAuthRedirectScheme: 'com.oktapreview.dev-158606'
   ]
}

import React, { Component } from 'react';
import { UIManager, LayoutAnimation } from 'react-native';
import AppAuth from 'react-native-app-auth';
import { Page, Button, ButtonContainer, Form, Heading } from './components';

UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);

const scopes = ['openid', 'profile', 'email', 'offline_access'];

type State = {
 hasLoggedInOnce: boolean,
 accessToken: ?string,
 accessTokenExpirationDate: ?string,
 refreshToken: ?string
};

export default class App extends Component<{}, State> {
 auth = new AppAuth({
   issuer: 'https://{yourOktaDomain}.com/oauth2/default',
   clientId: '{clientId}',
   redirectUrl: 'com.{yourReversedOktaDomain}:/callback'
 });

 state = {
   hasLoggedInOnce: false,
   accessToken: '',
   accessTokenExpirationDate: '',
   refreshToken: ''
 };

 animateState(nextState: $Shape<State>, delay: number = 0) {
   setTimeout(() => {
     this.setState(() => {
       LayoutAnimation.easeInEaseOut();
       return nextState;
     });
   }, delay);
 }

 authorize = async () => {
   try {
     const authState = await this.auth.authorize(scopes);
     this.animateState(
       {
         hasLoggedInOnce: true,
         accessToken: authState.accessToken,
         accessTokenExpirationDate: authState.accessTokenExpirationDate,
         refreshToken: authState.refreshToken
       },
       500
     );
   } catch (error) {
     console.error(error);
   }
 };

 refresh = async () => {
   try {
     const authState = await this.auth.refresh(this.state.refreshToken, scopes);
     this.animateState({
       accessToken: authState.accessToken || this.state.accessToken,
       accessTokenExpirationDate:
       authState.accessTokenExpirationDate || this.state.accessTokenExpirationDate,
       refreshToken: authState.refreshToken || this.state.refreshToken
     });
   } catch (error) {
     console.error(error);
   }
 };

 revoke = async () => {
   try {
     await this.auth.revokeToken(this.state.accessToken);
     this.animateState({
       accessToken: '',
       accessTokenExpirationDate: '',
       refreshToken: ''
     });
   } catch (error) {
     console.error(error);
   }
 };

 render() {
   const {state} = this;
   return (
     <Page>
       {!!state.accessToken ? (
         <Form>
           <Form.Label>accessToken</Form.Label>
           <Form.Value>{state.accessToken}</Form.Value>
           <Form.Label>accessTokenExpirationDate</Form.Label>
           <Form.Value>{state.accessTokenExpirationDate}</Form.Value>
           <Form.Label>refreshToken</Form.Label>
           <Form.Value>{state.refreshToken}</Form.Value>
         </Form>
       ) : (
         <Heading>{state.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'}</Heading>
       )}

       <ButtonContainer>
         {!state.accessToken && (
           <Button onPress={this.authorize} text="Authorize" color="#017CC0"/>
         )}
         {!!state.refreshToken && <Button onPress={this.refresh} text="Refresh" color="#24C2CB"/>}
         {!!state.accessToken && <Button onPress={this.revoke} text="Revoke" color="#EF525B"/>}
       </ButtonContainer>
     </Page>
   );
 }
}

auth = new AppAuth({
   issuer: 'https://{yourOktaDomain}.com/oauth2/default',
   clientId: '{clientId}',
   redirectUrl: 'com.{yourReversedOktaDomain}:/callback '
});

AppRegistry.registerComponent('OktaRN', () => App);

npm i styled-components --save

svn export https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/components

svn export https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/assets

Run on iOS Simulator

Run on Android

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

Upgrade to the Latest Release of React Native

npm i -g react-native-git-upgrade
react-native-git-upgrade
npm i

Get and View an ID Token

type State = {
 ...
 idToken: ?string
};

export default class App extends Component<{}, State> {
 ...
 state = {
   ...
   idToken: ''
 };

authorize = async () => {
 try {
   const authState = await this.auth.authorize(scopes);
   this.animateState(
     {
       hasLoggedInOnce: true,
       accessToken: authState.accessToken,
       accessTokenExpirationDate: authState.accessTokenExpirationDate,
       refreshToken: authState.refreshToken,
       idToken: authState.idToken
     },
     500
   );
 } catch (error) {
   console.error(error);
 }
};

npm i buffer --save

import { Buffer } from 'buffer';

render() {
 const {state} = this;
 if (state.idToken) {
   const jwtBody = state.idToken.split('.')[1];
   const base64 = jwtBody.replace('-', '+').replace('_', '/');
   const decodedJwt = Buffer.from(base64, 'base64');
   state.idTokenJSON = JSON.parse(decodedJwt);
 }
 ...

<Form.Label>ID Token</Form.Label>
<Form.Value>{JSON.stringify(state.idTokenJSON)}</Form.Value>

Call an API with Your Access Token

git clone https://github.com/oktadeveloper/spring-boot-react-example.git
git checkout okta

okta.oauth2.issuer=https://{yourOktaDomain}.com/oauth2/default
okta.oauth2.clientId={clientId}

state = {
 ...
 beers: []
};

fetchGoodBeers = async () => {
 if (this.state.beers.length) {
   // reset to id token if beers is already populated
   this.animateState({beers: []})
 } else {
   fetch('http://localhost:8080/good-beers', {
     headers: {
       'Authorization': `Bearer ${this.state.accessToken}`
     }
   }).then(response => response.json())
     .then(data => {
       this.animateState({beers: data})
     })
     .catch(error => console.error(error));
 }
};

{!!state.accessToken && <Button onPress={this.fetchGoodBeers} text={!this.state.beers.length ? 'Good Beers' : 'ID Token'} color="#008000" />}

<Form.Label>{state.beers.length ? 'Good Beers' : 'ID Token'}</Form.Label>
<Form.Value>{JSON.stringify(state.beers.length ? state.beers : state.idTokenJSON)}</Form.Value>

• Build a React Application with User Authentication in 15 Minutes
• Build a Preact App with Authentication
• Bootiful Development with Spring Boot and React