https://github.com/sidecus/authzyin.js
Policy based authorization in React
https://github.com/sidecus/authzyin.js
authorization hooks policy reactjs
Last synced: 5 months ago
JSON representation
Policy based authorization in React
- Host: GitHub
- URL: https://github.com/sidecus/authzyin.js
- Owner: sidecus
- License: mit
- Created: 2020-06-23T17:02:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T21:50:11.000Z (over 3 years ago)
- Last Synced: 2025-07-06T23:37:49.109Z (11 months ago)
- Topics: authorization, hooks, policy, reactjs
- Language: TypeScript
- Homepage:
- Size: 1.57 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# authzyin.js
> Javascript library to enable policy based authorization in React.
[](https://www.npmjs.com/package/authzyin.js) [](https://standardjs.com) 
This library enables [policy based authorization](https://docs.microsoft.com/en-us/aspnet/core/security/authorization/policies?view=aspnetcore-3.1) in React. It supports various types of policy/requirement evaluations leveraging JSON path.
Simply define your policies, initialize and authorize!
There is also a server library [authzyin](https://github.com/sidecus/authzyin). Using **authzyin.js** together with **authzyin** can further simplify your authorization story across server and client.
## Install
```Shell
npm install --save authzyin.js
```
## Usage
1. Initialize ```AuthZyinContext``` (similar as ```createStore``` in Redux, call this globally).
```typescript
// Initialize context
initializeAuthZyinContext();
```
2. Wrap your main component with ```AuthZyinProvider``` (similar as ```Provider``` in Redux, should be at the top of your component hierarchy right after authentication).
```typescript
// Wrap main content with AuthZyinProvider after signing in
export const App = () => {
if (signedIn) {
return (
);
}
}
```
3. Now you can call the ```useAuthorize``` hook to achieve policy based authorization in your components like below.
```typescript
const authorize = useAuthorize();
// pure policy + user based
const IsCustomer = authorize('IsCustomer');
// policy + resource + user based
const barAuthorized = authorize('CanEnterBar' /*policy*/, bar /*resource*);
```
If you are using class components and for whaterver reason cannot use the ```useAuthorize``` hook, you can use the built in ```Authorize``` component instead. It uses [React render props](https://reactjs.org/docs/render-props.html) to pass the authorization result to a children function to render as below:
```typescript
{
// Below function is used as the "render props" children to Authorize.
(authorized) => {
// You can now use the authorized result in your components
return <>>;
}
}
```
The sample [PlaceComponent](https://github.com/sidecus/authzyin.js/blob/master/example/src/components/PlaceComponent.tsx) shows usage of both patterns.
## AuthZyinProvider Flexibility
To better suite your project needs, ```AuthZyinProvide``` also provides some flexibilities to initialize the authorization context (of type ```AuthZyinContext```).
- **Already loaded the context before hand**: Pass your context object to the ```initializeAuthZyinContext``` method. ```AuthZyinProvider``` will simply use it as is.
- **Need to load context from your own api**: Pass your api url to the ```AuthZyinProvider``` options. The provider will load it from the URL (HTTP GET) for you.
- **Use together with authzyin server library**: Everything is taken care of for you automatically. You might need to pass a ```requestInitFn``` async call back as part of the ```AuthZyinProvider``` options to customize the authentication.
## Build and run locally
```bash
# Build lib
yarn install
yarn build
# build and run example
cd example
yarn start
```
Or use docker:
```bash
docker build -t authzyin.js .
docker run -p 8080:80 authzyin.js
```
# Happy coding. Peace.
MIT © [sidecus](https://github.com/sidecus)