From 7af001d5f0fe4e8437d14d9b435946179c1a39fa Mon Sep 17 00:00:00 2001 From: ucpr Date: Mon, 20 Apr 2020 06:29:03 +0900 Subject: [PATCH 1/4] mod: add packages --- package-lock.json | 42 ++++++++++++++++++++++++++++++++++++++++-- package.json | 2 ++ 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index af1db22..06cd723 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,20 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@auth0/auth0-spa-js": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-1.7.0.tgz", + "integrity": "sha512-OAeNUI0bTBdk3cIWJMBLgf4B1DvyPXmbBBDQI7EpGR3pU0/+9d19sDCPC1b9epp6Aa7pnd4OR5u9JIQCc3eSKw==", + "requires": { + "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": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", @@ -4511,6 +4525,11 @@ "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz", "integrity": "sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==" }, + "abortcontroller-polyfill": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.4.0.tgz", + "integrity": "sha512-3ZFfCRfDzx3GFjO6RAkYx81lPGpUS20ISxux9gLxuKnqafNcFQo59+IoZqpO2WvQlyc287B62HDnDdNYRmlvWA==" + }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -6104,6 +6123,11 @@ } } }, + "browser-tabs-lock": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.2.8.tgz", + "integrity": "sha512-Xrj33YUTltPDoGrD1KnaAn5ZuxnnlJFcIW9srVTPHbMNPd9MlcnBCWaGV0STlvGKu8Ok0ad5qxyx5sIwFTr/Ig==" + }, "browserify-aes": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", @@ -8169,6 +8193,11 @@ "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==", "dev": true }, + "es-cookie": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz", + "integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q==" + }, "es-get-iterator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.0.tgz", @@ -9091,6 +9120,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fast-text-encoding": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.1.tgz", + "integrity": "sha512-x4FEgaz3zNRtJfLFqJmHWxkMDDvXVtaznj2V9jiP8ACUJrUgist4bP9FmDL2Vew2Y9mEQI/tG4GqabaitYp9CQ==" + }, "fault": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", @@ -15549,6 +15583,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "promise-polyfill": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.3.tgz", + "integrity": "sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==" + }, "promise.allsettled": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/promise.allsettled/-/promise.allsettled-1.0.2.tgz", @@ -19124,8 +19163,7 @@ "unfetch": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz", - "integrity": "sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==", - "dev": true + "integrity": "sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==" }, "unherit": { "version": "1.1.3", diff --git a/package.json b/package.json index ddc5fe1..2178840 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,14 @@ "version": "0.1.0", "private": true, "dependencies": { + "@auth0/auth0-spa-js": "^1.7.0", "@material-ui/core": "^4.9.5", "@nteract/markdown": "^4.3.7", "@types/react-slick": "^0.23.4", "axios": "^0.19.2", "axios-mock-adapter": "^1.17.0", "codemirror": "^5.52.0", + "history": "^4.10.1", "onchange": "^6.1.0", "prop-types": "^15.7.2", "qs": "^6.9.1", From c331420127875055a03ed78164fc251c8bb2974b Mon Sep 17 00:00:00 2001 From: ucpr Date: Mon, 20 Apr 2020 06:30:00 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20onClick=E3=81=A7=E3=81=8D=E3=82=8BB?= =?UTF-8?q?utton=E3=82=92=E7=94=A8=E6=84=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atoms/app-button.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/atoms/app-button.js diff --git a/src/atoms/app-button.js b/src/atoms/app-button.js new file mode 100644 index 0000000..70823ac --- /dev/null +++ b/src/atoms/app-button.js @@ -0,0 +1,29 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { makeStyles } from "@material-ui/core/styles"; +import Button from "@material-ui/core/Button"; + +const useStyles = makeStyles(theme => ({ + button: { + marginRight: theme.spacing(2), + color: "#ffffff", + }, +})); + +export default function LinkButton(props) { + const style = useStyles(); + const text = props.text || ""; + const onClick = props.onClick || function() {}; + + return ( + + ); +} + +LinkButton.propTypes = { + style: PropTypes.object, + text: PropTypes.string, + onClick: PropTypes.func, +}; From 83a90804733ff58c22ab45ad6e7d0af86c232093 Mon Sep 17 00:00:00 2001 From: ucpr Date: Mon, 20 Apr 2020 06:32:27 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20Auth0=E3=81=AEprovider=E3=81=AA?= =?UTF-8?q?=E3=81=A9=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 16 +++++++- src/react-auth0-spa.js | 86 ++++++++++++++++++++++++++++++++++++++++++ src/utils/history.js | 2 + 3 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/react-auth0-spa.js create mode 100644 src/utils/history.js diff --git a/src/index.js b/src/index.js index dd088a2..f407a9f 100644 --- a/src/index.js +++ b/src/index.js @@ -5,12 +5,26 @@ import App from "./App"; import * as serviceWorker from "./serviceWorker"; import { MuiThemeProvider } from "@material-ui/core/styles"; import { theme } from "./materialui/theme"; +import { Auth0Provider } from "./react-auth0-spa"; +import history from "./utils/history"; +import { config } from "./config"; require("./styles/main.css"); +const onRedirectCallback = appState => { + history.push(appState && appState.targetUrl ? appState.targetUrl : window.location.pathname); +}; + ReactDOM.render( // 配色を適応 - + + + , document.getElementById("root") ); diff --git a/src/react-auth0-spa.js b/src/react-auth0-spa.js new file mode 100644 index 0000000..5346350 --- /dev/null +++ b/src/react-auth0-spa.js @@ -0,0 +1,86 @@ +/** +https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login/src/react-auth0-spa.js +**/ + +import React, { useState, useEffect, useContext } from "react"; +import createAuth0Client from "@auth0/auth0-spa-js"; + +const DEFAULT_REDIRECT_CALLBACK = () => window.history.replaceState({}, document.title, window.location.pathname); + +export const Auth0Context = React.createContext(); +export const useAuth0 = () => useContext(Auth0Context); +// eslint-disable-next-line +export const Auth0Provider = ({ children, onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, ...initOptions }) => { + const [isAuthenticated, setIsAuthenticated] = useState(); + const [user, setUser] = useState(); + const [auth0Client, setAuth0] = useState(); + const [loading, setLoading] = useState(true); + const [popupOpen, setPopupOpen] = useState(false); + + useEffect(() => { + const initAuth0 = async () => { + const auth0FromHook = await createAuth0Client(initOptions); + setAuth0(auth0FromHook); + + if (window.location.search.includes("code=") && window.location.search.includes("state=")) { + const { appState } = await auth0FromHook.handleRedirectCallback(); + onRedirectCallback(appState); + } + + const isAuthenticated = await auth0FromHook.isAuthenticated(); + + setIsAuthenticated(isAuthenticated); + + if (isAuthenticated) { + const user = await auth0FromHook.getUser(); + setUser(user); + } + + setLoading(false); + }; + initAuth0(); + // eslint-disable-next-line + }, []); + + const loginWithPopup = async (params = {}) => { + setPopupOpen(true); + try { + await auth0Client.loginWithPopup(params); + } catch (error) { + console.error(error); + } finally { + setPopupOpen(false); + } + const user = await auth0Client.getUser(); + setUser(user); + setIsAuthenticated(true); + }; + + const handleRedirectCallback = async () => { + setLoading(true); + await auth0Client.handleRedirectCallback(); + const user = await auth0Client.getUser(); + setLoading(false); + setIsAuthenticated(true); + setUser(user); + }; + return ( + auth0Client.getIdTokenClaims(...p), + loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p), + getTokenSilently: (...p) => auth0Client.getTokenSilently(...p), + getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p), + logout: (...p) => auth0Client.logout(...p), + }} + > + {children} + + ); +}; diff --git a/src/utils/history.js b/src/utils/history.js new file mode 100644 index 0000000..2724b5b --- /dev/null +++ b/src/utils/history.js @@ -0,0 +1,2 @@ +import { createBrowserHistory } from "history"; +export default createBrowserHistory(); From c9d059809d10ff407d3d2229bec08f1b57c27187 Mon Sep 17 00:00:00 2001 From: ucpr Date: Mon, 20 Apr 2020 06:34:36 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20Header=E3=81=ABLogin,=20Logout?= =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/molecules/HeaderAppBar.js | 17 +++++++++++++++-- src/organisms/Header.js | 10 +++++++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/molecules/HeaderAppBar.js b/src/molecules/HeaderAppBar.js index dc28264..b4be125 100644 --- a/src/molecules/HeaderAppBar.js +++ b/src/molecules/HeaderAppBar.js @@ -1,11 +1,17 @@ import React from "react"; +import PropTypes from "prop-types"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from "@material-ui/core/Toolbar"; import Container from "@material-ui/core/Container"; import LinkButton from "../atoms/app-link-button"; +import Button from "../atoms/app-button"; import LinkTitleImage from "./LinkTitleImage"; -export default function HeaderAppBar() { +export default function HeaderAppBar(props) { + // const user = props.user; + const isAuthenticated = props.isAuthenticated; + const loginWithRedirect = props.loginWithRedirect; + return ( @@ -15,8 +21,15 @@ export default function HeaderAppBar() { - + {!isAuthenticated &&