From 883982a7c7860eecf5cf9bbe400a6340d89a2351 Mon Sep 17 00:00:00 2001
From: Nicholas Zuber
Date: Sat, 27 Oct 2018 00:11:07 -0400
Subject: [PATCH] Auth configuration
---
package-lock.json | 183 ++++++++++++++++++
package.json | 3 +
src/App.js | 15 +-
.../buttons/AuthenticationButton.js | 13 ++
src/components/buttons/index.js | 1 +
src/pages/Login.js | 10 -
src/pages/Login/Scene.js | 33 ++++
src/pages/Login/TokenHandler.js | 29 +++
src/pages/Login/index.js | 38 ++++
src/providers/Auth.js | 29 +++
10 files changed, 337 insertions(+), 17 deletions(-)
create mode 100644 src/components/buttons/AuthenticationButton.js
create mode 100644 src/components/buttons/index.js
delete mode 100644 src/pages/Login.js
create mode 100644 src/pages/Login/Scene.js
create mode 100644 src/pages/Login/TokenHandler.js
create mode 100644 src/pages/Login/index.js
create mode 100644 src/providers/Auth.js
diff --git a/package-lock.json b/package-lock.json
index b539b64..481ce91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -799,6 +799,70 @@
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
},
+ "@emotion/babel-utils": {
+ "version": "0.6.10",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz",
+ "integrity": "sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==",
+ "requires": {
+ "@emotion/hash": "^0.6.6",
+ "@emotion/memoize": "^0.6.6",
+ "@emotion/serialize": "^0.9.1",
+ "convert-source-map": "^1.5.1",
+ "find-root": "^1.1.0",
+ "source-map": "^0.7.2"
+ },
+ "dependencies": {
+ "source-map": {
+ "version": "0.7.3",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+ "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+ }
+ }
+ },
+ "@emotion/hash": {
+ "version": "0.6.6",
+ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",
+ "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ=="
+ },
+ "@emotion/is-prop-valid": {
+ "version": "0.6.8",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz",
+ "integrity": "sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==",
+ "requires": {
+ "@emotion/memoize": "^0.6.6"
+ }
+ },
+ "@emotion/memoize": {
+ "version": "0.6.6",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
+ "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
+ },
+ "@emotion/serialize": {
+ "version": "0.9.1",
+ "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.9.1.tgz",
+ "integrity": "sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==",
+ "requires": {
+ "@emotion/hash": "^0.6.6",
+ "@emotion/memoize": "^0.6.6",
+ "@emotion/unitless": "^0.6.7",
+ "@emotion/utils": "^0.8.2"
+ }
+ },
+ "@emotion/stylis": {
+ "version": "0.7.1",
+ "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz",
+ "integrity": "sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ=="
+ },
+ "@emotion/unitless": {
+ "version": "0.6.7",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz",
+ "integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg=="
+ },
+ "@emotion/utils": {
+ "version": "0.8.2",
+ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
+ "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
+ },
"@reach/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz",
@@ -1017,6 +1081,11 @@
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
"integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w=="
},
+ "abbrev": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+ },
"accepts": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -1779,6 +1848,25 @@
"object.assign": "^4.1.0"
}
},
+ "babel-plugin-emotion": {
+ "version": "9.2.11",
+ "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz",
+ "integrity": "sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==",
+ "requires": {
+ "@babel/helper-module-imports": "^7.0.0",
+ "@emotion/babel-utils": "^0.6.4",
+ "@emotion/hash": "^0.6.2",
+ "@emotion/memoize": "^0.6.1",
+ "@emotion/stylis": "^0.7.0",
+ "babel-plugin-macros": "^2.0.0",
+ "babel-plugin-syntax-jsx": "^6.18.0",
+ "convert-source-map": "^1.5.0",
+ "find-root": "^1.1.0",
+ "mkdirp": "^0.5.1",
+ "source-map": "^0.5.7",
+ "touch": "^2.0.1"
+ }
+ },
"babel-plugin-istanbul": {
"version": "4.1.6",
"resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
@@ -1809,6 +1897,11 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.2.tgz",
"integrity": "sha512-NtESBqk8LZuNhBd1BMLxDOh0JPytMs88LwAZFmHg1ZyuGrIAO40dw7p624w+flj0uuhfKTNY8tYKsUEAZGRRFA=="
},
+ "babel-plugin-syntax-jsx": {
+ "version": "6.18.0",
+ "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+ "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+ },
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -2957,6 +3050,28 @@
"elliptic": "^6.0.0"
}
},
+ "create-emotion": {
+ "version": "9.2.12",
+ "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.12.tgz",
+ "integrity": "sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==",
+ "requires": {
+ "@emotion/hash": "^0.6.2",
+ "@emotion/memoize": "^0.6.1",
+ "@emotion/stylis": "^0.7.0",
+ "@emotion/unitless": "^0.6.2",
+ "csstype": "^2.5.2",
+ "stylis": "^3.5.0",
+ "stylis-rule-sheet": "^0.0.10"
+ }
+ },
+ "create-emotion-styled": {
+ "version": "9.2.8",
+ "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.2.8.tgz",
+ "integrity": "sha512-2LrNM5MREWzI5hZK+LyiBHglwE18WE3AEbBQgpHQ1+zmyLSm/dJsUZBeFAwuIMb+TjNZP0KsMZlV776ufOtFdg==",
+ "requires": {
+ "@emotion/is-prop-valid": "^0.6.1"
+ }
+ },
"create-hash": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -3315,6 +3430,11 @@
"cssom": "0.3.x"
}
},
+ "csstype": {
+ "version": "2.5.7",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz",
+ "integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw=="
+ },
"cyclist": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -3744,6 +3864,15 @@
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
},
+ "emotion": {
+ "version": "9.2.12",
+ "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.12.tgz",
+ "integrity": "sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==",
+ "requires": {
+ "babel-plugin-emotion": "^9.2.11",
+ "create-emotion": "^9.2.12"
+ }
+ },
"encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -4611,6 +4740,11 @@
"pkg-dir": "^2.0.0"
}
},
+ "find-root": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+ "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+ },
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -8096,6 +8230,14 @@
"semver": "^5.3.0"
}
},
+ "nopt": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+ "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+ "requires": {
+ "abbrev": "1"
+ }
+ },
"normalize-package-data": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -10521,6 +10663,15 @@
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
},
+ "query-string": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.2.0.tgz",
+ "integrity": "sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==",
+ "requires": {
+ "decode-uri-component": "^0.2.0",
+ "strict-uri-encode": "^2.0.0"
+ }
+ },
"querystring": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -10735,6 +10886,15 @@
"scheduler": "^0.10.0"
}
},
+ "react-emotion": {
+ "version": "9.2.12",
+ "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.2.12.tgz",
+ "integrity": "sha512-qt7XbxnEKX5sZ73rERJ92JMbEOoyOwG3BuCRFRkXrsJhEe+rFBRTljRw7yOLHZUCQC4GBObZhjXIduQ8S0ZpYw==",
+ "requires": {
+ "babel-plugin-emotion": "^9.2.11",
+ "create-emotion-styled": "^9.2.8"
+ }
+ },
"react-error-overlay": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.0.5.tgz",
@@ -12597,6 +12757,11 @@
"resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
"integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
},
+ "strict-uri-encode": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+ "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+ },
"string-length": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
@@ -12773,6 +12938,16 @@
}
}
},
+ "stylis": {
+ "version": "3.5.3",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz",
+ "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ=="
+ },
+ "stylis-rule-sheet": {
+ "version": "0.0.10",
+ "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+ "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+ },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -13104,6 +13279,14 @@
"hoek": "4.x.x"
}
},
+ "touch": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/touch/-/touch-2.0.2.tgz",
+ "integrity": "sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==",
+ "requires": {
+ "nopt": "~1.0.10"
+ }
+ },
"tough-cookie": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
diff --git a/package.json b/package.json
index 66bb005..4a175ce 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,11 @@
"dependencies": {
"@reach/router": "^1.2.1",
"axios": "^0.18.0",
+ "emotion": "^9.2.12",
+ "query-string": "^6.2.0",
"react": "^16.6.0",
"react-dom": "^16.6.0",
+ "react-emotion": "^9.2.12",
"react-scripts": "2.0.5"
},
"scripts": {
diff --git a/src/App.js b/src/App.js
index 98d754b..c1ee2ea 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,23 @@
import React, { Component } from 'react';
import { Router } from "@reach/router";
import { Routes } from './constants';
+import { AuthProvider } from './providers/Auth';
import {
Home,
Login,
Inbox,
} from './pages';
-const Dash = () => Dash
-
class App extends Component {
render() {
return (
-
-
-
-
-
+
+
+
+
+
+
+
);
}
}
diff --git a/src/components/buttons/AuthenticationButton.js b/src/components/buttons/AuthenticationButton.js
new file mode 100644
index 0000000..299a076
--- /dev/null
+++ b/src/components/buttons/AuthenticationButton.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CLIENT_ID = '9478c90e57ef3d546ef0';
+const REDIRECT_URI = 'http://localhost:3000/login';
+const SCOPES = 'notifications';
+
+const AuthenticationButton = () => (
+
+ Login with GitHub
+
+);
+
+export default AuthenticationButton;
diff --git a/src/components/buttons/index.js b/src/components/buttons/index.js
new file mode 100644
index 0000000..c344b2d
--- /dev/null
+++ b/src/components/buttons/index.js
@@ -0,0 +1 @@
+export {default as AuthenticationButton} from './AuthenticationButton';
diff --git a/src/pages/Login.js b/src/pages/Login.js
deleted file mode 100644
index b95a97a..0000000
--- a/src/pages/Login.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { Link } from "@reach/router";
-import { Routes } from '../constants';
-
-export default props => (
-
- Login
- home
-
-);
diff --git a/src/pages/Login/Scene.js b/src/pages/Login/Scene.js
new file mode 100644
index 0000000..ae80d21
--- /dev/null
+++ b/src/pages/Login/Scene.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from "@reach/router";
+import styled from 'react-emotion';
+import { Routes } from '../../constants';
+import { AuthenticationButton } from '../../components/buttons';
+
+const Container = styled.div({
+ background: 'red',
+ width: '100%',
+ height: 100
+});
+
+export default function Scene ({ loading, error, loggedOut, ...props }) {
+ return (
+
+ home
+
+ {error ? (
+
+ ) : loading ? (
+ loading...
+ ) : loggedOut ? (
+
+ ) : (
+ logged in!!
+ )}
+
+
+ );
+}
diff --git a/src/pages/Login/TokenHandler.js b/src/pages/Login/TokenHandler.js
new file mode 100644
index 0000000..3964d78
--- /dev/null
+++ b/src/pages/Login/TokenHandler.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import qs from 'query-string';
+import { Routes } from '../../constants';
+import { AuthenticationButton } from '../../components/buttons';
+import { AuthConsumer } from '../../providers/Auth';
+
+export default class TokenHandler extends React.Component {
+ componentDidMount() {
+ const params = qs.parse(document.location.search);
+ const code = params.code;
+ if (code) {
+ this.props.onSetLoading(true);
+ fetch(`https://meteorite-gatekeeper.herokuapp.com/authenticate/${code}`)
+ .then(response => response.json())
+ .then(({ token, error }) => {
+ this.props.onSetLoading(false);
+ if (error) {
+ this.props.onSetError(true);
+ } else {
+ this.props.setToken(token);
+ }
+ });
+ }
+ }
+
+ render () {
+ return null;
+ }
+}
diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js
new file mode 100644
index 0000000..91daee5
--- /dev/null
+++ b/src/pages/Login/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from "@reach/router";
+import { Routes } from '../../constants';
+import { AuthenticationButton } from '../../components/buttons';
+import { AuthConsumer } from '../../providers/Auth';
+import TokenHandler from './TokenHandler';
+import Scene from './Scene';
+
+export default class LoginPage extends React.Component {
+ state = {
+ loading: false,
+ error: null
+ }
+
+ onSetLoading = loading => this.setState({ loading });
+ onSetError = error => this.setState({ error });
+
+ render () {
+ return (
+
+ {({ token, setToken }) => (
+
+
+
+
+ )}
+
+ );
+ }
+}
diff --git a/src/providers/Auth.js b/src/providers/Auth.js
new file mode 100644
index 0000000..ed53f2d
--- /dev/null
+++ b/src/providers/Auth.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const {Provider, Consumer} = React.createContext('foo');
+
+class AuthProvider extends React.Component {
+ state = {
+ token: null
+ }
+
+ setToken = token => {
+ this.setState({ token });
+ }
+
+ render () {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export {
+ AuthProvider,
+ Consumer as AuthConsumer
+};