@rnx-kit/react-native-test-app-msal


Microsoft Authentication Library (MSAL) module for
React Native Test App.

Install

Add @rnx-kit/react-native-test-app-msal as a dev dependency:

``
yarn add @rnx-kit/react-native-test-app-msal --dev
`

or if you're using npm:

`
npm add --save-dev @rnx-kit/react-native-test-app-msal
`

$3

We need to set the deployment target for iOS and macOS to 14.0 and 11.0 (or
higher) respectively, and add MSAL to Podfile:

`diff
+platform :ios, '14.0' # If targeting iOS, discard the line below
+platform :macos, '11.0' # If targeting macOS, discard the line above
+
require_relative '../node_modules/react-native-test-app/test_app'

workspace 'MyTestApp.xcworkspace'

+use_test_app! do |target|
+ target.app do
+ # We must use modular headers here otherwise Swift compiler will fail
+ pod 'MSAL', :modular_headers => true
+ end
+end
`

Usage

Add an entry for the account switcher in your app.json, e.g.:

`diff
{
"name": "MyTestApp",
"displayName": "MyTestApp",
"components": [
{
"appKey": "MyTestApp",
+ },
+ {
+ "appKey": "com.microsoft.reacttestapp.msal.MicrosoftAccountsActivity",
+ "displayName": "MicrosoftAccounts (Android)"
+ },
+ {
+ "appKey": "MicrosoftAccounts",
+ "displayName": "MicrosoftAccounts (iOS/macOS)"
}
],
"resources": {
"android": ["dist/res", "dist/main.android.bundle"],
"ios": ["dist/assets", "dist/main.ios.jsbundle"],
"macos": ["dist/assets", "dist/main.macos.jsbundle"],
"windows": ["dist/assets", "dist/main.windows.bundle"]
}
}
`

Register your app with a unique bundle identifier to get your Azure Active
Directory client identifier and related scopes
(quickstart here),
then fill out the following fields in app.json:

`diff
{
"name": "MyTestApp",
"displayName": "MyTestApp",
"components": [
{
"appKey": "MyTestApp",
},
{
"appKey": "com.microsoft.reacttestapp.msal.MicrosoftAccountsActivity",
"displayName": "MicrosoftAccounts (Android)"
},
{
"appKey": "MicrosoftAccounts",
"displayName": "MicrosoftAccounts (iOS/macOS)"
}
],
+ "android": {
+ "package": "com.contoso.MyTestApp"
+ },
+ "ios": {
+ "bundleIdentifier": "com.contoso.MyTestApp"
+ },
+ "macos": {
+ "bundleIdentifier": "com.contoso.MyTestApp"
+ },
+ "react-native-test-app-msal": {
+ "clientId": "4b0db8c2-9f26-4417-8bde-3f0e3656f8e0",
+ "msaScopes": ["user.read"],
+ "orgScopes": ["user.read"],
+ "signatureHash": "1wIqXSqBj7w+h11ZifsnqwgyKrY="
+ },
"resources": {
"android": ["dist/res", "dist/main.android.jsbundle"],
"ios": ["dist/assets", "dist/main.ios.jsbundle"],
"macos": ["dist/assets", "dist/main.macos.jsbundle"],
"windows": ["dist/assets", "dist/main.windows.bundle"]
}
}
`

Getting a Token from Native Code

A token can be acquired from native code using the TokenBroker singleton.

$3

On Android, we will need the Context to retrieve the singleton, and the
current Activity to acquire a token. We need the Activity in case we need to
ask the user to log in:

`kotlin
import com.microsoft.reacttestapp.msal.TokenBroker

TokenBroker.getInstance(context).acquireToken(context.currentActivity, ...) { result, error ->
// handle result here
}
`

$3

On iOS/macOS, we will need the current UIViewController (iOS) or
NSViewController (macOS) to acquire a token in case we need to ask the user to
log in:

`swift
import ReactTestApp_MSAL

TokenBroker.shared.acquireToken(scopes: ..., sender: viewController) { result, error ->
// handle result here
}
``