guarded-components v0.0.18

guarded-components

This is used to protect pages or components such as buttons based on the user's state. It seems that this is a common problem in industry and there are no packages that I am aware of which work for most jsx compatible frameworks with any authorization strategies. This package allows the user to take control of this problem by simply defining strategies based on contracts which they determine.

details

example

This is a basic example showing the different types of guards that you could have. Note the differences in the contracts and the combination of strategies.

import {Guard, createStrategy} from "guarded-components";
 
const loggedin = createStrategy(
  {
    shall: true,
    get: ()=>user.isLoggedin(),
    breach: ()=>{window.href.location = "www.website.com/login"}
  },
);
 
const admin = createStrategy(
  {
    shall: "admin",
    get: ()=>user.getRoles().admin,
    breach: ()=>{window.href.location = "www.website.com"}
  },
);
 
<Guard
    strategy={loggedin}
>
    Make sure you are loggedin otherwise you are getting redirected!
</Guard>
<br></br>
<Guard
    strategy={admin}
    hide
>
    If you aren't an admin you can't see me.
</Guard>
<br></br>
<Guard
    strategy={[admin, loggedin]}
>
    You have to be an admin AND loggedin :/
</Guard>
<br></br>
<Guard
    strategy={[admin, loggedin]}
>
    You have to be an admin AND loggedin :/
</Guard>

This should theoretically support things such as react-redux. However I have not tested it. It would probably look something like this. You might need to use a useRef for the selector

//This is an example contract if you were using something like react-redux
const state = useSelector((store)=>store.admin.state);
 
{
    shall: "admin"
    get: ()=>{state},
    breach: ()=>{alert("NO YOU CANT DO THAT!")}
}