From a649006d876c01c6e783497010a79d3e97552c4a Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 31 Jan 2020 11:00:19 +0100 Subject: [PATCH] auth0 authentication & sample profile page --- .gitignore | 2 + README.md | 3 +- package-lock.json | 256 +++++------------------------ package.json | 1 + src/App.js | 20 ++- src/components/ContactForm.jsx | 4 +- src/components/LogInButton.jsx | 14 ++ src/components/LogOutButton.jsx | 14 ++ src/components/Navbar.jsx | 9 +- src/components/PrivateRoute.jsx | 25 +++ src/index.js | 23 ++- src/pages/Category.jsx | 1 + src/pages/CategoryList.jsx | 1 + src/pages/Meal.jsx | 1 + src/pages/Profile.jsx | 17 ++ src/utils/auth0-spa.js | 93 +++++++++++ src/utils/auth_config.json.example | 5 + src/utils/authentication.js | 111 ------------- src/utils/history.js | 2 + 19 files changed, 263 insertions(+), 339 deletions(-) create mode 100644 src/components/LogInButton.jsx create mode 100644 src/components/LogOutButton.jsx create mode 100644 src/components/PrivateRoute.jsx create mode 100644 src/pages/Profile.jsx create mode 100644 src/utils/auth0-spa.js create mode 100644 src/utils/auth_config.json.example delete mode 100644 src/utils/authentication.js create mode 100644 src/utils/history.js diff --git a/.gitignore b/.gitignore index 4d29575..4831129 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +/src/utils/auth_config.json \ No newline at end of file diff --git a/README.md b/README.md index c147cd2..f9db158 100644 --- a/README.md +++ b/README.md @@ -71,8 +71,8 @@ Free meal planner for cooks short on ideas! (like me …) - [Materialize](https://materializecss.com) CSS librairy for styling - Public API: [TheMealDb](https://www.themealdb.com/api.php) and [TheCocktailDb](https://www.thecocktaildb.com/api.php) - Hosting: [Render](https://render.com/) +- Authentication : [Auth0](https://auth0.com/) - Analytics : Google Analytics & Mixpanel -- Authentication : Firebase or Auth0 ## Versions @@ -87,6 +87,7 @@ Free meal planner for cooks short on ideas! (like me …) - Progressive Web App - User Interface Enhancement +- Secured User Profiles - Contact form ## TO DO diff --git a/package-lock.json b/package-lock.json index 39ef4cc..c4e451e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,19 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@auth0/auth0-spa-js": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-1.6.3.tgz", + "integrity": "sha512-jbK6qrcy3N8bAltP/sEdv9vo0eML9LneAESB05K/MPCwZVUJN9hu+y42DxfI7kH6dnVNyUbJohgpimv+eNonlQ==", + "requires": { + "browser-tabs-lock": "^1.2.1", + "core-js": "^3.2.1", + "es-cookie": "^1.2.0", + "fast-text-encoding": "^1.0.0", + "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", @@ -1043,11 +1056,6 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, - "@emotion/hash": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz", - "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==" - }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1273,75 +1281,6 @@ "@types/yargs": "^13.0.0" } }, - "@material-ui/core": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.0.tgz", - "integrity": "sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.9.0", - "@material-ui/system": "^4.7.1", - "@material-ui/types": "^5.0.0", - "@material-ui/utils": "^4.7.1", - "@types/react-transition-group": "^4.2.0", - "clsx": "^1.0.2", - "convert-css-length": "^2.0.1", - "hoist-non-react-statics": "^3.2.1", - "normalize-scroll-left": "^0.2.0", - "popper.js": "^1.14.1", - "prop-types": "^15.7.2", - "react-is": "^16.8.0", - "react-transition-group": "^4.3.0" - } - }, - "@material-ui/styles": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz", - "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==", - "requires": { - "@babel/runtime": "^7.4.4", - "@emotion/hash": "^0.7.4", - "@material-ui/types": "^5.0.0", - "@material-ui/utils": "^4.7.1", - "clsx": "^1.0.2", - "csstype": "^2.5.2", - "hoist-non-react-statics": "^3.2.1", - "jss": "^10.0.3", - "jss-plugin-camel-case": "^10.0.3", - "jss-plugin-default-unit": "^10.0.3", - "jss-plugin-global": "^10.0.3", - "jss-plugin-nested": "^10.0.3", - "jss-plugin-props-sort": "^10.0.3", - "jss-plugin-rule-value-function": "^10.0.3", - "jss-plugin-vendor-prefixer": "^10.0.3", - "prop-types": "^15.7.2" - } - }, - "@material-ui/system": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.7.1.tgz", - "integrity": "sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.7.1", - "prop-types": "^15.7.2" - } - }, - "@material-ui/types": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz", - "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==" - }, - "@material-ui/utils": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz", - "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==", - "requires": { - "@babel/runtime": "^7.4.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0" - } - }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1650,14 +1589,6 @@ "@types/react": "*" } }, - "@types/react-transition-group": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz", - "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==", - "requires": { - "@types/react": "*" - } - }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -2876,6 +2807,11 @@ } } }, + "browser-tabs-lock": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.2.6.tgz", + "integrity": "sha512-+FUo97nnOix/nQo+j4HyCO47bsJtfx1EFhj1rghqYx7N0MQ8D34aoP4eJGrMtN0D18s2OAGpbPqo/0ONGxDLiA==" + }, "browserify-aes": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", @@ -3794,11 +3730,6 @@ "shallow-clone": "^0.1.2" } }, - "clsx": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz", - "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==" - }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4010,11 +3941,6 @@ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" }, - "convert-css-length": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz", - "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==" - }, "convert-source-map": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", @@ -4301,15 +4227,6 @@ "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz", "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=" }, - "css-vendor": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz", - "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==", - "requires": { - "@babel/runtime": "^7.6.2", - "is-in-browser": "^1.0.2" - } - }, "css-what": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", @@ -4736,15 +4653,6 @@ "utila": "~0.4" } }, - "dom-helpers": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz", - "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==", - "requires": { - "@babel/runtime": "^7.6.3", - "csstype": "^2.6.7" - } - }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -4992,6 +4900,11 @@ "string.prototype.trimright": "^2.1.1" } }, + "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-to-primitive": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", @@ -5855,6 +5768,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fast-text-encoding": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz", + "integrity": "sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ==" + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -6718,11 +6636,6 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, - "hyphenate-style-name": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", - "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" - }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -7022,11 +6935,6 @@ "is-extglob": "^2.1.1" } }, - "is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" - }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -8371,83 +8279,6 @@ "verror": "1.10.0" } }, - "jss": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.3.tgz", - "integrity": "sha512-AcDvFdOk16If9qvC9KN3oFXsrkHWM9+TaPMpVB9orm3z+nq1Xw3ofHyflRe/mkSucRZnaQtlhZs1hdP3DR9uRw==", - "requires": { - "@babel/runtime": "^7.3.1", - "csstype": "^2.6.5", - "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-camel-case": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.3.tgz", - "integrity": "sha512-rild/oFKFkmRP7AoiX9D6bdDAUfmJv8c7sEBvFoi+JP31dn2W8nw4txMKGnV1LJKlFkYprdZt1X99Uvztl1hug==", - "requires": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "^10.0.3" - } - }, - "jss-plugin-default-unit": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.3.tgz", - "integrity": "sha512-n+XfVLPF9Qh7IOTdQ8M4oRpjpg6egjr/r0NNytubbCafMgCILJYIVrMTGgOTydH+uvak8onQY3f/F9hasPUx6g==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "^10.0.3" - } - }, - "jss-plugin-global": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.3.tgz", - "integrity": "sha512-kNotkAciJIXpIGYnmueaIifBne9rdq31O8Xq1nF7KMfKlskNRANTcEX5rVnsGKl2yubTMYfjKBFCeDgcQn6+gA==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "^10.0.3" - } - }, - "jss-plugin-nested": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.3.tgz", - "integrity": "sha512-OMucRs9YLvWlZ3Ew+VhdgNVMwSS2zZy/2vy+s/etvopnPUzDHgCnJwdY2Wx/SlhLGERJeKKufyih2seH+ui0iw==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "^10.0.3", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-props-sort": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.3.tgz", - "integrity": "sha512-ufhvdCMnRcDa0tNHoZ12OcVNQQyE10yLMohxo/UIMarLV245rM6n9D19A12epjldRgyiS13SoSyLFCJEobprYg==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "^10.0.3" - } - }, - "jss-plugin-rule-value-function": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.3.tgz", - "integrity": "sha512-RWwIT2UBAIwf3f6DQtt5gyjxHMRJoeO9TQku+ueR8dBMakqSSe8vFwQNfjXEoe0W+Tez5HZCTkZKNMulv3Z+9A==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "^10.0.3" - } - }, - "jss-plugin-vendor-prefixer": { - "version": "10.0.3", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.3.tgz", - "integrity": "sha512-zVs6e5z4tFRK/fJ5kuTLzXlTFQbLeFTVwk7lTZiYNufmZwKT0kSmnOJDUukcSe7JLGSRztjWhnHB/6voP174gw==", - "requires": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.7", - "jss": "^10.0.3" - } - }, "jsx-ast-utils": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", @@ -9317,11 +9148,6 @@ "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=" }, - "normalize-scroll-left": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz", - "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==" - }, "normalize-url": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", @@ -9919,11 +9745,6 @@ "ts-pnp": "^1.1.2" } }, - "popper.js": { - "version": "1.16.1", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", - "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" - }, "portfinder": { "version": "1.0.25", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", @@ -10972,6 +10793,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==" + }, "prompts": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.0.tgz", @@ -11438,17 +11264,6 @@ "workbox-webpack-plugin": "4.3.1" } }, - "react-transition-group": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", - "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", - "requires": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - } - }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -13319,6 +13134,11 @@ } } }, + "unfetch": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz", + "integrity": "sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==" + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", diff --git a/package.json b/package.json index 920486e..5b7fabf 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@auth0/auth0-spa-js": "^1.6.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", "@testing-library/user-event": "^7.2.1", diff --git a/src/App.js b/src/App.js index c24c7b8..bb699d9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { Router } from "./utils/router"; import { Switch, Route, Redirect } from "react-router-dom"; +import { useAuth0 } from "./utils/auth0-spa"; import { Home } from "./pages/Home"; import { Meal } from "./pages/Meal"; import { SearchPage } from "./pages/Search"; @@ -13,8 +14,12 @@ import { SearchBar } from "./components/SearchBar"; import { Footer } from "./components/Footer"; import "./index.css"; import { getData } from "./utils/methods"; +import history from "./utils/history"; +import { Profile } from "./pages/Profile"; +import { PrivateRoute } from "./components/PrivateRoute"; export const App = () => { + const { loading } = useAuth0(); const [searchString, setSearchString] = useState(""); const [categories, setCategories] = useState({ categories: [] }); const [searchResults, setSearchResults] = useState({ meals: [] }); @@ -103,10 +108,13 @@ export const App = () => { const buttonUrl = "/random"; - return ( - - - + return loading ? ( +
Loading
+ ) : ( + +
+ +
{ + + + + {meal !== undefined && meal.meals !== null ? ( diff --git a/src/components/ContactForm.jsx b/src/components/ContactForm.jsx index f99ec13..6f007fd 100644 --- a/src/components/ContactForm.jsx +++ b/src/components/ContactForm.jsx @@ -1,7 +1,7 @@ -import React, { useState } from "react"; +import React from "react"; export const ContactForm = ({ handleSubmit }) => { - const fields = ["firstname", "lastname", "email", "phone", "message"]; + // const fields = ["firstname", "lastname", "email", "phone", "message"]; // const [firstName, setFirstName] = useState(""); diff --git a/src/components/LogInButton.jsx b/src/components/LogInButton.jsx new file mode 100644 index 0000000..1a65ea2 --- /dev/null +++ b/src/components/LogInButton.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { useAuth0 } from "../utils/auth0-spa"; + +export const LogInButton = () => { + const { loginWithRedirect } = useAuth0(); + const handleClick = () => { + loginWithRedirect({}); + }; + return ( + + ); +}; diff --git a/src/components/LogOutButton.jsx b/src/components/LogOutButton.jsx new file mode 100644 index 0000000..77558aa --- /dev/null +++ b/src/components/LogOutButton.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { useAuth0 } from "../utils/auth0-spa"; + +export const LogOutButton = () => { + const { logout } = useAuth0(); + const handleClick = () => { + logout(); + }; + return ( + + ); +}; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 58ee4c2..0cf1362 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,21 +1,25 @@ import React from "react"; +import { useAuth0 } from "../utils/auth0-spa"; import { Logo } from "./Logo"; - import { RandomButton } from "./RandomButton"; import { FooterLink } from "./FooterLink"; +import { LogInButton } from "./LogInButton"; +import { LogOutButton } from "./LogOutButton"; export const Navbar = props => { + const { isAuthenticated } = useAuth0(); const links = ["categories", "contact"]; return (