To use the IAMv2 authentication system, you will need an OpenID Connect (OIDC) client. The following steps will walk you through adding it to your React application with one of the available react clients that is using backound workers.

Install the OIDC client¶

The OIDC client is a JavaScript library that will help us with the authentication flow. To install it, run the following command:

npm install @axa-fr/react-oidc

Documentation and code of this library can be found here.

Add the OIDC client to your application¶

The OIDC client is a React component that will be added to your application. The following steps will walk you through adding it to your React application.

Configuring the list of trusted domains¶

The OIDC client will redirect the user to the login page of the authentication system. The authentication system will then redirect the user back to your application. To do this, the OIDC client needs to know the list of trusted domains.

For that open the public/OidcTrustedDomains.js and change it to this:

const trustedDomains = {
  default: [
    'https://login.mike-cloud.com',
    'https://api.mike-cloud.com'
  ]
}

All domains the app is potentially communicating with must be added here. This includes the domain of the authentication system and the domains of the API. Only those will get the bearer token added to the request.

Adding the config inside of the `index.js` file¶

The OIDC client needs to be configured with the authentication system's URL. To do that, open the src/index.js file and add the following code:

const openIdConfig = {
  client_id: config.auth.clientName,
  authority: config.auth.url,
  redirect_uri: `${window.location.origin}/authentication/callback`,
  silent_redirect_uri: `${window.location.origin}/authentication/silent-callback`,
  scope: 'openid offline_access',
  service_worker_relative_url: '/OidcServiceWorker.js',
  service_worker_only: false,
  refresh_time_before_token_expiration_in_second: 120
}

The redirect uris are routing back to the SPA itself. SPA does not need its own backend, it is optional. If it has the backend for frontend on the same hostname address, the backend code must passthrough the requests to leave the route handling for SPA.

There are two values coming from the configuration file, clientId and authority. Both values should be injected from the configuration. The backend team will provide you with the values. Contact wdpservice in case you need help.

{
  "clientName": "<your app id>",
  "url": "https://login.mike-cloud-dev.com"
}

Wrapping the application with the OIDC client¶

The OIDC client needs to be wrapped around the application. To do that, open the src/index.js file and add the following code:

import { OidcProvider, useOidc } from '@axa-fr/react-oidc'

...

const { login } = useOidc()

...

<OidcProvider
  configuration={openIdConfig}
  onSessionLost={() => {
    login() // If the session is lost, automatically retry the login.
  }}
  authenticatingComponent={() => (
    <WaitingForAuthentication/>
  )}
  callbackSuccessComponent={() => (
    <WaitingForTokenFetch />
  )}
  authenticatingErrorComponent={() => (
    <AuthenticationError />
  )}
  loadingComponent={() => (
    <LoadingAuthentication/>
  )}
>

You need to implement the components WaitingForAuthentication, WaitingForTokenFetch, AuthenticationError and LoadingAuthentication. The OIDC client will use them to display the authentication flow. Inside of the AuthenticationError component, you can add a link to the login page of the authentication system. This will allow the user to retry the authentication flow. For that you can use the following code:

import { useOidc } from '@axa-fr/react-oidc'

...

const { login } = useOidc()

and then add the following code to the onClick event of the button:

<button onClick={() => login()}>Retry</button>

Triggering the authentication in views¶

To automatically trigger the authentication flow in your views, simply wrap them in the OidcSecure component. For example, if you have a view called MyView you can wrap it in the OidcSecure component like this:

import React from 'react'
import { OidcSecure } from '@axa-fr/react-oidc'

const MyView = () => (
  <OidcSecure>
    <h1>My sub component</h1>
  </OidcSecure>
)

export default AdminSecure

Getting user data from the authentication system¶

With this:

import { useOidcIdToken } from '@axa-fr/react-oidc'

...

const { idTokenPayload } = useOidcIdToken()

you get the data from the authentication system.

The bearer token¶

Usually you would get the bearer token inside of your client app. But since this is inherently dangerous in Javascript bassed applications, it is hidden inside of a service worker. Your Javascript will not have access to it, but all requests to domains listed in the OidcTrustedDomains.js file will get the bearer token added to the request automatically.

You can see the service worker in public/OidcServiceWorker.js. This file will be updated every time you run npm install and should not be changed by you in any way.