React Native Widgets

Overview

The module provides an in-app browser to sign in through Authcore in return of the access token, which can be used for accessing information or secret stored in Authcore.

Installation

The packages will be published to npm when v1.0 is released

Install via npm:

$ npm install react-native-authcore

Install via yarn:

$ yarn add react-native-authcore

Link to native module

To add the functionality of the React Native Authcore module to your project you need to link it:

$ react-native link react-native-authcore

Integrate Authcore in your Application

iOS

iOS Callback

In the file ios/<YOUR PROJECT>/AppDelegate.m, add the following:

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

Next you will need to add a URLScheme using your App's bundle identifier to allow redirection back to the app.

In the file ios/<YOUR PROJECT>/Info.plist, locate the value of CFBundleIdentifier. In latest version for iOS app, this should be $(PRODUCT_BUNDLE_IDENTIFIER)

<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

And then register a URL type entry using the value of CFBundleIdentifier as the value for the CFBundleURLSchemes

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>None</string>
        <key>CFBundleURLName</key>
        <string>$(PRODUCT_BUNDLE_IDENTIFIER).authcore</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
        </array>
    </dict>
</array>

Update the podfile used in iOS, in /ios, run the following:

pod install

iOS prompts users when signing in with a web browser. authcore.dev will be replaced with your domain name.

Android

In the file android/app/src/main/AndroidManifest.xml you must make sure the MainActivity of the app has a launchMode value of singleTask and that it has the following intent filter:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
        android:host=""
        android:scheme="${applicationId}" />
</intent-filter>

MainActivity should look like this:

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:launchMode="singleTask"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <!-- General deep link or app link used in your application -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="example.com"
            android:scheme="https" />
    <!-- Exclusive for Authcore -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host=""
            android:scheme="${applicationId}" />
    </intent-filter>
</activity>

The rule to interpret deep link in intent-filter is to include all combinations of their combined attributes from <data> tag. To ensure starting Authcore for sign in without showing app picker, use a separated intent-filter for the app link. Check https://developer.android.com/training/app-links/deep-linking#adding-filters for more details about deep link in Android.

Sign In

First import the Authcore module and create a new Authcoreinstance.

import Authcore from 'react-native-authcore'
const authcore = new Authcore({
    baseUrl: 'https://authcore.example.com', // Authcore is hosted on the sub-domain of example.com
    socialLoginPaneStyle: 'bottom', // Location for social login pane, either `top` or `bottom`, default to be `bottom`
    language: 'en' // Language for sign in page. Currently allow `en` or `zh-hk` only
})

Then present the hosted login screen:

authcore
    .webAuth
    .signin()
    .then(credentials => {
        console.log(credentials)
        // Show the credentials return from signin method, should return Object like the following
        // {
        //    accessToken: '', // Access token
        //    refreshToken: '',  // Refresh token
        //    idToken: '',  // ID token in JWT format.
        //    currentUser: {}  // User information, check `GetCurrentUser` from API docs for the format.
        // }

        // Store the access token to a secure storage for further usage
    })
    .catch(error => console.log(error))

Storing the access token

Please be reminded that access token should be stored in secure storage. Developers are adviced to have such solution to store the access token returned from the sign in page.

Setting widgets

The module also provides widgets for setting the user profile and security settings.

Widgets require Authcore instance setting for initialization. In common case the instance will be in store like redux using state management. To use widget inside the page, use the component from the instance.

For user profile, use component ProfileScreen.

For settings widget it is shown by an in-app browser. To instantiate it, run settings.show function. See the example below for detail.

Props Parameters

Prop	Type	Description
accessToken	REQUIRED, string	The access token for getting the user information. This is required for the widgets. Passing invalid access token will still show the widget but not showing correct information.
company	OPTIONAL, string	The company name shown in the widget.
logo	OPTIONAL, string	The logo shown in the widget. Should be in absolute path format.
primaryColour	OPTIONAL, string	The primary colour of the widget. Primary colour mainly consists of general button colour, link colour and border colour when the field box is in focus. Allow colour code, rgb colour value or named colour.
successColour	OPTIONAL, string	The success colour of the widget. Success colour mainly consists of verified message and icon. Allow colour code, rgb colour value or named colour.
dangerColour	OPTIONAL, string	The danger colour of the widget. Danger colour mainly consists of error message, button colour for destructive action (e.g. Remove contact) and invalid field box border. Allow colour code, rgb colour value or named colour.
socialLoginPaneStyle	OPTIONAL, string	The flag to decide position where social login pane should located, either topor bottom, default to be bottom.

// Assume Authcore instance is instantiated and named as `authcore`. Check sign in section to see how to create new instance.
// Assume state contains access token named as `accessToken`, access token should be stored in secure storage

render () {
  return <authcore.ProfileScreen accessToken={ this.state.accessToken } />
}

Example for settings widget:

// Component in react-native

// Function for the component

// _showSettings execute function in Authcore and shows Settings widget in an in-app browser.
_showSettings = async () => {
  this.state.authcore.settings.show({
    // Assume state contains access token named as `accessToken`, access token should be stored in secure storage
    accessToken: this.state.accessToken,
    // Optional parameters to set the widget layout
    primaryColour: '#66ff00',
    company: 'LikeCoin'
  })
}

render() {
  return (
    <View style={styles.container}>
      // Click the button and shows the settings widget in in-app browser
      <Button onPress = { this._showSettings } title={ 'Show settings widget' } />
    </View>
  );
}

Setting Width and Height of the Widgets

It is possible to constraint the widget width and height to fit the app design, to do that apply containerStyle with maxWidgetor maxHeight on the widget.

render () {
  return <authcore.ProfileScreen accessToken={ this.state.accessToken } containerStyle={{ maxHeight: 300 }} />
}