React-Native-Azure-Ad-Auth
A React Native module for Azure AD authentication endpoint. This module implements Azure AD authentication using pure React-Native using typescript.
This is an inspired copy of shedaltd/react-native-azure-ad-2 with some issues resolved and a logout feature.
This module should help developers integrate Microsoft V2 endpoint into their React-native app in a simple way.
- Components:
- AzureAdInstance
- AzureAdView
- AuthAdAuth
Table of contents
Installation
Install package from npm
$ npm install react-native-azure-ad-auth
Usage
First, import the component
;
Then create an AzureAdInstance by using Microsoft application credentials that was registered. Also, adding application scope in order to ask users to consent when they login. For more information about scope see Microsoft blog.
var credentials = authority: 'https://login.microsoftonline.us/YOUR_TENANT_ID' client_id: 'YOUR_CLIENT_ID' client_secret: 'YOUR_CLIENT_SECRET' redirect_uri: 'YOUR_REDIRECT_URI' scope: 'openid user.read offline_access'; const azureAdInstance: AzureAdInstance; = credentials;
For accessing scopes, see permissions and consent for more info.
After that, create an AzureAdView where the login WebView will be rendered and pass the azureAdInstance
that was created from the last step.
{ return <AzureAdView azureAdInstance=thisazureAdInstance loadingMessage="Requesting access token" onSuccess=thisonLoginSuccess onCancel=thisonLoginCancel /> ;}
When combine all parts together, it will look like this.
;;; // Constant credentials from Azure AD registrationvar credentials = authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID' client_id: 'YOUR_CLIENT_ID' client_secret: 'YOUR_CLIENT_SECRET' redirect_uri: 'YOUR_REDIRECT_URI' scope: 'openid user.read offline_access'; Component azureAdInstance: AzureAdInstance; { superprops; thisazureInstance = credentials; } { thisazureInstance } { // Show cancel message } { return <AzureAdView azureAdInstance=thisazureAdInstance loadingMessage="Requesting access token" onSuccess=thisonLoginSuccess onCancel=thisonLoginCancel /> ; } AppRegistry;
Example
To see see an example app using the library have a look at the Example Project