add auth0 for login
Gonna need to import our folx into it, but gosh it would be nice to not be responsible for this anymore 😬
This commit is contained in:
parent
f0c50eecb7
commit
3c3d18d371
4 changed files with 115 additions and 19 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Router>
|
||||
<ApolloProvider client={apolloClient}>
|
||||
<ChakraProvider theme={theme}>
|
||||
<CSSReset />
|
||||
<Switch>
|
||||
<Route path="/outfits/new">
|
||||
<WardrobePage />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<HomePage />
|
||||
</Route>
|
||||
</Switch>
|
||||
</ChakraProvider>
|
||||
</ApolloProvider>
|
||||
<Auth0Provider
|
||||
domain="openneo.us.auth0.com"
|
||||
clientId="8LjFauVox7shDxVufQqnviUIywMuuC4r"
|
||||
redirectUri={window.location.origin}
|
||||
>
|
||||
<ApolloProvider client={apolloClient}>
|
||||
<ChakraProvider theme={theme}>
|
||||
<CSSReset />
|
||||
<Switch>
|
||||
<Route path="/outfits/new">
|
||||
<WardrobePage />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<HomePage />
|
||||
</Route>
|
||||
</Switch>
|
||||
</ChakraProvider>
|
||||
</ApolloProvider>
|
||||
</Auth0Provider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Flex direction="column" p="6" align="center" textAlign="center">
|
||||
<Flex direction="column" p="6" pt="3" align="center" textAlign="center">
|
||||
<Box width="100%" display="flex" alignItems="center">
|
||||
<ColorModeToggleButton />
|
||||
<Box flex="1 0 0" />
|
||||
<UserLoginLogout />
|
||||
</Box>
|
||||
<Box height="8" />
|
||||
<Box
|
||||
width="200px"
|
||||
|
|
@ -65,11 +71,39 @@ function HomePage() {
|
|||
</Box>
|
||||
<Box height="4" />
|
||||
<SubmitPetForm />
|
||||
<ColorModeToggleButton />
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
function UserLoginLogout() {
|
||||
const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();
|
||||
|
||||
if (isAuthenticated) {
|
||||
console.log(user);
|
||||
const username = user["https://oauth.impress-2020.openneo.net/username"];
|
||||
|
||||
return (
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box fontSize="sm">Hi, {username}!</Box>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => logout({ returnTo: window.location.origin })}
|
||||
marginLeft="2"
|
||||
>
|
||||
Log out
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button size="sm" variant="outline" onClick={() => loginWithRedirect()}>
|
||||
Log in
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function StartOutfitForm({ onChange }) {
|
||||
const history = useHistory();
|
||||
|
||||
|
|
@ -252,9 +286,6 @@ function ColorModeToggleButton() {
|
|||
icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
|
||||
onClick={toggleColorMode}
|
||||
variant="ghost"
|
||||
position="fixed"
|
||||
bottom="3"
|
||||
right="3"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
59
yarn.lock
59
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue