@vtfk/react-oidc

OIDC (React hook)

Install

npm install --save @vtfk/react-oidc

Usage

config.js

export const config = {
  authority: 'https://oidc-ver2.difi.no/idporten-oidc-provider/.well-known/openid-configuration',
  client_id: 'client-id',
  client_secret: 'client-secret',
  redirect_uri: 'http://localhost:3000',
  silent_redirect_uri: 'http://localhost:3000',
  post_logout_redirect_uri: 'https://www.vtfk.no/',
  response_type: 'code',
  scope: 'openid profile',
  loadUserInfo: true,
  acr_values: 'Level3'
}

index.js

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { IDPortenProvider } from '@vtfk/react-oidc'
import { auth } from './config'

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

App.js

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

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

  if (!isAuthenticated) {
    console.log('app-!isAuth')
    login()
    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 ID-porten - example
• token (string) - access_token from ID-porten
• idToken (string) - id_token from ID-porten
• loginError (object) - login error object
• login (function) - trigger login
  Parameters

  • method (string): loginRedirect or loginPopup
• logout (function) - trigger logout (clears session storage and redirects to azure)
  Parameters

  • method (string): logoutRedirect or logoutPopup

User object

{
  "sub": "autogenerated", // subject identifier - an unique identifier for the authenticated user. The value is pairwise, meaning a given client will always get the same value, whilst different clients do not get equal values for the same user
  "amr": [ // "Authentication Method References” - Method of authentication
      "Minid-PIN"
  ],
  "pid": "ssn", // "Personidentifikator” - the Norwegian national ID number (fødselsnummer/d-nummer) of the autenticated end user. This claim is not included if no_pid scope was requested or pre-registered on the client
  "locale": "nb", // The language selected by the user during the authentication in ID-porten
  "sid": "autogenerated", // session id - an unique identifier for end user session at ID-porten. May be needed when performing logout
  "acr": "Level3", // "Authentication Context Class Reference” - The security level of assurance for the authentication. Possible values are Level3 (i.e. MinID was used) or Level4 (other eIDs). The level must be validated by the client
  "auth_time": 1651221115, // Timestamp indicating when the authentication was performed
  "jti": "autogenerated" // jwt id - unique identifer for a given token
}

License

MIT © Vestfold og Telemark fylkeskommune