@intility/react-msal v3.9.5

react-msal is used to auth any react app through MSAL (Work in progress)

Installation

Add .npmrc file to get the library from artifactory

@intility:registry=https://artifactory.intility.io/artifactory/api/npm/npm-local/

npm

npm i @intility/react-msal

Example usage

render() {
  return (
    <MsalAuth
      options={{
        clientId: 'client_id',
        authority: 'https://login.microsoftonline.com/<TENANT>',
        scopes: ['']
      }}
      msalDataHandler={data => console.log(data)}
      loader={() => <LoaderComponent />}
    >
      <YourApp />
    </MsalAuth>
  );
}

Default options (all of these can be overwritten)

const options = {
  clientId: '', // Your app's client id
  redirect: true, // Choose between redirect and popup login
  authority: 'https://login.microsoftonline.com/common', // Allows everyone with a MS account to log in. Specify URL and tenant if you only want to allow user from an organization
  scopes: [], // Specify permission scopes
  redirectUri: window.location.origin, // Set app's current url as redirect uri
  logging: false, // Will log stuff to console
};

Props

msalDataHandler: A function that recieves the access token and user data

loader: A react component that will be rendered if no access token exists

useMsal Hook

Documentation for variables.

Example usage

import React, { useEffect } from 'react';
import { useMsal } from '@intility/react-msal';

// specify the configs outside the component
const config = {
  auth: {
    clientId: 'your-client-id', 
    redirectUri: 'redirect-uri-after-logging-in'
  }
};

const graphScopes = ['user.read'];
const someApiScopes = ['api-guid/Read.All'];
const loginRequest = {
  scopes: [].concat(graphScopes, onboardScopes)
};
const clientConfig = { 
  loginRequest, 
  redirect: false, // optional, default to false
  handleRedirectCallback: (error, response) => {}, // optional
  manualAccessToken: true // optional, default to false. Use createAuthedFetch unless you need to decode access token manually
};

const graphRequest = { scopes: graphScopes };
const apiRequest = { scopes: someApiScopes };

const App = () => {
  const { 
    user, 
    login, 
    logout, 
    createAuthedFetch, 
    authenticating, 
    getAccessToken // only if manualAccessToken is true
  } = useMsal(config, clientConfig);

  const graphFetch = createAuthedFetch(graphRequest);
  const someApiFetch = createAuthedFetch(apiRequest);

  useEffect(() => {
    if (!user) return;

    graphFetch('graph-endpoint')
    .then(response => response.json())
    .then(data => console.log(data));

    // if manualAccessToken is true in clientConfig
    getAccessToken(graphRequest)
    .then(accessToken => console.log(accessToken));
  }, [user]);
  
  return (
    <div>
      {authenticating && 
        <SomeLoader />
      }
      {!user && !authenticating && 
        <p>I am not authenticated!</p>
        <button onClick={login}>Login</button>
      }
      {user && 
        <p>I am authenticated!</p>
        <button onClick={logout}>Logout</button>
      }
    </div>
  )
}

The function created by createAuthedFetch calls fetch to the URL specified, and with the options sent in. In addition, it adds the Authorization header with the value of Bearer {accessToken}, where the access token is fetched before each request.

As it is possible to obtain access tokens from multiple resources, msal cannot handle mutliple token requests at the same time. This means that if you need to use the function created by createAuthedFetch, make sure not to run more than one at the same time, as msal doesn't fetch the subsequent tokens while it already is fetching one. This was possible in the preview versions, so this may change to support simultaneous token fetches in a later version of this package.

Example:

graphFetch('graph-endpoint')
.then(response => response.json())
.then(handleGraphData)
.then(() => someApiFetch('api-url')) // :(
.then(response => response.json())
.then(handleCustomApiData);