@permify/react-permify NPM

@permify/react-permify

npm

Permify React library provides components, hooks, and helper methods for controlling access checks and user permissions throughout your entire React application via Permify API.

Installation

Use npm to install:

npm install @permify/react-permify

Use yarn to install:

yarn add @permify/react-permify

How to use

`PermifyProvider`

Wrap the part of your application where you want to perform access checks with PermifyProvider. Yo should pass some props to PermifyProvider in order to utilize from Permify components, hooks and helper methods.

Props

workspaceId - The Id of the workspace you are working on. (mandatory)
publicToken - API key which provided from Permify. (mandatory)

import React from "react";
import { PermifyProvider } from "@permify/react-permify";

const App = () => {
    return (
        <PermifyProvider
            publicToken="Permify public API key"
            workspaceId="The ID of the Workspace you are working on"
        >
            {/* Application layer, Routes, ThemeProviders etc. */}
        </PermifyProvider>;
    )
};

export default App;

User Identification

In order to complete Permify setup for your application, you should set logged in user Id with our setUserId function. Our advice is call this method in your login functions promise.

Set the user id using the usePermify hook:

const { setUserId } = usePermify();

const login = async (e) => {
    const response = await login(email, password);

    setUserId(response.userId);

    //
    // Continue authentication flow
    //         
};

Or using PermifyContext:

import React from "react";
import { PermifyContext } from "@permify/react-permify";

const AuthComponent = () => {
    const login = (setUserId) => {
        return async (event) => {
            const response = await login(email, password);

            setUserId(response.userId);

            //
            // Continue authentication flow
            // 
        };
    };

    return (
        <PermifyContext.Consumer>
            {({ setUserId }) => (
                <form onSubmit={login(setUserId)}>
                    {/* form layer */}
                </form>
            )}
        </PermifyContext.Consumer>; 
    )
};

export default AuthComponent;

`isAuthorized(policy, action)`

isAuthorized is a helper function that returns a Promise which resolves with true if the user is authorized for action with the given parameters, if not it resolves with false.

You should call it inside a conditional logic structure; maybe in conditionaly rendering UI or a simple if check for fetching protected information.

Because it returns Promise you should be call it with await or resolve the Promise result to get boolean output.

Using isAuthorized through the usePermify hook:

Parameters

policyName (mandatory) \ Custom Permify Policy name.
Action (mandatory) \ Custom Policy Action.
resourceId (optional) \ Id of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.
resourceType (optional) \ Type or name of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.

import React, {useState, useEffect} from "react";
import { usePermify } from "@permify/react-permify";

const AnyComponent = () => {
    const { isAuthorized, isLoading } = usePermify();

    ..
    ..

    const fetchProtectedData = async () => {
        //post-edit passed as policyName parameter
        if (await isAuthorized('post', 'edit', '91', 'post')) {
            // fetch data from server
        } 
    };
};

export default AnyComponent;

`PermifyComponent`

PermifyComponent is a wrapper component that you can wrap around components or UI Layers that should only be accessible to users have authorization.

It hides or blurs (depends on the value of type prop) the components it wraps if the user has not authorized

Props

policyName (mandatory) \ Custom Permify Policy name.
action (mandatory) \ Custom Policy action.
resourceId (optional) \ Id of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.
resourceType (optional) \ Type or name of the Resource, mandatory if any resource used or accessed when creating Rule/Rules.
renderAuthFailed (optional) \ React Element that will be rendered on access denied.
isLoading (optional) \ React Element that will be rendered on loading state.

import React from "react";
import { PermifyComponent } from "@permify/react-permify";

const AnyComponent = () => {
    return (
        ..
        ..

       <PermifyComponent
            policyName='content'
            action='delete'
            isLoading={<Spinner/>}
            renderAuthFailed={<p>Access Denied!</p>}
        >
             <button type="button"> Delete </button>
        </PermifyComponent>

        ..
        ..
    )
};

export default App;