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 ? ( +

+ error, try again? + +
+ ) : 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 +};