npm i react-native-sso-authentication
Before generate library files to your react-native-project, make sure that lussatech-cli
is installed globally in your machine, otherwise use this command to install it:
npm i lussatech-cli -g
If lussatech-cli
have been installed, change directory to your react-native-project and run this command:
lussatech generate react-native-sso-authentication
then the library files will be added automatically inside your react-native-project, e.g.
react-native-project
|_ ...
|_ lib
|_ react-native-sso-authentication
|_ ...
|_ index.js
|_ ...
...
import SSOAuth, { // sample app
/* available components */
Navbar, // sample navigation bar
Facebook, // sample facebook view
Google, // sample google view
/* available constants */
Server, // sample api end-point
Key, // sample key for asynstorage
OAuthFacebook, // sample oauth facebook setting
OAuthGoogle, // sample oauth google setting
Style // sample styles
} from './lib/react-native-sso-authentication';
class Name extends Component {
render() {
return (
<SSOAuth /> // sample calling component
);
}
}
...
To manage oauth credentials, update Server.js
based on your oauth credentials, e.g.
# lib/react-native-sso-authentication/Server.js
...
export const key = '@lussatech:session'; // key for asynstorage
export const facebook = {
client_id: '', // The id of your facebook app (Facebook App ID)
client_secret: '', // The secret of your facebook app (Facebook App Secret)
oauth_dialog: '', // The uri to display facebook login dialog
redirect_uri: '', // The uri to capture response (code) from login dialog
oauth_token: '', // The uri to exchange response (code) for an accessing token (short-lived-token)
oauth_access: '', // The uri to exchange short-lived-token for long-lived-token
oauth_profile: '', // The uri to get logged in user profile
oauth_logout: '', // The uri to logged out user
};
export const google = {
client_id: '', // The id of your google app (Google App ID)
client_secret: '', // The secret of your google app (Google App Secret)
oauth_dialog: '', // The uri to display google login dialog
redirect_uri: '', // The uri to capture response (code) from login dialog
oauth_token: '', // The uri to exchange response (code) for an accessing token
oauth_profile: '', // The uri to get logged in user profile
oauth_logout: '', // The uri to logged out user
};
...
To customize navigation bar, update Navbar.js
based on your need, e.g.
# lib/react-native-sso-authentication/Navbar.js
...
export default class extends Component {
/* to validate props value */
static propTypes = {
onRefresh: PropTypes.func,
...
};
...
/* when a menu is selected */
onActionSelected(position) {
switch (position) {
case 0: this.onSearch(); break;
case 1: this.onRefresh(); break;
...
default: ToastAndroid.show(`${actions[position].title} selected.`, ToastAndroid.SHORT);
}
}
...
/* when selected menu is `Refresh` */
onRefresh() {
/* calling onRefresh props action if available */
this.props.onRefresh && this.props.onRefresh();
}
...
}
/* list of menu */
const actions = [
{title: 'Search', icon: icons.search, show: 'always'},
{title: 'Refresh', icon: icons.refresh, show: 'ifRoom'},
...
];
...
To customize views, update Facebook.js
and Google.js
based on your need, e.g.
# lib/react-native-sso-authentication/Google.js
...
render() {
if (this.state.response) return this.renderResponse();
if (this.state.token) return this.fetchProfile();
if (this.state.code) return this.fetchToken();
return this.renderScene();
}
renderScene() {
return (
<WebView
url={`${google.oauth_dialog}?scope=email profile&redirect_uri=${google.redirect_uri}&response_type=code&client_id=${google.client_id}`}
javaScriptEnabledAndroid={true}
automaticallyAdjustContentInsets={false}
scalesPageToFit={true}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
/>
);
}
renderResponse() {
let profile = JSON.parse(this.state.response);
return (
<View style={styles.container}>
<Image style={styles.image} source={{uri: profile.picture}} />
<Text style={styles.welcome}>{profile.name}</Text>
<TouchableHighlight
style={[styles.button, (this.state.loading ? styles.buttonDisabled : styles.buttonActive)]}
underlayColor={stylesheet.buttonDisabled.backgroundColor}
onPress={() => this.onLogout()}>
<Text style={styles.buttonText}>{this.state.loading ? `Please Wait . . .` : `Logout`}</Text>
</TouchableHighlight>
</View>
);
}
...