@webiny/app-security 0.0.0-mt-1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# @webiny/app-security
+[![](https://img.shields.io/npm/dw/@webiny/app-security.svg)](https://www.npmjs.com/package/@webiny/app-security) 
+[![](https://img.shields.io/npm/v/@webiny/app-security.svg)](https://www.npmjs.com/package/@webiny/app-security)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+Exposes a simple `SecurityProvider` React provider component and enables you to quickly retrieve the currently signed-in user via the `useSecurity` React hook.
+
+## Install
+```
+npm install --save @webiny/app-security
+```
+
+Or if you prefer yarn: 
+```
+yarn add @webiny/app-security
+```
+
+## Quick Example
+
+First, make sure you mount the `SecurityProvider` React provider component in your application's entrypoint component, for example the `App` component: 
+
+```tsx
+import React from "react";
+import { Routes } from "@webiny/app/components/Routes";
+import { BrowserRouter } from "@webiny/react-router";
+import { SecurityProvider } from "@webiny/app-security";
+import Authenticator from "./components/Authenticator";
+
+export const App = () => (
+    <>
+        {/*
+        <SecurityProvider> is a generic provider of identity information. 3rd party identity providers (like Cognito,
+        Okta, Auth0) will handle the authentication, and set the information about the user into this provider,
+        so other parts of the system have a centralized place to fetch user information from.
+    */}
+        <SecurityProvider>
+            {/* This is the component that might trigger the initial authentication
+        process and set the retrieved user data into the Security provider.*/}
+            <Authenticator>
+                <BrowserRouter basename={process.env.PUBLIC_URL}>
+                    <Routes />
+                </BrowserRouter>
+            </Authenticator>
+        </SecurityProvider>
+    </>
+);
+```
+
+A simple `Authenticator` React component (uses Amazon Cognito and AWS Amplify's [`Auth`](https://github.com/aws-amplify/amplify-js/blob/main/packages/auth/src/Auth.ts#L100) class):
+
+```tsx
+import React, { useEffect } from "react";
+import Auth from "@aws-amplify/auth";
+import { useSecurity, SecurityIdentity } from "@webiny/app-security";
+
+// Apart from the React component, we also configure the Auth class here.
+Auth.configure({
+    region: process.env.REACT_APP_USER_POOL_REGION,
+    userPoolId: process.env.REACT_APP_USER_POOL_ID,
+    userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID,
+    oauth: {
+        domain: process.env.REACT_APP_USER_POOL_DOMAIN,
+        redirectSignIn: `${location.origin}?signIn`,
+        redirectSignOut: `${location.origin}?signOut`,
+        responseType: "token"
+    }
+});
+
+// The `Authenticator` component.
+const Authenticator: React.FC = props => {
+    const { setIdentity } = useSecurity();
+
+    useEffect(() => {
+        // Get the currently signed-in user.
+        Auth.currentSession().then(response => {
+            const user = response.getIdToken().payload;
+            setIdentity(
+                new SecurityIdentity({
+                    login: user.email,
+                    firstName: user.given_name,
+                    lastName: user.family_name,
+                    logout: () => {
+                        Auth.signOut();
+                        setIdentity(null);
+                    }
+                })
+            );
+        }).catch(() => { /* Do nothing. */ });
+    }, []);
+
+    return <>{props.children}</>;
+};
+
+export default Authenticator;
+```
+
+Finally, use the `useSecurity` React hook in any of your components:
+
+```tsx
+import React from "react";
+import { useSecurity } from "@webiny/app-security";
+
+const MyComponent: React.FC = () => {
+  const { identity } = useSecurity();
+
+  if (identity) {
+    return <>Logged in.</>;
+  }
+
+  return <>Not logged in.</>;
+};
+
+export default MyComponent;
+```

package/components/SecureRoute.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare const _default: ({ children, permission }: {
+    children: any;
+    permission?: string;
+}) => React.ReactElement;
+export default _default;

package/components/SecureRoute.js

@@ -0,0 +1,27 @@
+import { useSecurity } from "..";
+import { plugins } from "@webiny/plugins";
+export default (function (_ref) {
+  var children = _ref.children,
+      permission = _ref.permission;
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var hasPermission = false;
+
+  if (identity) {
+    hasPermission = permission ? Boolean(identity.getPermission(permission)) : true;
+  }
+
+  if (hasPermission) {
+    return children;
+  }
+
+  var plugin = plugins.byName("secure-route-error");
+
+  if (!plugin) {
+    return null;
+  }
+
+  return plugin.render();
+});

package/components/SecureView.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { SecurityPermission } from "../types";
+interface ChildrenRenderFunctionArgs<T extends SecurityPermission> {
+    hasPermission: boolean;
+    permission: T;
+}
+interface Props<T extends SecurityPermission> {
+    children: ((args: ChildrenRenderFunctionArgs<T>) => React.ReactElement) | React.ReactElement;
+    permission?: string;
+}
+declare function SecureView<T extends SecurityPermission>({ children, permission }: Props<T>): React.ReactElement;
+export default SecureView;

package/components/SecureView.js

@@ -0,0 +1,28 @@
+import { useSecurity } from "..";
+
+function SecureView(_ref) {
+  var children = _ref.children,
+      permission = _ref.permission;
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var hasPermission = false;
+  var matchedPermission = null;
+
+  if (identity) {
+    matchedPermission = identity.getPermission(permission);
+    hasPermission = Boolean(matchedPermission);
+  }
+
+  if (typeof children === "function") {
+    return children({
+      hasPermission: hasPermission,
+      permission: matchedPermission
+    });
+  }
+
+  return hasPermission ? children : null;
+}
+
+export default SecureView;

package/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SecureView } from "./SecureView";
+export { default as SecureRoute } from "./SecureRoute";

package/components/index.js

@@ -0,0 +1,2 @@
+export { default as SecureView } from "./SecureView";
+export { default as SecureRoute } from "./SecureRoute";

package/contexts/Security.d.ts

@@ -0,0 +1,9 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { SecurityIdentity, SecurityPermission } from "../types";
+export declare const SecurityContext: React.Context<SecurityContextValue>;
+export interface SecurityContextValue {
+    identity: SecurityIdentity | null;
+    setIdentity: Dispatch<SetStateAction<SecurityIdentity>>;
+    getPermission<T extends SecurityPermission = SecurityPermission>(name: string): T;
+}
+export declare const SecurityProvider: (props: any) => JSX.Element;

package/contexts/Security.js

@@ -0,0 +1,44 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import minimatch from "minimatch";
+import React, { useState, useMemo, useCallback } from "react";
+export var SecurityContext = /*#__PURE__*/React.createContext(null);
+export var SecurityProvider = function SecurityProvider(props) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      identity = _useState2[0],
+      setIdentity = _useState2[1];
+
+  var getPermission = useCallback(function (name) {
+    if (!identity) {
+      return null;
+    }
+
+    var perms = identity.permissions || [];
+    var exactMatch = perms.find(function (p) {
+      return p.name === name;
+    });
+
+    if (exactMatch) {
+      return exactMatch;
+    } // Try matching using patterns
+
+
+    return perms.find(function (p) {
+      return minimatch(name, p.name);
+    });
+  }, [identity]);
+  var value = useMemo(function () {
+    return {
+      identity: identity ? _objectSpread(_objectSpread({}, identity), {}, {
+        // For backwards compatibility, expose the `getPermission` method on the `identity` object.
+        getPermission: getPermission
+      }) : null,
+      setIdentity: setIdentity,
+      getPermission: getPermission
+    };
+  }, [identity]);
+  return /*#__PURE__*/React.createElement(SecurityContext.Provider, {
+    value: value
+  }, props.children);
+};

package/hooks/useSecurity.d.ts

@@ -0,0 +1,2 @@
+export declare type UseSecurity = ReturnType<typeof useSecurity>;
+export declare function useSecurity(): import("../contexts/Security").SecurityContextValue;

package/hooks/useSecurity.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { SecurityContext } from "../contexts/Security";
+export function useSecurity() {
+  return useContext(SecurityContext);
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./contexts/Security";
+export * from "./hooks/useSecurity";

package/index.js

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./contexts/Security";
+export * from "./hooks/useSecurity";

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "@webiny/app-security",
+	"version": "0.0.0-mt-1",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"contributors": [
+		"Pavel Denisjuk <pavel@webiny.com>",
+		"Sven Al Hamad <sven@webiny.com>",
+		"Adrian Smijulj <adrian@webiny.com>"
+	],
+	"license": "MIT",
+	"dependencies": {
+		"@webiny/app": "0.0.0-mt-1",
+		"@webiny/plugins": "0.0.0-mt-1",
+		"minimatch": "3.0.4",
+		"react": "16.14.0",
+		"react-dom": "16.14.0"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.5.5",
+		"@babel/core": "^7.5.5",
+		"@babel/plugin-proposal-class-properties": "^7.5.5",
+		"@babel/preset-env": "^7.5.5",
+		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.8.3",
+		"@webiny/cli": "^0.0.0-mt-1",
+		"@webiny/project-utils": "^0.0.0-mt-1",
+		"babel-plugin-emotion": "^9.2.8",
+		"babel-plugin-lodash": "^3.3.4",
+		"babel-plugin-named-asset-import": "^1.0.0-next.3e165448",
+		"rimraf": "^3.0.2",
+		"ttypescript": "^1.5.12",
+		"typescript": "^4.1.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"svgo": {
+		"plugins": {
+			"removeViewBox": false
+		}
+	},
+	"adio": {
+		"ignore": {
+			"peerDependencies": [
+				"react-dom"
+			]
+		}
+	},
+	"gitHead": "37736d8456a6ecb342a6c3645060bd9a3f2d4bb0"
+}

package/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Plugin } from "@webiny/app/types";
+export declare type SecureRouteErrorPlugin = Plugin & {
+    render(): React.ReactElement;
+};
+export interface FullAccessPermission {
+    name: "*";
+}
+export interface SecurityPermission {
+    name: string;
+    [key: string]: any;
+}
+export interface SecurityIdentity {
+    id: string;
+    type: string;
+    displayName: string;
+    permissions?: SecurityPermission[];
+    logout(): void;
+    getPermission?<T extends SecurityPermission = SecurityPermission>(name: string): T;
+    [key: string]: any;
+}

package/types.js

@@ -0,0 +1 @@
+export {};