From 3c3d18d37194c3cdac105e55ceec7d19bb58fe36 Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 2 Sep 2020 03:06:09 -0700 Subject: [PATCH] add auth0 for login MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gonna need to import our folx into it, but gosh it would be nice to not be responsible for this anymore 😬 --- package.json | 1 + src/app/App.js | 33 +++++++++++++++---------- src/app/HomePage.js | 41 +++++++++++++++++++++++++++---- yarn.lock | 59 ++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 115 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 8d450c4..236564c 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "@apollo/client": "^3.1.1", "@apollographql/graphql-playground-html": "^1.6.24", + "@auth0/auth0-react": "^1.0.0", "@chakra-ui/core": "^1.0.0-rc.0", "@chakra-ui/icons": "^1.0.0-rc.0", "@chakra-ui/theme": "^1.0.0-rc.0", diff --git a/src/app/App.js b/src/app/App.js index 176d327..4ea93c9 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,5 +1,6 @@ import React from "react"; import { ApolloProvider } from "@apollo/client"; +import { Auth0Provider } from "@auth0/auth0-react"; import { CSSReset, ChakraProvider } from "@chakra-ui/core"; import defaultTheme from "@chakra-ui/theme"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; @@ -31,19 +32,25 @@ const theme = { function App() { return ( - - - - - - - - - - - - - + + + + + + + + + + + + + + + ); } diff --git a/src/app/HomePage.js b/src/app/HomePage.js index c8595c8..d0888ae 100644 --- a/src/app/HomePage.js +++ b/src/app/HomePage.js @@ -15,6 +15,7 @@ import { import { MoonIcon, SunIcon } from "@chakra-ui/icons"; import { useHistory, useLocation } from "react-router-dom"; import { useLazyQuery } from "@apollo/client"; +import { useAuth0 } from "@auth0/auth0-react"; import { Heading1, usePageTitle } from "./util"; import OutfitPreview from "./components/OutfitPreview"; @@ -30,7 +31,12 @@ function HomePage() { const [previewState, setPreviewState] = React.useState(null); return ( - + + + + + + - ); } +function UserLoginLogout() { + const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0(); + + if (isAuthenticated) { + console.log(user); + const username = user["https://oauth.impress-2020.openneo.net/username"]; + + return ( + + Hi, {username}! + + + ); + } else { + return ( + + ); + } +} + function StartOutfitForm({ onChange }) { const history = useHistory(); @@ -252,9 +286,6 @@ function ColorModeToggleButton() { icon={colorMode === "light" ? : } onClick={toggleColorMode} variant="ghost" - position="fixed" - bottom="3" - right="3" /> ); } diff --git a/yarn.lock b/yarn.lock index ffce336..ddc2d74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,6 +51,26 @@ resolved "https://registry.yarnpkg.com/@apollographql/graphql-playground-html/-/graphql-playground-html-1.6.24.tgz#3ce939cb127fb8aaa3ffc1e90dff9b8af9f2e3dc" integrity sha512-8GqG48m1XqyXh4mIZrtB5xOhUwSsh1WsrrsaZQOEYYql3YN9DEu9OOSg0ILzXHZo/h2Q74777YE4YzlArQzQEQ== +"@auth0/auth0-react@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@auth0/auth0-react/-/auth0-react-1.0.0.tgz#3eeced9557d54d4092032ecc071cd74052d09da7" + integrity sha512-AaGftJFXYsJNEHZq/PNNr5HVSOQCVjstBF2pD3gAwOrgjKO7fYoeNgKKQOcTLm/ge5vAkEBGgSBzWBj2SgZ38w== + dependencies: + "@auth0/auth0-spa-js" "^1.9.0" + +"@auth0/auth0-spa-js@^1.9.0": + version "1.11.0" + resolved "https://registry.yarnpkg.com/@auth0/auth0-spa-js/-/auth0-spa-js-1.11.0.tgz#800a59ddeaa11ad8a94a699c58f9971842ea065f" + integrity sha512-PHYykO4IoEGeTT2SVzvZiJNK5QgznLJweJfVcb0C8X+rZYooBN5Qrdj0AfECzgK9h90kfU4u3s9h83VTSh6t3A== + dependencies: + abortcontroller-polyfill "^1.4.0" + browser-tabs-lock "^1.2.8" + core-js "^3.6.4" + es-cookie "^1.3.2" + fast-text-encoding "^1.0.1" + promise-polyfill "^8.1.3" + unfetch "^4.1.0" + "@babel/code-frame@7.8.3", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e" @@ -3050,6 +3070,11 @@ abab@^2.0.0: resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a" integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg== +abortcontroller-polyfill@^1.4.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.5.0.tgz#2c562f530869abbcf88d949a2b60d1d402e87a7c" + integrity sha512-O6Xk757Jb4o0LMzMOMdWvxpHWrQzruYBaUruFaIOfAQRnWFxfdXYobw12jrVHGtoXk6WiiyYzc0QWN9aL62HQA== + accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: version "1.3.7" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd" @@ -4013,6 +4038,13 @@ browser-resolve@^1.11.3: dependencies: resolve "1.1.7" +browser-tabs-lock@^1.2.8: + version "1.2.11" + resolved "https://registry.yarnpkg.com/browser-tabs-lock/-/browser-tabs-lock-1.2.11.tgz#59d72c6653b827685b54fca1c0e6eb4aee08ef52" + integrity sha512-R0xXMzQ8CU0v52zSFn3EDGIfsjteMFJ6oIhhZK6+Vhz5NYzSxCP2epLD9PN7e2HprQl2QTReFptwp6c9tdOF0g== + dependencies: + lodash ">=4.17.19" + browserify-aes@^1.0.0, browserify-aes@^1.0.4: version "1.2.0" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48" @@ -4721,7 +4753,7 @@ core-js@^2.4.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== -core-js@^3.0.1: +core-js@^3.0.1, core-js@^3.6.4: version "3.6.5" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a" integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA== @@ -5638,6 +5670,11 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2: string.prototype.trimleft "^2.1.1" string.prototype.trimright "^2.1.1" +es-cookie@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/es-cookie/-/es-cookie-1.3.2.tgz#80e831597f72a25721701bdcb21d990319acd831" + integrity sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q== + es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -6161,6 +6198,11 @@ fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= +fast-text-encoding@^1.0.1: + version "1.0.3" + resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz#ec02ac8e01ab8a319af182dae2681213cfe9ce53" + integrity sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig== + faye-websocket@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4" @@ -8566,6 +8608,11 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== +lodash@>=4.17.19: + version "4.17.20" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" + integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + loglevel@^1.6.6: version "1.6.7" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56" @@ -10600,6 +10647,11 @@ promise-inflight@^1.0.1: resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= +promise-polyfill@^8.1.3: + version "8.1.3" + resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116" + integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g== + promise@^8.0.3: version "8.1.0" resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e" @@ -12724,6 +12776,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +unfetch@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db" + integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg== + unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"