Web-Fuse OIDC Web Client

OIDC web client made for interacting with Web-Fuse APIs

Includes simple pages for

• Login (redirect or error)
• Logout (redirect or status)
• Register (currently disabled)
• Login callback
• Logout callback

Also includes a PageAlert component that can be used for notifying the user of errors on the page.

How to use

The package exports a single class that holds the current login state. Before any API calls can be made the class must be configured with the configure() function. Most importantly this will set the API base url.

Configuration options

• options.apiBaseUrl Base url of the API: http://example.com/v1
• options.siteHost Application hostname: http://example.com, will default to window.location.origin
• options.homePath Where the user will be redirect if no last visited page was found "/" by default
• options.redirectBlacklist If the user is on one of these pages, the user will not be redirected to last visited page. It will be checked if the current url starts with the blacklisted string
• options.supportEmail Email address displayed on some of the pages for support
• options.onSignin Callback after an auth code has been exchanged for login tokens, the tokens are provided as an argument
• options.onSignout Callback after the signout procedure has been completed, the global argument indicates if the user completely logged out from the browser

Application example

In index.js

import WfOidc from "@web-fuse/oidc-web"

WfOidc.configure({
  apiBaseUrl: "http://example.com/v1"
})

In your routes:

import WfOidc from "@web-fuse/oidc-web"

/** @type {import("react-router-dom").RouteObject["loader"]} */
const validateToken = async ({ request }) => {
  try {
    const redirectTo = await WfOidc.checkUserLogin(request.url)
    // redirect to the last visited page or home page
    if (redirectTo) return redirect(redirectTo)
    return null
  } catch (err) {
    if (err instanceof WfOidc.errors.TokenError) {
      window.location.href = WfOidc.getAuthorizationEndpoint().toString()
      // add timeout to hide the error and let the browser redirect
      await new Promise(r => setTimeout(r, 1000))
      // react-router-dom wants us to throw an error
      throw new Error(err.message)
    }
    throw err
  }
}

/** @type {import("react-router-dom").RouteObject} */
const route = {
  path: "",
  loader: validateToken,
  children: [...]
}