Merge pull request #6 from warrant-dev/SupportV2Authorize

Support v2 authorize

Author: stanleyphu

README.md

@@ -173,7 +173,7 @@ export default MyComponent;
 import React from "react";
 import { Router, Route, Switch } from "react-router-dom";
 import { createBrowserHistory } from "history";
-import { WarrantProvider, ProtectedRoute, WARRANT_IGNORE_ID } from "@warrantdev/react-warrant-js";
+import { WarrantProvider, ProtectedRoute } from "@warrantdev/react-warrant-js";
 import PublicPage from "./PublicPage";
 import ProtectedPage from "./ProtectedPage";
 
@@ -227,28 +227,6 @@ const MyComponent = () => {
 export default MyComponent;
 ```
 
-**NOTE:** To ignore the `objectId` when using any of the provided components, you can pass the constant `WARRANT_IGNORE_ID`. You must have a corresponding warrant that grants access to **ANY** user on the given `objectType` for this check to succeed.
-```jsx
-import React from "react";
-import { ProtectedComponent, WARRANT_IGNORE_ID } from "@warrantdev/react-warrant-js";
-
-const MyComponent = () => {
-    return <div>
-        <MyPublicComponent/>
-        {/* Only shows MyProtectedComponent if the user can "view" ANY myObject */}
-        <ProtectedComponent
-            objectType="myObject"
-            objectId={WARRANT_IGNORE_ID}
-            relation="view"
-        >
-            <MyProtectedComponent/>
-        </ProtectedComponent>
-    </div>;
-};
-
-export default MyComponent;
-```
-
 ### `withWarrant`
 Use the `withWarrant` Higher Order Component (HOC) to protect components that should only be accessible to users with certain privileges.
 

package-lock.json

@@ -48,6 +48,6 @@
     "react-router-dom": "^5.2.0"
   },
   "dependencies": {
-    "@warrantdev/warrant-js": "^0.0.5"
+    "@warrantdev/warrant-js": "^1.0.0"
   }
 }

package.json

@@ -1,24 +1,22 @@
 import React, { useEffect, useState } from "react";
+import { WarrantCheck } from "@warrantdev/warrant-js";
 import useWarrant from "./useWarrant";
 
-export interface ProtectedComponentProps {
-    objectType: string;
-    objectId: string;
-    relation: string;
+export interface ProtectedComponentProps extends WarrantCheck {
     children: React.ReactChildren;
 }
 
-const ProtectedComponent: React.FunctionComponent<ProtectedComponentProps> = ({ objectType, objectId, relation, children }) => {
+const ProtectedComponent: React.FunctionComponent<ProtectedComponentProps> = ({ op, warrants, children }) => {
     const [showChildren, setShowChildren] = useState<boolean>(false);
     const { sessionToken, hasWarrant } = useWarrant();
 
     useEffect(() => {
-        if (!objectId) {
-            throw new Error("Invalid or no objectId provided to ProtectedComponent");
+        if (!warrants || warrants.length === 0) {
+            throw new Error("Invalid or no warrants provided to ProtectedComponent");
         }
 
         const checkWarrant = async () => {
-            setShowChildren(await hasWarrant(objectType, objectId, relation));
+            setShowChildren(await hasWarrant({ op, warrants }));
         }
 
         if (sessionToken) {

src/ProtectedComponent.tsx

@@ -1,12 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { Redirect, Route, RouteProps } from "react-router-dom";
-import { WARRANT_IGNORE_ID } from "@warrantdev/warrant-js";
+import { WarrantCheck } from "@warrantdev/warrant-js";
 import useWarrant from "./useWarrant";
 
-export interface ProtectedRouteOptions {
-    objectType: string;
-    objectIdParam: string;
-    relation: string;
+export interface ProtectedRouteOptions extends WarrantCheck {
     redirectTo: string;
 }
 
@@ -17,9 +14,8 @@ export interface ProtectedRouteProps extends RouteProps {
 
 const ProtectedRoute: React.FunctionComponent<ProtectedRouteProps> = ({
     options: {
-        objectType,
-        objectIdParam,
-        relation,
+        op,
+        warrants,
         redirectTo,
     },
     component,
@@ -30,24 +26,23 @@ const ProtectedRoute: React.FunctionComponent<ProtectedRouteProps> = ({
     const [showWrappedComponent, setShowWrappedComponent] = useState<boolean | null>(null);
 
     useEffect(() => {
-        const checkForWarrant = async (objectId: string) => {
-            setShowWrappedComponent(await hasWarrant(objectType, objectId, relation));
+        const checkForWarrant = async (warrantCheck: WarrantCheck) => {
+            setShowWrappedComponent(await hasWarrant(warrantCheck));
         };
 
         if (sessionToken) {
-            let objectId = "";
-            if (objectIdParam === WARRANT_IGNORE_ID) {
-                objectId = WARRANT_IGNORE_ID;
-            } else {
-                /** @ts-ignore */
-                objectId = computedMatch.params[objectIdParam];
-            }
+            warrants.forEach((warrant) => {
+                if (computedMatch.params[warrant.objectId]) {
+                    /** @ts-ignore */
+                    warrant.objectId = computedMatch.params[warrant.objectId];
+                }
 
-            if (!objectId) {
-                throw new Error("Invalid or no objectIdParam provided for ProtectedRoute");
-            }
+                if (!warrant.objectId) {
+                    throw new Error("Invalid or no objectId provided for ProtectedRoute");
+                }
+            })   
 
-            checkForWarrant(objectId);
+            checkForWarrant({ op, warrants });
         }
     }, [sessionToken]);
 

src/ProtectedRoute.tsx

@@ -1,10 +1,11 @@
 import { createContext } from "react";
+import { WarrantCheck } from "@warrantdev/warrant-js";
 
 export interface AuthorizationContext {
     clientKey: string;
     sessionToken: string;
     setSessionToken: (sessionToken: string) => void;
-    hasWarrant: (objectType: string, objectId: string, relation: string) => Promise<boolean>;
+    hasWarrant: (warrantCheck: WarrantCheck) => Promise<boolean>;
     isLoading: boolean;
 }
 

src/WarrantContext.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Client as WarrantClient } from "@warrantdev/warrant-js";
 
+import { WarrantCheck } from "@warrantdev/warrant-js";
 import WarrantContext from "./WarrantContext";
 
 export interface AuthorizationProvider {
@@ -28,13 +29,13 @@ const WarrantProvider = (options: AuthorizationProvider): JSX.Element => {
         localStorage.setItem(LOCAL_STORAGE_KEY_SESSION_TOKEN, newSessionToken);
     };
 
-    const hasWarrant = useCallback(async (objectType: string, objectId: string, relation: string): Promise<boolean> => {
+    const hasWarrant = useCallback(async (warrantCheck: WarrantCheck): Promise<boolean> => {
         if (!sessionToken) {
             throw new Error("No session token provided to Warrant. You may have forgotten to call setSessionToken with a valid session token to finish initializing Warrant.");
         }
 
         setIsLoading(true);
-        const isAuthorized = await new WarrantClient(clientKey, sessionToken).isAuthorized(objectType, objectId, relation);
+        const isAuthorized = await new WarrantClient(clientKey, sessionToken).isAuthorized(warrantCheck);
         setIsLoading(false);
 
         return isAuthorized;

src/WarrantProvider.tsx

@@ -4,4 +4,3 @@ export { default as WarrantProvider } from "./WarrantProvider";
 export { default as useWarrant } from "./useWarrant";
 export { default as ProtectedComponent } from "./ProtectedComponent";
 export { default as ProtectedRoute } from "./ProtectedRoute";
-export { WARRANT_IGNORE_ID } from "@warrantdev/warrant-js";

src/index.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
+import { WarrantCheck } from "@warrantdev/warrant-js";
 import useWarrant from "./useWarrant";
 
 export interface WithWarrantOptions {
-    objectType: string;
-    objectId: string;
-    relation: string;
+    warrantCheck: WarrantCheck;
     redirectTo: string;
 }
 
@@ -17,13 +16,13 @@ export interface WithWarrantOptions {
  */
 const withWarrant = (WrappedComponent: React.ComponentClass, options: WithWarrantOptions) => {
     return (props: any) => {
-        const { objectType, objectId, relation, redirectTo } = options;
+        const { warrantCheck, redirectTo } = options;
         const { sessionToken, hasWarrant } = useWarrant();
         const [showWrappedComponent, setShowWrappedComponent] = useState<boolean>(false);
 
         useEffect(() => {
             const checkWarrant = async () => {
-                setShowWrappedComponent(await hasWarrant(objectType, objectId, relation));
+                setShowWrappedComponent(await hasWarrant(warrantCheck));
             };
 
             if (sessionToken) {