{"id":21481267,"url":"https://github.com/mobilereality/react-native-msal-module","last_synced_at":"2025-07-15T12:33:12.669Z","repository":{"id":36496658,"uuid":"227845704","full_name":"MobileReality/react-native-msal-module","owner":"MobileReality","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T03:16:40.000Z","size":2510,"stargazers_count":5,"open_issues_count":17,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-21T06:42:47.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MobileReality.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-13T13:25:28.000Z","updated_at":"2019-12-18T17:26:15.000Z","dependencies_parsed_at":"2023-01-17T02:15:26.774Z","dependency_job_id":null,"html_url":"https://github.com/MobileReality/react-native-msal-module","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileReality%2Freact-native-msal-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileReality%2Freact-native-msal-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileReality%2Freact-native-msal-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MobileReality%2Freact-native-msal-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MobileReality","download_url":"https://codeload.github.com/MobileReality/react-native-msal-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226039613,"owners_count":17564180,"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":[],"created_at":"2024-11-23T12:22:54.289Z","updated_at":"2024-11-23T12:22:54.944Z","avatar_url":"https://github.com/MobileReality.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-msal-module\n\n\n# MSAL authorization library for React Native\n\n\n\u003e Looking for the MSAL plugin for React Native, here you are\n\nBased on great plugin but deprecated [react-native-msal-plugin](https://github.com/rmcfarlane82/react-native-msal-plugin)\n\n## **Important!**\n\n### Package has been tested only on React Native 0.59.9 and 0.60+.\n\u003ca href=\"https://www.npmjs.com/package/react-native-msal-module\"\u003e\u003cimg src=\"https://img.shields.io/badge/version-0.1.3-brightgreen\" alt=\"NPM version\"\u003e\u003c/a\u003e\n \u003ca href=\"/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-orange\" alt=\"License\"\u003e\u003c/a\u003e\n\n\nSupport\n\n- React Native 0.59.9 and 0.60+ ✅\n- iOS 13 (tested) ✅\n- AndroidX (tested) ✅\n- Typescript ✅\n\n## Instalation\n\n`$ npm install react-native-msal-module --save`\n\n\u003e Automatic linking is not tested. We recommend manual linking\n\n#### iOS\n\nSetting the plugin requires adding proper properties in Info.plist and AppDelegate.m . Here is\n the [documentation](https://github.com/AzureAD/microsoft-authentication-library-for-android) of MSAL for iOS client. More in second point below.\n\n- We provide only Cocoapods linking. In your pod file add:\n```\n  ...\n  # Lines below\n  pod 'MSAL', '~\u003e 1.0.3' # \u003c~ This line \n  pod 'react-native-msal-module', :path =\u003e '../node_modules/react-native-msal-module' # \u003c~  this line\n  \n  ...\n\n  end\n```\n- After that `pod install`\n\n- You need to implement **Configuring MSAL** [step](https://github.com/AzureAD/microsoft-authentication-library-for-objc#configuring-msal)\n    1. Make sure you have done [Adding MSAL to your project](https://github.com/AzureAD/microsoft-authentication-library-for-objc#adding-msal-to-your-project) (3 points)\n    2. Make suer you have done [iOS only steps](https://github.com/AzureAD/microsoft-authentication-library-for-objc#ios-only-steps) (**2 points**)\n    3. Add code below to your `AppDelegate.m` (3rd point of [iOS only steps](https://github.com/AzureAD/microsoft-authentication-library-for-objc#ios-only-steps))\n    ```\n    #import \u003cReact/RCTBridge.h\u003e\n    #import \u003cReact/RCTBundleURLProvider.h\u003e\n    #import \u003cReact/RCTRootView.h\u003e\n  \n    #import \u003cMSAL/MSAL.h\u003e // \u003c~ add this line(header file from MSAL)\n  \n  ...\n  \n  // this section, starting from here\n   - (BOOL)application:(UIApplication *)application\n               openURL:(NSURL *)url\n               options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options\n   {\n       return [MSALPublicClientApplication handleMSALResponse:url\n                                            sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]];\n   }\n  // ending here\n   ```\n\nThat's all!\n\n#### Android\n\nFirst of all, according to the Android [documentation](https://github.com/AzureAD/microsoft-authentication-library-for-android) and this plugin you should implement steps below:\n\n- Add file `msal_config.json` ([draft](https://github.com/AzureAD/microsoft-authentication-library-for-android#step-2-create-your-msal-configuration-file)) in `assets` directory in `[your-project]/android/app/src/main`\n\n    -  **remember** that `redirect_uri` includes `YOUR_BASE64_URL_ENCODED_PACKAGE_SIGNATURE` so you need BASE64 format of SIGNATURE parsed into URL. The same thing should be added in your Azure panel under redirect uris section\n\n    - Also remember that your release signature differ with debug signature\n- Implement this [step](https://github.com/AzureAD/microsoft-authentication-library-for-android#step-3-configure-the-androidmanifestxml) in your `AndroidManifest.xml`\n\n- Linking:\n\n    - in `[your-project]/android/app/build.gradle` add:\n    ```\n  dependencies {\n  ...\n  implementation project(':react-native-msal-module') // \u003c~ add this line\n  ...\n  }\n  ```\n  - in `[your-project]/android/settings.gradle` add:\n  ```\n  rootProject.name = '\u003cNAME_OF_YOUR_PROJECT\u003e'\n  ...\n  include ':react-native-msal-module' // \u003c~ add this line\n  project(':react-native-msal-module').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-msal-module/android') // \u003c~ add this line\n  ...\n  \n  include ':app'\n  ```\n  **If your project is based on RN v0.60+ you can omit step below as you will overwrite already automatically linked package**  \n  - in `[your-project]/android/app/src/main/java/com/[your-project]/MainApplication.java` add:\n  ```\n  package \u003cYOUR_APP_PACKAGE\u003e\n  ...\n  import com.reactlibrary.RNMsalModulePackage; // \u003c~ add this line\n  ...\n  \n  public class MainApplication extends Application implements ReactApplication {\n\n  ...\n   @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            new MainReactPackage(),\n            ...\n            new RNMsalModulePackage(), // \u003c~ add this line\n            ...\n        );\n      }\n  ...\n  ```\n That's all, you did it!\n  \n## Usage\n\n\n### Initialization\n```javascript\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport MSAL from 'react-native-msal-module';\n\nexport class App extends React.Component {\n    componentDidMount() {\n        MSAL.init(\u003cYOUR_CLIENT_ID\u003e);\n    }\n    \n    render() {\n       \u003cView\u003e\n            \u003cText\u003eApp\u003c/Text\u003e \n       \u003c/View\u003e\n    }\n\n};\n```\n\n### Acquire token\n```\n    acquireTokenAsync: (scopes: string[]) =\u003e Promise\u003cMSALResponse\u003e;\n```\n```javascript\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport MSAL from 'react-native-msal-module';\n\nexport class App extends React.Component {\n    async componentDidMount() {\n        // Acquire token can be executed only after successful initalization of MSAL\n        // Pass needed scopes\n        const msalResponse = await MSAL.acquireTokenAsync(scopes);\n    }\n    render() {\n       \u003cView\u003e\n            \u003cText\u003eApp\u003c/Text\u003e \n       \u003c/View\u003e\n    }\n}\n```\n\n#### MSAL reponse\n| Parameter     | type | \n| ---------------------- | :---: |\n| **accessToken**                  | String | \n| **idToken**              | String |\n| **userId**              | String |\n| **expiresOn**              | String |\n| **userInfo**              | MSALUser type |\n\n#### MSALUser type\n| Parameter     | type | \n| ---------------------- | :---: |\n| **username**                  | String | \n| **userIdentifier**              | String |\n| **environment**              | String |\n| **tenantId**              | String |\n\n\n### Acquire token silently\n```\n    acquireTokenSilentAsync: (scopes: string[], userIdentifier: string) =\u003e Promise\u003cMSALResponse\u003e;\n```\n```javascript\nimport React from 'react';\nimport { View, Text } from 'react-native';\nimport MSAL from 'react-native-msal-module';\n\nexport class App extends React.Component {\n    async componentDidMount() {\n        // Acquire token silent can be executed only after successful initalization of MSAL\n        // Pass userId retrieved from aqcuireToken and scopes\n        const msalResponse = await MSAL.acquireTokenSilentAsync(scopes, userId);\n    }\n    render() {\n       \u003cView\u003e\n            \u003cText\u003eApp\u003c/Text\u003e \n       \u003c/View\u003e\n    }\n}\n```\n\n---\n### Example\n\nIn project you can find sample implementation for both platforms(iOS and Android). Example is built with RN v0.61.5. **Example won't work** without changes in config files.\n\n### Known issues\n\n- ~~idToken is currently unavailable in Android https://github.com/AzureAD/microsoft-authentication-library-for-android/issues/850~~\n- Sometimes webview in iOS has refreshing loop\n\n### Roadmap\nIt's unclear when official plugin will be released so for now:\n- [x] ~~Test on newest React Native version~~\n- [ ] Write tests\n- [x] ~~Add example~~ \n- [ ] Implement methods for [Single Account](https://docs.microsoft.com/pl-pl/azure/active-directory/develop/single-multi-account#single-account-scenario)\n\n### License\n- See [LICENSE](https://github.com/MobileReality/react-native-msal-module/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobilereality%2Freact-native-msal-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmobilereality%2Freact-native-msal-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmobilereality%2Freact-native-msal-module/lists"}