Secure component

Oneki.js provides an HOC to secure any 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 connected user doesn't have the right to display the page, it displays an error

Example

Page accessible only to authenticated users

The secure HOC is generally used to secure a page.
The example below shows how to secure a page so that only authenticated users can view it.

Login

examples/cra-examples/src/auth/SecurePage.tsx

loading...

See full example on GitHub

👁 Preview

Page accessible only to admin users

The example below shows how the secure HOC can verify it the authenticated user has the required role

The profile of the user returned by the server looks like this:

{
  "username": "John",
  "roles": ["admin"]
}

Login

examples/cra-examples/src/auth/UltraSecurePage.tsx

loading...

See full example on GitHub

Backend API

app/api/auth/login/route.ts

loading...

See full example on GitHub

👁 Preview

Parameters

Inputs

Mandatory parameters are marked with a *

Parameter	Type	Description
Component*	ElementType	the component to protect. Only authorized users will see it
validator	(securityContext) => boolean	By default, a user is authorized if he's connected. validator is a function to apply more complex logic like authorizing the user based on an attribute in the security context
options	Object	Object with non mandatory attributes Defaults: {}
options. ErrorComponent	React Component	The component to display if the user is not authorized or not yet logged in. By default if he user is not yet logged in, he's redirected to the login page if he's not authorized, a dummy component is displayed

Outputs

Parameter	Type	Description
SecureComponent*	React Component	The component secured