Function MfaProvider

React Component that provides the context for the useUserMeetsMfaRequirement() hook and <MultiFactorAuthentication /> component, to be used by components further down your component tree. It should only be included in your component tree once and ideally at the root of the application.

Example

import * as React from 'react'
import {
  MfaProvider,
  useUserMeetsMfaRequirement,
} from '@oneblink/apps-react'

function Component({ teamMemberMfaRequirement }) {
  const { mfaSetupRequired, isLoading, loadingError, refreshMfa } =
    useUserMeetsMfaRequirement(teamMemberMfaRequirement)

  if (isLoading) {
    return <Loading />
  }

  if (loadingError) {
    return <Error onRetry={refreshMfa} />
  }

  if (mfaSetupRequired) {
    return <ConfigureMfa />
  }

  return <Application />
}

function App({ teamMemberMfaRequirement }) {
  return (
    <MfaProvider isExternalIdentityProviderUser={false}>
      <Component teamMemberMfaRequirement={teamMemberMfaRequirement} />
    </MfaProvider>
  )
}

const root = document.getElementById('root')
if (root) {
  ReactDOM.render(<App teamMemberMfaRequirement={mfaRequirement} />, root)
}
Copy