@vtfk/react-msal

MSAL (Azure auth) React hook

Install

npm install --save @vtfk/react-msal

Usage

config.js

export const config = {
  auth: {
    clientId: '<client-id>',
    authority: 'https://login.microsoftonline.com/<tenant-id>',
    redirectUri: '<https://app-hostname.com>',
    postLogoutRedirectUri: '<https://direct-url.com'
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: false
  }
}

// See valid values here: https://azuread.github.io/microsoft-authentication-library-for-js/ref/msal-browser/modules/_src_request_redirectrequest_.html
export const loginRequest = {
  scopes: ['openid', 'profile', 'User.Read']
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { MsalProvider } from '@vtfk/react-msal'
import { config, loginRequest } from './config'

ReactDOM.render(
  <React.StrictMode>
    <MsalProvider config={config} scopes={loginRequest}>
      <App />
    </MsalProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

App.js

const App = () => {
  const { isAuthenticated, login, authStatus } = useSession()

  if (['pending'].includes(authStatus)) {
    return <div>Loading...</div>
  }

  if (!isAuthenticated) {
    console.log('app-!isAuth')
    login(loginRequest)
    return <></>
  }

  if (isAuthenticated && authStatus === 'finished') {
    return <div>Hello authenticated user!</div>
  }
}

useSession()

The useSession() hook has these methods and objects available:

• isAuthenticated (bool)
• authStatus (string) - values are: pending, finished, rejected, unknown
• user (object) - user object from MS Graph - example
• token (string) - access_token from MS Graph
• idToken (string) - id_token from MS Graph
• popupOpen (bool) - true if login popup is open
• loginError (object) - login error object
• login (function) - trigger login
• logout (function) - trigger logout (clears session storage and redirects to azure)
• getToken (function) - gathers and returns the users access token
• apiGet (function) - gets data from provided URL using the users id_token
• apiPost (function) - posts the provided data to the URL using the users id_token
• apiPut (function) - updates/put the provided data to the URL using the users id_token
• apiDelete (function) - deletes data from provided URL using the users id_token

User object

{
  displayName: 'Trine Testesen',
  givenName: 'Trine',
  name: 'Trine Testesen',
  onPremisesSamAccountName: 'tri0308',
  surname: 'Testesen',
  tenantId: '08f3813c-9f29-482f-9aec-16ef7cbf477a',
  userPrincipalName: '[email protected]',
  username: '[email protected]'
}

License

MIT © Vestfold og Telemark fylkeskommune