Integrated AWS (account) as cloud provider via AWS Amplify

Signed-off-by: Lars Haferkamp <lars.haferkamp@comsysto.com>

Author: LHaferkamp

examples/demo-app/README.md

@@ -23,7 +23,58 @@ export MapboxAccessToken=<your_mapbox_token>
 ```
 
 #### 3. Start the app
-
 ```sh
 npm start
 ```
+
+## Cloud Providers
+
+### Connecting your AWS Account
+
+#### 1. Setup AWS Amplify CLI
+[Install and configure](https://docs.amplify.aws/cli/start/install) the Amplify CLI:
+```sh
+npm install -g @aws-amplify/cli
+```
+```sh
+amplify configure
+```
+
+#### 2. Setup AWS services needed
+
+Setup AWS [Authentication](https://docs.amplify.aws/cli/auth/overview) and [Storage](https://docs.amplify.aws/lib/storage/getting-started/q/platform/js)
+
+These steps create a new Cloudformation stack, a Cognito user pool and a S3 bucket and connect both via policies.
+
+```sh
+amplify add auth
+```
+```sh
+amplify add storage
+```
+
+Always finish Amplify changes by:
+```sh
+amplify push
+```
+
+If Amplify services only needs to be updated run
+```sh
+amplify update auth
+```
+```sh
+amplify update storage
+```
+
+#### 3. AWS Amplify configuration for Kepler.gl
+
+Copy the file `aws-exports.js` generated by the previous step into the `demo-app/src` folder (there is already an empty one to avoid startup problems)
+
+Finally, set the AWSAccountName (just for display) in the environment:
+```sh
+export AWSAccountName=demo-account
+```
+
+#### Notes on AWS as cloud provider
+- URLs of shared maps expire after one hour.
+

examples/demo-app/package.json

@@ -9,7 +9,10 @@
     "start-local-https": "webpack-dev-server --mode development --https --env.es6 --progress --hot --open"
   },
   "dependencies": {
+    "@aws-amplify/storage": "3.2.0",
+    "@aws-amplify/ui-react": "^0.2.5",
     "@carto/toolkit": "0.0.1-rc.18",
+    "aws-amplify": "3.0.11",
     "d3-request": "^1.0.6",
     "dropbox": "^4.0.12",
     "global": "^4.3.0",
@@ -55,11 +58,12 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
+    "json-loader": "^0.5.7",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-middleware": "^3.5.1",
     "webpack-dev-server": "^3.1.14",
     "webpack-hot-middleware": "^2.24.3",
     "webpack-stats-plugin": "^0.2.1"
   }
-}
+}

examples/demo-app/src/aws-exports.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

examples/demo-app/src/cloud-providers/aws/aws-icon.js

@@ -0,0 +1,37 @@
+// Copyright (c) 2020 Uber Technologies, Inc.
+//
+// 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.
+
+import React, {Component} from 'react';
+
+class AwsIcon extends Component {
+  render() {
+    return (
+      <div className={'data-ex-icons-aws'} style={{padding: '5px 15px'}}>
+        <img
+          width={'100%'}
+          src="https://d1.awsstatic.com/logos/aws-logo-lockups/poweredbyaws/PB_AWS_logo_RGB_stacked.547f032d90171cdea4dd90c258f47373c5573db5.png"
+          alt="Powered by AWS Cloud Computing"
+        />
+      </div>
+    );
+  }
+}
+
+export default AwsIcon;

examples/demo-app/src/cloud-providers/aws/aws-login.js

@@ -0,0 +1,43 @@
+// Copyright (c) 2020 Uber Technologies, Inc.
+//
+// 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.
+
+import React, {useEffect} from 'react';
+import Amplify, {Hub} from 'aws-amplify';
+import awsconfig from '../../aws-exports';
+import {AmplifyAuthenticator} from '@aws-amplify/ui-react';
+
+Amplify.configure(awsconfig);
+export const AWS_LOGIN_URL = 'aws/aws-login';
+export const AWS_WEB_CLIENT_ID = awsconfig && awsconfig.aws_cognito_identity_pool_id;
+
+const AwsLogin = () => {
+  useEffect(() => {
+    Hub.listen('auth', data => {
+      const {payload} = data;
+      if (payload.event === 'signIn') {
+        window.opener.postMessage({success: true}, location.origin);
+      }
+    });
+  }, []);
+
+  return <AmplifyAuthenticator usernameAlias="email" />;
+};
+
+export default AwsLogin;