{"id":27916891,"url":"https://github.com/wkh237/react-native-azure-ad","last_synced_at":"2025-05-06T16:42:52.302Z","repository":{"id":57335601,"uuid":"58367337","full_name":"wkh237/react-native-azure-ad","owner":"wkh237","description":"React Native module implements Azure AD authentication flow in pure js","archived":false,"fork":false,"pushed_at":"2020-03-11T07:17:18.000Z","size":37,"stargazers_count":87,"open_issues_count":31,"forks_count":69,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-20T10:08:46.169Z","etag":null,"topics":["azure","azure-active-directory","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wkh237.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-09T10:07:45.000Z","updated_at":"2024-11-29T17:07:18.000Z","dependencies_parsed_at":"2022-09-07T16:04:30.549Z","dependency_job_id":null,"html_url":"https://github.com/wkh237/react-native-azure-ad","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkh237%2Freact-native-azure-ad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkh237%2Freact-native-azure-ad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkh237%2Freact-native-azure-ad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wkh237%2Freact-native-azure-ad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wkh237","download_url":"https://codeload.github.com/wkh237/react-native-azure-ad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252722592,"owners_count":21794082,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","azure-active-directory","react-native"],"created_at":"2025-05-06T16:42:51.544Z","updated_at":"2025-05-06T16:42:52.286Z","avatar_url":"https://github.com/wkh237.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-azure-ad\n[![npm version](https://badge.fury.io/js/react-native-azure-ad.svg)](https://badge.fury.io/js/react-native-azure-ad)\n\nAn React Native module implements Azure AD authentication flow using pure React Native API. You can use both web application flow and mobile application client_id with this module.\n\n* [Installation](#user-content-installation)\n* [Usage](#user-content-usage-example)\n * [Login](#user-content-login)\n * [Logout](#user-content-logout)\n * [RefreshToken](#user-content-refresh-token)\n* [ADLoginView](#user-content-adloginviewwebview)\n* [Class ReactNativeAD](#user-content-class-reactnativead)\n  * [Constructor](#user-content-constructor)\n  * [Properties](#user-content-properties)\n     * [config](#user-content-config-ADConfig)\n     * [credentials](#user-content-credentials-ADCredentials)\n  * [Frequently used methods](#user-content-frequently-used-methods)\n     * [getConfig ():ADConfig](#user-content-getconfig-adconfig)\n     * [getCredentials ():ADCredentials](#user-content-getcredentials-adcredentials)\n     * [assureToken (resource:string):Promise\u003c?string\u003e]()\n  * [Methods for internal mechanism](#user-content-methods-for-internal-mechanism)\n     * [getAccessToken (resource:string):string | null]()\n     * [saveCredentials (data:ADCredentials):Promise]()\n     * [refreshToken (resourceId:string):Promise\u003cstring\u003e]()\n     * [checkCredential (resourceId:string):Promise\u003cReactNativeADCredential | null\u003e]()\n     * [grantAccessToken (grantType:string, params:any):Promise\u003cGrantTokenResp\u003e]()\n* [Flow Types](#user-content-flow-types)\n\n## Installation\n\nInstall package from `npm`\n\n```\n$ npm install --save react-native-azure-ad\n```\n\nreact-native-azure-ad implements authentication flow using `fetch` API and `Webview` component in  React Native, therefore there's no need to install Android and iOS native ADAL.\n\n## Usage Example\n\n### Login\n\nThe following example will show an Azure authorize page in your app, when user successfully logged in, it triggers `onSuccess` method.\n\n```js\n\nimport {ReactNativeAD, ADLoginView} from 'react-native-azure-ad'\n\nconst CLIENT_ID = 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'\n\nclass LandingView extends React.Component {\n\n  constructor(props) {\n    super(props)\n    this.AzureADContext = {\n      client_id : CLIENT_ID,\n      // Optional\n      redirect_url : 'http://localhost:8080',  \n      // Optional\n      authority_host : 'https://login.microsoftonline.com/common/oauth2/authorize',\n      // Optional\n      tenant  : 'common',  \n      // Optional\n      prompt : 'none',\n      // Optional\n      login_hint : 'user@domain.com',\t  \n      // This is required if client_id is a web application id\n      // but not recommended doing this way.\n      client_secret : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\n      resources : [\n        'https://graph.microsoft.com',\n        'https://outlook.office365.com',\n        // ... more resources\n      ]\n    }\n  }\n\n  render() {\n\n  new ReactNativeAD({\n    client_id: CLIENT_ID,\n    resources: [\n      'https://outlook.office365.com'\n    ]})\n  \n    return \u003cADLoginView\n              context={ReactNativeAD.getContext(CLIENT_ID)}\n              onSuccess={this.onLoginSuccess.bind(this)}/\u003e\n  }\n\n  onLoginSuccess(credentials) {\n    console.log(credentials[https://outlook.office365.com].access_token)\n    // use the access token ..\n  }\n\n}\n\n```\n\n### Logout\n\nWhen a ADLoginView has prop `needLogout` set to `true` it redirect user to AD logout page for logout.\n\n```\n\u003cADLoginView\n              context={ReactNativeAD.getContext(CLIENT_ID)}\n              needLogout={true}/\u003e\n```\n\n### Refresh Token\n\nUse `assureToken` method to assure `access_token` of specific resource is valid, when access token is expired, this method will attempt to refresh access token automatically and resolve renewed access token in promise. If it failed to renew the token, the access token in promise will be `undefined`, it means user may have to login again, so you might have to redirect user to ADLoginView for new authorization.\n\n\n```\nReactNativeAD.getContext(CLIENT_ID).assureToken(RESOURCE_ID).then((token) =\u003e {\n\n // use token ..\n\n})\n\n```\n\n### ADLoginView:Webview\n\n`ADLoginView` is it's a wrapped [Webview](https://facebook.github.io/react-native/docs/webview.html#content) component, it will display the login page by given prop `context`, when user is authorized, it execute the function in prop `onSuccess`.\n\n#### props\n\n\n`style:object` **(opational)**\n\nAdditional styles of the webview component.\n\n`context:ReactNativeAD` **Required**\n\nAzure AD context instance that apply to this ADLoginView, it should be a `ReactNativeAD` instance, usually you will have one or more ReactNativeAD instances in your app, once you `new` a ReactNativeAD with a client_id in config, you can access the context globally in your this way\n\n```js\nlet ctx = ReactNativeAD.getContext('client-id-of-the-instance')\n```\n\n`onSuccess:function` **(optional)**\n\nA function to execute when `ADLoginView` completes authorization flow.\n\n`needLogout:bool` **(optional)**\n\nWhen it set to `true`, ADLoginView will logout user and redirect user to AD login page.\n\n`hideAfterLogin` **(optional)**\n\nWhen this property set to `true`, ADLoginView will be hidden after logged in, in prevention of displaying an empty/error web page.\n\n`onURLChange` **(optional)**\n\nA event listener which triggers when ADLoginView's URL change.\n\n### Class ReactNativeAD\n\nYou will need to create at least one `ReactNativeAD` object in your application, the ReactNativeAD object stores, and update authentication information in [AsyncStorage](http://facebook.github.io/react-native/releases/0.25/docs/asyncstorage.html#asyncstorage) automatically, it also provides several API for access theses informations.\n\n#### Constructor\n\nTo create a ReactNativeAD instance you have to give a configuration object as the first argument of constructor. Once the ReactNativeAD object created, you can access it globally in your application like this :\n\n```js\n\nnew ReactNativeAD({\n  client_id: 'client-id-#1',\n  resources: [\n    'https://outlook.office365.com'\n  ]})\n\n// this will return the object we created above  \nlet ctx = ReactNativeAD.getContext('client-id-#1')\n// use the stored context\nctx.assureToken('https://outlook.office365.com').then((token) =\u003e {\n  ...\n})\n\n\n```\n\nThe configuration object contains the following properties :\n\n`client_id:string` **Required**\n\nThe application `client_id`, this property is required, it's also the identifier of each ReactNativeAD context.\n\n`redirect_url:string` **Optional**\n\nAn url that ADLoginView will be redirect when login success, this property is optional.\n\n`authority_host:string` **Optional**\n\nThe url of authorization page, if not specified, it will use `https://login.microsoftonline.com/\u003ctenant id\u003e/oauth2/authorize` by default, where `\u003ctenant id\u003e` will be replaced with property `tenant`, if the default tenant is `common`.\n\n`tenant:string` **Optional**\n\nThe tenant id of application.\n\n`prompt:string` **Optional**\n\nIndicates the type of user interaction that is required. The only valid values are 'login', 'none' and 'consent'. For details, please refer to [this](https://docs.microsoft.com/en-us/azure/active-directory/active-directory-protocols-openid-connect-code) documentation.\n\n`login_hint:string` **Optional**\n\nCan be used to pre-fill the username/email address field of the sign-in page for the user, if you know their username ahead of time.\n\n`client_secret:string` **Required if use web application client_id**\n\nThis property is only required when your application uses a web application client_id, **but it is not recommended to do this way, because store client_secret in application could be dangerous**.\n\n`resouces:Array\u003cstring\u003e` **Required**\n\nA list of Azure AD resource endpoints, once user has authorized ADLoginView will try to acquire access token and related information of each resource endpoint you specified in this property.\n\n\n#### Properties\n\n[`config:[ADConfig]`](#user-content-adconfig)\n\nThis property stores configurations (such as client_id, resources ..) of a ReactNativeAD instance.\n\n[`credentials:[ADCredentials]`](#user-content-adcredentials)\n\nThis property stores acquired credential informatio for each resource endpoint. It a hash map structured data, with resource id as key, and a [ReactNativeADCredential](#user-content-ReactNativeADCredential) object as value.\n\n### Frequently used methods\n\n#### getConfig ():[ADConfig](#user-content-adconfig)\n\nThis method returns the ReactNativeAD instance's `config` property.\n\n#### getCredentials ()`:[ADCredentials](#user-content-adcredentials)\n\nThis method returns the ReactNativeAD instance's `credentials` property.\n\n#### getAccessToken(resouceId:string):string | null\n\nGet access token by given resource id, if no corresponding token exists returns null.\n\n#### assureToken(resource:string):Promise\u003c?string\u003e\n\nAssure that access_token of a resource is valid, when access token is expired, this method will attempt to refresh access token automatically and resolve renewed access token in promise. If it failed to renew the token, the access token in promise will be `undefined`, it means user may have to login again, so you might have to redirect user to ADLoginView for new authorization.\n\n### Methods for internal mechanism\n\n#### saveCredentials(data:ADCredentials):Promise\n\nThis method replace the ReactNativeAD instance's `credentials` property with the object in `data` argument. It will also save the each entry in `data` into AsyncStorage, with key = \u003cclient id\u003e.\u003cresource id\u003e. For example, if client_id of this ReactNativeAD instance is `eabc-123` and one of the entry's key is `http://graph.microsoft.com`(aka. resource id), then the data in this entry will be stored in AsyncStorage with key `eabc-123.http://graph.microsoft.com`.\n\n#### refreshToken(resourceId:string):Promise\u003c?string\u003e\n\nRefresh token of the resource, when credentials is empty, it will try to update access token for resource. The access token in promise is possible to be `undefined`, it means user may have to login again, so you might have to redirect user to ADLoginView for new authorization.\n\n#### checkCredential(resourceId:string):Promise\u003cReactNativeADCredential | null\u003e\n\nCheck credentials of the resource exist or not.\n\n#### grantAccessToken(grantType:string, params:any):Promise\u003cGrantTokenResp\u003e\n\nGet access_token by given `grant_type` and params, when this process success, it stores credentials in format of `ReactNativeADCredentials`, in both ReactNativeAD.credentials and AsyncStorage.\n\n### Flow Types\n\n#### ADConfig  \n\n```\n{\n  client_secret : string | null,\n  client_id : string | null,\n  redirect_url : string | null,\n  tenant : string | null,\n  prompt : string | null,\n  resources : Array\u003cstring\u003e | null,\n  login_hint : string | null,\n}\n```\n\n#### ADCredentials  \n\n```\n{\n  [key:string] : ReactNativeADCredential | null\n}\n```\n\n#### GrantTokenResp\n\n```\n{\n  resource : string,\n  response : Object\n}\n```\n\n#### ReactNativeADConfig\n\n```\n{\n  client_id : string,\n  redirect_url? : string,\n  authority_host : string,\n  tenant : string,\n  client_secret : string,\n  resources : any,\n  onSuccess : Function,\n}\n```\n\n#### ReactNativeADCredential  \n```\n{\n  access_token : string,\n  expires_in : number,\n  expires_on : number,\n  id_token : string,\n  not_before : number,\n  pwd_exp : string,\n  pwd_url : string,\n  refresh_token : string,\n  resource : string,\n  scope : string,\n  token_type : 'Bearer'\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwkh237%2Freact-native-azure-ad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwkh237%2Freact-native-azure-ad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwkh237%2Freact-native-azure-ad/lists"}