Authentication types

The goal of the authentication library is to provide the same service / methods for any type of authentication. Everything specific to a type of authentication is configured in src/settings.ts

There are 4 types of authentication, each having their specific configuration format:

Use case	Description
Form based	Authentication with a username and password provided via a standard web form
External authentication	Authentication is handled by an external system that redirects to the application once authenticiation is complete
Open ID Connect	Authentication via the Open ID Connect authorization code flow. Oneki.js fully implements the standard (including state and nonce) oidc_server means that the exchange of the authorization code for a token is done on backend side oidc_client means that everything is done on client side (less secure but doesn't require a server)
Oauth2	Authentication via Oauth2 authorization code flow.

Configuration

The authentication services provided by Oneki.js retrieve their configuration from the key idp/:idpName in src/settings.ts where idpName is an ID used when the service is instantied.

Examples

Content of src/settings.ts

info

Each type of authentication has its own parameters, but some are common, such as

• type: the type of authentication
• userinfoEndpoint: represents the URL to retrieve the profile of the connected user

export default {
  idp: {
    default: {
      type: "form",
      loginEndpoint: "/api/lgoin",
      logoutEndpoint: "/api/logout",
      userinfoEndpoint: "/api/userinfo",
      ...
    },
    myOidc: {
      type: "oidc_server",
      authorizeEndpoint: process.env.REACT_APP_AUTHORIZE_ENDPOINT,
      userinfoEndpoint: "/api/userinfo",
      ...
    },
    myOidcClient: {
      type: "oidc_client",
      ...
    },
    myExternal: {
      type: "external",
      ...
    },
    myOauth2: {
      type: "oauth2",
      ...
    }
  }
}

Instantiation of the service:

// Login service will use the configuration idp.myId
useLoginService('myId');

// As no id is indicated below, login service will use idp.default
useLoginService();

Configuration parameter value

For many attributes in src/settings.ts, the value can be a string, a Function or an async Function

Example:

loginEndpoint: '/en/auth'
// or
loginEndpoint: (context) => {
  return `https://example.com/${context.i18n.locale}/auth`
}
// or
loginEndpoint: async (context) => {
  return await myAsyncFunction("foo");
}

Context

The context contains the following attributes:

const context = {
  idp // the configuration of the active IDP from settings.ts
  router
  store // the Redux store
  settings // the full settings.ts
  i18n // to know which locale is active
}

See API for more details

Callback

Via src/settings.ts you can specific an (optional) callback executed at the end of the authentication process

callback: (result, context) => [token, securityContext]

The callback receives the context but also a result object. The result object is specific to the type of authentication
Example: For a Form based authentication, the result object is the response from the backend

The callback returns optionally a token and/or a securityContext:

• The token must have a specific format described here. Oneki.js stores the token in one of the following location (based on the configuration attribute persist):
  • no storage (if persist = null)
  • global state with the key auth.token (if persist = "memory")
  • cookie (if persist = "cookie")
  • sessionStorage (if persist = "sessionStorage")
  • localStorage (if persist = "localStorage")
• The securityContext is stored in the global state with the key auth.securityContext

Example

Example of settings.ts

Settings

examples/cra-examples/src/settings.ts

loading...

See full example on GitHub

👁 Preview