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:
1
$ npm install react-native-authcore
Copied!
Install via yarn:
1
$ yarn add react-native-authcore
Copied!
Link to native module
To add the functionality of the React Native Authcore module to your project you need to link it:
1
$ react-native link react-native-authcore
Copied!
Integrate Authcore in your Application
iOS
iOS Callback
In the file
ios/<YOUR PROJECT>/AppDelegate.m, add the following:1
#import <React/RCTLinkingManager.h>
2
​
3
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
4
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
5
{
6
return [RCTLinkingManager application:application openURL:url
7
sourceApplication:sourceApplication annotation:annotation];
8
}
Copied!
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)1
<key>CFBundleIdentifier</key>
2
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
Copied!
And then register a URL type entry using the value of
CFBundleIdentifier as the value for the CFBundleURLSchemes1
<key>CFBundleURLTypes</key>
2
<array>
3
<dict>
4
<key>CFBundleTypeRole</key>
5
<string>None</string>
6
<key>CFBundleURLName</key>
7
<string>$(PRODUCT_BUNDLE_IDENTIFIER).authcore</string>
8
<key>CFBundleURLSchemes</key>
9
<array>
10
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
11
</array>
12
</dict>
13
</array>
Copied!
Update the podfile used in iOS, in
/ios, run the following:1
pod install
Copied!
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:1
<intent-filter>
2
<action android:name="android.intent.action.VIEW" />
3
<category android:name="android.intent.category.DEFAULT" />
4
<category android:name="android.intent.category.BROWSABLE" />
5
<data
6
android:host=""
7
android:scheme="${applicationId}" />
8
</intent-filter>
Copied!
MainActivity should look like this:1
<activity
2
android:name=".MainActivity"
3
android:label="@string/app_name"
4
android:launchMode="singleTask"
5
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
6
android:windowSoftInputMode="adjustResize">
7
<intent-filter>
8
<action android:name="android.intent.action.MAIN" />
9
<category android:name="android.intent.category.LAUNCHER" />
10
</intent-filter>
11
<!-- General deep link or app link used in your application -->
12
<intent-filter>
13
<action android:name="android.intent.action.VIEW" />
14
<category android:name="android.intent.category.DEFAULT" />
15
<category android:name="android.intent.category.BROWSABLE" />
16
<data
17
android:host="example.com"
18
android:scheme="https" />
19
<!-- Exclusive for Authcore -->
20
<intent-filter>
21
<action android:name="android.intent.action.VIEW" />
22
<category android:name="android.intent.category.DEFAULT" />
23
<category android:name="android.intent.category.BROWSABLE" />
24
<data
25
android:host=""
26
android:scheme="${applicationId}" />
27
</intent-filter>
28
</activity>
Copied!
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.1
import Authcore from 'react-native-authcore'
2
const authcore = new Authcore({
3
baseUrl: 'https://authcore.example.com', // Authcore is hosted on the sub-domain of example.com
4
socialLoginPaneStyle: 'bottom', // Location for social login pane, either `top` or `bottom`, default to be `bottom`
5
language: 'en' // Language for sign in page. Currently allow `en` or `zh-hk` only
6
})
Copied!
Then present the hosted login screen:
1
authcore
2
.webAuth
3
.signin()
4
.then(credentials => {
5
console.log(credentials)
6
// Show the credentials return from signin method, should return Object like the following
7
// {
8
// accessToken: '', // Access token
9
// refreshToken: '', // Refresh token
10
// idToken: '', // ID token in JWT format.
11
// currentUser: {} // User information, check `GetCurrentUser` from API docs for the format.
12
// }
13
​
14
// Store the access token to a secure storage for further usage
15
})
16
.catch(error => console.log(error))
Copied!
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.1
// Assume Authcore instance is instantiated and named as `authcore`. Check sign in section to see how to create new instance.
2
// Assume state contains access token named as `accessToken`, access token should be stored in secure storage
3
​
4
render () {
5
return <authcore.ProfileScreen accessToken={ this.state.accessToken } />
6
}
Copied!
Example for settings widget:
1
// Component in react-native
2
​
3
// Function for the component
4
​
5
// _showSettings execute function in Authcore and shows Settings widget in an in-app browser.
6
_showSettings = async () => {
7
this.state.authcore.settings.show({
8
// Assume state contains access token named as `accessToken`, access token should be stored in secure storage
9
accessToken: this.state.accessToken,
10
// Optional parameters to set the widget layout
11
primaryColour: '#66ff00',
12
company: 'LikeCoin'
13
})
14
}
15
​
16
render() {
17
return (
18
<View style={styles.container}>
19
// Click the button and shows the settings widget in in-app browser
20
<Button onPress = { this._showSettings } title={ 'Show settings widget' } />
21
</View>
22
);
23
}
24
​
Copied!
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.1
render () {
2
return <authcore.ProfileScreen accessToken={ this.state.accessToken } containerStyle={{ maxHeight: 300 }} />
3
}
Copied!
Last modified 1yr ago