# rn-ad-auth

> A React Native package that provides Microsoft Azure AD Auth module.

Latest version **0.0.15** (published 2022-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-ad-auth
pnpm add rn-ad-auth
yarn add rn-ad-auth
bun add rn-ad-auth
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2022-09-14 |
| First published | 2022-09-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 152.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Suresh Konakanchi |
| Maintainers | itsanujraghuvanshi, sur950 |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/rn-ad-auth
- Repository: https://github.com/sur950/rn-ad-auth
- Homepage: https://github.com/sur950/rn-ad-auth#readme
- Issues: https://github.com/sur950/rn-ad-auth/issues
- npm.io page: https://npm.io/package/rn-ad-auth

## Dependencies (3)

- [ts-jest](https://npm.io/package/ts-jest.md) ^29.0.0
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) 17.0.2
- [babel-preset-react-native](https://npm.io/package/babel-preset-react-native.md) ^4.0.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.15 (latest) — 2022-09-14
- 0.0.14 — 2022-09-14
- 0.0.13 — 2022-09-14
- 0.0.12 — 2022-09-14
- 0.0.11 — 2022-09-14
- 0.0.10 — 2022-09-12
- 0.0.9 — 2022-09-12
- 0.0.8 — 2022-09-11
- 0.0.7 — 2022-09-11
- 0.0.6 — 2022-09-11
- 0.0.5 — 2022-09-11
- 0.0.4 — 2022-09-09
- 0.0.3 — 2022-09-09
- 0.0.2 — 2022-09-09
- 0.0.1 — 2022-09-09

## README

# rn-ad-auth

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

## Installation

```sh
npm install rn-ad-auth
```

This package is dependent on [React Native Webview](https://github.com/react-native-webview/react-native-webview) package which is internally used in the package. You can read the installation steps from [here](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md).

### 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](https://portal.azure.com).
1. 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
1. After selecting _App registration_ service click **New registration**
1. Enter a friendly name for the application
1. 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.
1. 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.
1. Click **Register** to create the app registration record.
1. Find the _Application (client) ID_ value in **Overview** section, copy and save the value in a safe location.
1. You don't need to set _API Permissions_. It is meant for admin consent only.
1. Now select **Authentication** from the left menu
1. 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.
1. Click **Save** button above to save changes.


### Usage:-

```js
import AuthModal from "rn-ad-auth";
```

```js
// 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.
};
```

```js
<!--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          |

---
_Source: https://npm.io/package/rn-ad-auth · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._