rn-ad-auth

rn-ad-auth

A React Native Component which provides complete Authentication flow for Azure AD.

Installation

npm install rn-ad-auth

This package is dependent on React Native Webview package which is internally used in the package. You can read the installation steps from here.

App Registration

First, you will need to register your application with Microsoft Azure Portal. This will give you an Application ID for your application, as well as enable it to receive tokens.

1. Sign in to the Microsoft Azure Portal.
2. First you need to find the App Registration Service. You could just type in the service name in the search bar on the middle top of the window and select it or do like following:
   1. Click on All services in the left panel
   2. Then select from the shown in bold categories the Identity
   3. Click on the star sign near the App registration service name to add it to favorites
   4. Now you can easily access the service using the left portal panel
3. After selecting App registration service click New registration
4. Enter a friendly name for the application
5. Select account type that should be supported by your app. The default choice "Accounts in any organizational directory and personal Microsoft accounts" is the widest one.
6. Now you need to add Redirect URI
   1. Select Public client (mobile & desktop) from dropdown
   2. Type https://azure-ad-login-3606b.web.app/ here.
7. Click Register to create the app registration record.
8. Find the Application (client) ID value in Overview section, copy and save the value in a safe location.
9. You don't need to set API Permissions. It is meant for admin consent only.
10. Now select Authentication from the left menu
11. Select checkbox ID tokens in the Implicit grant section - it is needed for OpenID Connect. The library will still use authorization grant and not imlicit.
12. Click Save button above to save changes.

Usage:-

import AuthModal from "rn-ad-auth";

// App Configuration
const config = {
	tenant_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx", // Your App's Tenant ID here.
	client_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx", // Your App's client ID here.
	scope: "openid", // Need to define scope for getting auth tokens, openid is mendatory.
};

<!--Handle Login or Logout Success-->
const onSuccess = (response) => {
	console.log("response", response);
};

<!--Handle Login or Logout Failure-->
const onFailure = (error) => {
	console.error("error", error);
};

<!--Handle Login or Logout authentication cancel-->
const onClose = () => {
	console.log('Authentication Cancelled');
};

// To be used as a component
<AuthModal
	config={config}
	action={"login"}
	open={modalOpen}
	onClose={onClose}
	onSuccess={onSuccess}
	onFailure={onFailure}
/>;

Component props:-

Key	Usage	RightAccepted Values
config	Configugration Object	Object with (tenant_id, client_id, scope)
action	Action to Perform	'login' OR 'logout'
onClose	Emits when modal is closed	Function to perform next operation
onSuccess	Emits when Auth is successful	Function to handle success
onFailure	Emits when Auth is failed	Function to handle error