Skip to main content

Introduction

Oneki.js provides an authentication / authorization library to implement the following use cases:

Authentication (AuthN)​

info

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

Use caseDescription
Form basedAuthentication with a username and password provided via a standard web form
External authenticationAuthentication is handled by an external system that redirects to the application once authenticiation is complete
Open ID ConnectAuthentication via the Open ID Connect authorization code flow. Oneki.js fully implements the standard (including state and nonce)
Oauth2 Authentication via Oauth2 authorization code flow.

Authorization (AuthZ)​

Use caseDescription
Secure componentHOC (High-Order Component) to secure any component.
E.g: Give access to an admin page to authorized users only
Security contextThe security context represents the logged-in user's profile and is available anywhere in the application

A common use case is to retrieve the logged-in user's roles from the security context to display or not certains fields

Architecture​

Oneki.js implements the same logic for all types of authentication

In the schema above, the logic specific to the type of authentication is entirely based on configuration variables found in src/settings.ts

Example: Here is the logic specific to a form based authentication

Configuration​

As usual, the configuration is done via src/settings.ts

Here is a example of a Form based authentication configuration:

export default {
  idp: {
    default: {
      type: "form",
      loginEndpoint: "/api/auth",
      logoutEndpoint: "/api/logout",
      userinfoEndpoint: "/api/whoami",
    },
  },
};

The various configuration are described in detail on this page

Secure page / component​

Oneki.js provides an HOC to secure a component:

const SecureComponent = secure(Component, validator, options);

If the user is not yet logged in, this HOC redirects him to the login page
If the logged user doesn't have the right to display the page, it displays an error

Examples​
// Only verify that the user is logged in
const SecuredPage = secure(Page);

// verify that the user is logged in and has the role ADMIN
const SecuredPage2 = secure(Page2, (securityContext) => {
  return securityContext &&
         securityContext.roles &&
         securityContext.roles.includes('ADMIN'));
}

Secure HOC is described in detail on this page

Security context​

The security context is stored in the global state of Redux under the auth.securityContext key and is accessible everywhere with the useSecurityContext hook

const [securityContext, loading] = useSecurityContext(selector, defaultValue);

The content of the security context is usually the attributes of the connected user such as email, name, firstname, roles, ...
Example: The claims present in an JWT ID Token

Oneki.js doesn't expect a specific format for the security context. You can put whatever you want.

Examples​
// get the whole securityContext
// securityContext is undefined if user is not logged in
const [securityContext, loading] = useSecurityContext();

// retrieve a specific attribute of the securityContext
// email is undefined if user is not logged in
const [email, loading] = useSecurityContext("email");

The security context is described in detail on this page

Services​

Oneki.js provides 4 services that you can use to implement the authentication process:

ServiceDescription
loginService that processes the login request. e.g: a AJAX POST request, a redirect to an OIDC IDP, ...
login callbackWhen authentication is peformed by an external party (e.g., an OIDC Identity Provider), this service handles the callback
logoutService that processes the logout request
logout callbackWhen the logout is peformed by an external party (e.g., an OIDC Identity Provider), this service handles the callback

Example​

Login with Google
examples/cra-examples/src/auth/login/google/IndexPage.tsx
loading...