The Forge4Flow React library provides components, hooks, and helper methods for controlling access to pages and components in React using Forge4Flow. The library interacts directly with the Forge4Flow-Core API using short-lived session tokens that can be created server-side using your API key or using the built in Authentication methods.
Use npm to install @forge4flow/forge4flow-react:
npm install @forge4flow/forge4flow-reactWrap your application with Forge4FlowProvider, passing it your Client Key and API Endpoint. Forge4FlowProvider uses React Context to allow you to access utility methods for performing access checks anywhere in your app.
// App.jsximportReactfrom"react";import{Forge4FlowProvider}from"@forge4flow/forge4flow-react";constApp=()=>{return(<Forge4FlowProviderclientKey="client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E="endpoint="https://your_api_endpoint.com">{/* Routes, ThemeProviders, etc. */}</Forge4FlowProvider>);};exportdefaultApp;Once your application has been wrapped with Forge4FlowProvider you can simple call add the useForge4Flow hook then call the authenticate method.
import{useForge4Flow}from"@forge4flow/forge4flow-nextjs";constauth=useForge4Flow();consthandleLogin=async()=>{constlogin=awaitauth.authenticate();if(login){router.push("/admin");}};check is a utility function that returns a Promise which resolves with true if the user for the current session token has the specified relation on the specified object and returns false otherwise. Use it for fine-grained conditional rendering or for specific logic within components.
Using check through the useForge4Flow hook:
importReact,{useEffect}from"react";import{useForge4Flow}from"@forge4flow/forge4flow-react";constMyComponent=()=>{const{ check }=useForge4Flow();useEffect(()=>{constfetchProtectedInfo=async()=>{// Only fetch protected info from server if// user can "view" the info object "protected_info".constuserIsAuthorized=awaitcheck({object: {objectType: "info",objectId: "protected_info",},relation: "viewer",});if(userIsAuthorized){// request protected info from server}};fetchProtectedInfo();});return(<div>{protectedInfo&&<ProtectedInfo>{protectedInfo}</ProtectedInfo>}</div>);};exportdefaultMyComponent;Or using the React Context API:
importReact,{useEffect}from"react";import{Forge4FlowContext}from"@forge4flow/forge4flow-react";classMyComponentextendsReact.Component{asynccomponentDidMount(){const{ check }=this.context;// Only fetch protected info from server if// user can "view" the info object "protected_info".constuserIsAuthorized=awaitcheck({object: {objectType: "info",objectId: "protected_info",},relation: "viewer",});if(userIsAuthorized){awaitfetchProtectedInfo();}}asyncfetchProtectedInfo(){// request protected info from server}render(){return(<div>{protectedInfo&&<ProtectedInfo>{protectedInfo}</ProtectedInfo>}</div>);}}MyComponent.contextType=Forge4FlowContext;exportdefaultMyComponent;checkMany is a utility function that returns a Promise which resolves with true if the user for the current session token has all of or any of (based on a specified op) a set of specified warrants and returns false otherwise.
import{CheckOp}from"@forge4flow/forge4flow-js";const{ checkMany }=useForge4Flow();// userIsAuthorized will only be true if the user is// a member of tenant-A AND has permission view-protected-infoconstuserIsAuthorized=awaitcheckMany({op: CheckOp.AllOf,warrants: [{object: {objectType: "tenant",objectId: "tenant-A",},relation: "member",},{object: {objectType: "permission",objectId: "view-protected-info",},relation: "member",},],});hasPermission is a utility function that returns a Promise which resolves with true if the user for the current session token has the specified permissionId and returns false otherwise.
import{CheckOp}from"@forge4flow/forge4flow-js";const{ hasPermission }=useForge4Flow();// userHasPermission will only be true if the user// has the permission view-protected-infoconstuserHasPermission=awaithasPermission({permissionId: "view-protected-info",});hasFeature is a utility function that returns a Promise which resolves with true if the user for the current session token has the specified featureId and returns false otherwise.
import{CheckOp}from"@forge4flow/forge4flow-js";const{ hasFeature }=useForge4Flow();// userHasFeature will only be true if the user// has the feature protected-infoconstuserHasFeature=awaithasFeature({featureId: "protected-info",});ProtectedComponent is a utility component you can wrap around markup or components that should only be accessible to users with certain privileges. It only renders the components it wraps if the user has the given warrants.
importReactfrom"react";import{ProtectedComponent}from"@forge4flow/forge4flow-react";constMyComponent=()=>{return(<div><MyPublicComponent/>{/* hides MyProtectedComponent unless the user can "view" myObject with id object.id */}<ProtectedComponentwarrants={[{object: {objectType: "myObject",objectId: object.id,},relation: "view",},]}><MyProtectedComponent/></ProtectedComponent></div>);};exportdefaultMyComponent;PermissionProtectedComponent is a utility component you can wrap around markup or components that should only be accessible to users with certain privileges. It only renders the components it wraps if the user has the given permission.
importReactfrom"react";import{PermissionProtectedComponent}from"@forge4flow/forge4flow-react";constMyComponent=()=>{return(<div><MyPublicComponent/>{/* hides MyProtectedComponent unless the user has permission "view-protected-info" */}<PermissionProtectedComponentpermissionId="view-protected-info"><MyProtectedComponent/></PermissionProtectedComponent></div>);};exportdefaultMyComponent;FeatureProtectedComponent is a utility component you can wrap around markup or components that should only be accessible to users with certain privileges. It only renders the components it wraps if the user has the given feature.
importReactfrom"react";import{FeatureProtectedComponent}from"@forge4flow/forge4flow-react";constMyComponent=()=>{return(<div><MyPublicComponent/>{/* hides MyProtectedComponent unless the user has feature "protected-info" */}<FeatureProtectedComponentfeatureId="protected-info"><MyProtectedComponent/></FeatureProtectedComponent></div>);};exportdefaultMyComponent;Use the withForge4FlowCheck Higher Order Component (HOC) to protect components that should only be accessible to users with certain privileges.
NOTE: This example uses react-router but you can use any routing library.
// App.jsximportReactfrom"react";import{Router,Route,Switch}from"react-router-dom";import{createBrowserHistory}from"history";import{Forge4FlowProvider,withForge4FlowCheck}from"@forge4flow/forge4flow-react";importPublicPagefrom"./PublicPage";importProtectedPagefrom"./ProtectedPage";consthistory=createBrowserHistory();constApp=()=>{return<Forge4FlowProviderclientKey="client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E="><Routerhistory={history}><Switch><Routepath="/public_route"exactcomponent={PublicPage}/>{/* Only render ProtectedPage if the user can "view" the route "protected_route". */}<Routepath="/protected_route"exactcomponent={withForge4FlowCheck(ProtectedPage,{warrants: [{object: {objectType: "route",objectId: "protected_route",},relation: "view",}],redirectTo: "/public_route",})}></Switch></Router></Forge4FlowProvider>;
};exportdefaultApp;importReactfrom"react";import{withForge4FlowCheck}from"@forge4flow/forge4flow-react";constMySecretComponent=()=>{return<div>Super secret text</div>;};// Only render MySecretComponent if the user// can "view" the component "MySecretComponent".exportdefaultwithForge4FlowCheck(MySecretComponent,{warrants: [{object: {objectType: "component",objectId: "MySecretComponent",},relation: "view",},],redirectTo: "/",});Use the withPermissionCheck Higher Order Component (HOC) to protect components that should only be accessible to users with a certain permission.
NOTE: This example uses react-router but you can use any routing library.
// App.jsximportReactfrom"react";import{Router,Route,Switch}from"react-router-dom";import{createBrowserHistory}from"history";import{Forge4FlowProvider,withPermissionCheck}from"@forge4flow/forge4flow-react";importPublicPagefrom"./PublicPage";importProtectedPagefrom"./ProtectedPage";consthistory=createBrowserHistory();constApp=()=>{return<Forge4FlowProviderclientKey="client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E="><Routerhistory={history}><Switch><Routepath="/public_route"exactcomponent={PublicPage}/>{/* Only render ProtectedPage if the user has the "view-protected-route" permission. */}<Routepath="/protected_route"exactcomponent={withPermissionCheck(ProtectedPage,{permissionId: "view-protected-route",redirectTo: "/public_route",})}></Switch></Router></Forge4FlowProvider>;
};exportdefaultApp;importReactfrom"react";import{withPermissionCheck}from"@forge4flow/forge4flow-react";constMySecretComponent=()=>{return<div>Super secret text</div>;};// Only render MySecretComponent if the user// has the "view-protected-route" permission.exportdefaultwithPermissionCheck(MySecretComponent,{permissionId: "view-protected-route",redirectTo: "/",});Use the withFeatureCheck Higher Order Component (HOC) to protect components that should only be accessible to users with a certain feature.
NOTE: This example uses react-router but you can use any routing library.
// App.jsximportReactfrom"react";import{Router,Route,Switch}from"react-router-dom";import{createBrowserHistory}from"history";import{Forge4FlowProvider,withFeatureCheck}from"@forge4flow/forge4flow-react";importPublicPagefrom"./PublicPage";importProtectedPagefrom"./ProtectedPage";consthistory=createBrowserHistory();constApp=()=>{return<Forge4FlowProviderclientKey="client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E="><Routerhistory={history}><Switch><Routepath="/public_route"exactcomponent={PublicPage}/>{/* Only render ProtectedPage if the user has the "protected-route" feature. */}<Routepath="/protected_route"exactcomponent={withFeatureCheck(ProtectedPage,{featureId: "protected-route",redirectTo: "/public_route",})}></Switch></Router></Forge4FlowProvider>;
};exportdefaultApp;importReactfrom"react";import{withFeatureCheck}from"@forge4flow/forge4flow-react";constMySecretComponent=()=>{return<div>Super secret text</div>;};// Only render MySecretComponent if the user// has the "protected-route" feature.exportdefaultwithFeatureCheck(MySecretComponent,{featureId: "protected-route",redirectTo: "/",});