react-native-msal

react-native-msal

Live Demo (Web)

https://stashenergy.github.io/react-native-msal/

Table of Contents

• Install
• Setup
• Use
  • PublicClientApplication class
  • B2C Applications
• Example app
• Migrating from v2 to v3

Install

Requires React Native >=0.61

Stable version:
$ yarn add react-native-msal

Beta version:
$ yarn add react-native-msal@beta

Don't forget to run npx pod-install after!

Setup

1. Register your application in the Azure Portal
2. Follow the Android Setup steps
3. Follow the iOS Setup steps

Use

import PublicClientApplication from 'react-native-msal';
import type { MSALConfiguration /*, etc */ } from 'react-native-msal';

const config: MSALConfiguration = {
  auth: {
    clientId: 'your-client-id',
    // This authority is used as the default in `acquireToken` and `acquireTokenSilent` if not provided to those methods.
    // Defaults to 'https://login.microsoftonline.com/common'
    authority: 'https://<authority url>',
  },
};
const scopes = ['scope1', 'scope2'];

// Initialize the public client application:
const pca = new PublicClientApplication(config);
try {
  await pca.init();
} catch (error) {
  console.error('Error initializing the pca, check your config.', error);
}

// Acquiring a token for the first time, you must call pca.acquireToken
const params: MSALInteractiveParams = { scopes };
const result: MSALResult | undefined = await pca.acquireToken(params);

// On subsequent token acquisitions, you can call `pca.acquireTokenSilent`
// Force the token to refresh with the `forceRefresh` option
const params: MSALSilentParams = {
  account: result!.account, // or get this by filtering the result from `pca.getAccounts` (see below)
  scopes,
  forceRefresh: true,
};
const result: MSALResult | undefined = await pca.acquireTokenSilent(params);

// Get all accounts for which this application has refresh tokens
const accounts: MSALAccount[] = await pca.getAccounts();

// Retrieve the account matching the identifier
const account: MSALAccount | undefined = await pca.getAccount(result!.account.identifier);

// Remove all tokens from the cache for this application for the provided account
const success: boolean = await pca.removeAccount(result!.account);

// Same as `pca.removeAccount` with the exception that, if called on iOS with the `signoutFromBrowser` option set to true, it will additionally remove the account from the system browser
const params: MSALSignoutParams = {
  account: result!.account,
  signoutFromBrowser: true,
};
const success: boolean = await pca.signOut(params);

B2C Applications

The PublicClientApplication class is a bit too bare bones for dealing with a B2C application, and you will need to write a bit of code to get the desired behavior.

To address this issue, the example app that is included in this repository includes a B2CClient class which contains a lot of the functionality you will need for a B2C app. You can copy this class right into your own React Native app and modify it to your liking. You can see it being used in the example's App.tsx

If you would like to see this class included in the library itself, please let us know.

Example App

As mentioned above, the example app demonstrates a B2C implementation

To run the example locally, first clone the repo and run $ yarn to bootstrap the project. Then run the following for the desired platform:

iOS: $ yarn example ios
Android: $ yarn example android
Web: $ yarn example web (the example app is also running live here)

If you want to run the example using your own Azure application information:

1. Register the redirect URLs in your tenant:
   • Android: msauth://com.example/Xo8WBi6jzSxKDVR4drqm84yr9iU%3D
   • iOS: msauth.com.example://auth
   • Web (SPA): http://localhost:19006
2. Update the b2cConfig and b2cScopes variables in msalConfig.ts with your details.

Migrating between major versions

See breaking changes in CHANGELOG.md.