Merge pull request #16 from gractwo/authwork

auth0 integration, logging in & out, user states and other goodies

components/Icon.tsx

@@ -1,6 +1,9 @@
 type iconselection =
 	| "Menu"
+	| "User"
 	| "Users"
+	| "LogIn"
+	| "LogOut"
 	| "Link2"
 	| "ExternalLink"
 	| "Code"
@@ -42,6 +45,25 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="3" y1="18" x2="21" y2="18" />
 				</svg>
 			);
+		case "User":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-user"
+					{...props}
+				>
+					<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+					<circle cx="12" cy="7" r="4" />
+				</svg>
+			);
 		case "Users":
 			return (
 				<svg
@@ -63,6 +85,46 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M16 3.13a4 4 0 0 1 0 7.75" />
 				</svg>
 			);
+		case "LogIn":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-log-in"
+					{...props}
+				>
+					<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+					<polyline points="10 17 15 12 10 7" />
+					<line x1="15" y1="12" x2="3" y2="12" />
+				</svg>
+			);
+		case "LogOut":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-log-out"
+					{...props}
+				>
+					<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+					<polyline points="16 17 21 12 16 7" />
+					<line x1="21" y1="12" x2="9" y2="12" />
+				</svg>
+			);
 		case "Link2":
 			return (
 				<svg

components/Navigation/Navigation.module.scss

@@ -20,10 +20,24 @@
 		color: var(--color);
 	}
 }
+.partprofile {
+	background: rgba(255, 255, 255, 0.1);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+}
 .profile {
+	background: rgba(255, 255, 255, 0.1);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
 	margin-left: auto;
-	background: var(--color);
+	img {
-	color: var(--backdrop);
+		height: 2.3rem;
+		border-radius: 50%;
+	}
 }
 .logo {
 	padding: 0 1rem;

components/Navigation/Navigation.tsx

@@ -5,8 +5,10 @@ import { Icon } from "../Icon";
 import navigation from "../../data/navigation.json";
 import Link from "next/link";
 
+import { useUser } from "@auth0/nextjs-auth0/client";
+
 const Navigation = () => {
-	let username: string = "";
+	const { user, isLoading } = useUser();
 	return (
 		<>
 			<div className={styles.nav}>
@@ -42,20 +44,43 @@ const Navigation = () => {
 						})}
 					</div>
 				</div>
-				<Link
+				{isLoading && (
-					href=""
+					<>
-					style={{ display: "flex" }}
+						<Link href="/" className={`${styles.link} ${styles.profile}`}>
-					className={`${styles.link} ${styles.profile}`}
+							fetching danych...
-				>
+						</Link>
-					zaloguj się
+					</>
-				</Link>
+				)}
-				<Link
+				{!isLoading && user && (
-					href=""
+					<>
-					style={{ display: "none" }}
+						<Link href="/ja" className={`${styles.link} ${styles.profile}`}>
-					className={`${styles.link} ${styles.profile}`}
+							{user.picture && (
-				>
+								<img
-					{username ? username : "twój profil"}
+									src={user.picture}
-				</Link>
+									alt={`${user.name}'s profile picture`}
+								/>
+							)}
+							{!user.picture && <Icon icon="User" />}
+							{user.nickname}
+						</Link>
+						<a
+							href="/api/auth/logout"
+							className={`${styles.link} ${styles.partprofile}`}
+						>
+							<Icon icon="LogOut" />
+						</a>
+					</>
+				)}
+				{!isLoading && !user && (
+					<a
+						href="/api/auth/login"
+						style={{ marginLeft: "auto" }}
+						className={`${styles.link} ${styles.partprofile}`}
+					>
+						zaloguj się
+						<Icon icon="LogIn" />
+					</a>
+				)}
 			</div>
 		</>
 	);

package-lock.json

@@ -8,6 +8,7 @@
       "name": "gractwopl",
       "version": "0.1.0",
       "dependencies": {
+        "@auth0/nextjs-auth0": "^2.0.1",
         "@types/node": "18.11.12",
         "@types/react": "18.0.26",
         "@types/react-dom": "18.0.9",
@@ -20,6 +21,28 @@
         "typescript": "4.9.4"
       }
     },
+    "node_modules/@auth0/nextjs-auth0": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@auth0/nextjs-auth0/-/nextjs-auth0-2.0.1.tgz",
+      "integrity": "sha512-jADQlgdktoxzufrrNwTwNhJJ/Wg6XwQmhcQAZ60yyLTfeSHTI5lBg1P7OdkZ9deGp54imVShMUVlUVy8VnIxwg==",
+      "dependencies": {
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.5.0",
+        "debug": "^4.3.4",
+        "http-errors": "^1.8.1",
+        "joi": "^17.6.0",
+        "jose": "^4.9.2",
+        "openid-client": "^5.2.1",
+        "tslib": "^2.4.0",
+        "url-join": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=12.19.0"
+      },
+      "peerDependencies": {
+        "next": ">=10"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
@@ -65,6 +88,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "node_modules/@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -335,6 +371,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@panva/hkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.2.tgz",
+      "integrity": "sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -359,6 +403,24 @@
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
     },
+    "node_modules/@sideway/address": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
+      "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+    },
+    "node_modules/@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
     "node_modules/@swc/helpers": {
       "version": "0.4.14",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
@@ -822,6 +884,14 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/core-js-pure": {
       "version": "3.26.1",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.1.tgz",
@@ -899,6 +969,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1786,6 +1864,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
@@ -2077,6 +2170,26 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/joi": {
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.7.0.tgz",
+      "integrity": "sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/topo": "^5.0.0",
+        "@sideway/address": "^4.1.3",
+        "@sideway/formula": "^3.0.0",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "node_modules/jose": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.11.1.tgz",
+      "integrity": "sha512-YRv4Tk/Wlug8qicwqFNFVEZSdbROCHRAC6qu/i0dyNKr5JQdoa2pIGoS04lLO/jXQX7Z9omoNewYIVIxqZBd9Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -2328,6 +2441,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -2418,6 +2539,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oidc-token-hash": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz",
+      "integrity": "sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==",
+      "engines": {
+        "node": "^10.13.0 || >=12.0.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2442,6 +2571,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/openid-client": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.3.1.tgz",
+      "integrity": "sha512-RLfehQiHch9N6tRWNx68cicf3b1WR0x74bJWHRc25uYIbSRwjxYcTFaRnzbbpls5jroLAaB/bFIodTgA5LJMvw==",
+      "dependencies": {
+        "jose": "^4.10.0",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.0.1",
+        "oidc-token-hash": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -2809,6 +2952,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2857,6 +3005,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
@@ -3023,6 +3179,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -3114,6 +3278,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3174,6 +3343,22 @@
     }
   },
   "dependencies": {
+    "@auth0/nextjs-auth0": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@auth0/nextjs-auth0/-/nextjs-auth0-2.0.1.tgz",
+      "integrity": "sha512-jADQlgdktoxzufrrNwTwNhJJ/Wg6XwQmhcQAZ60yyLTfeSHTI5lBg1P7OdkZ9deGp54imVShMUVlUVy8VnIxwg==",
+      "requires": {
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.5.0",
+        "debug": "^4.3.4",
+        "http-errors": "^1.8.1",
+        "joi": "^17.6.0",
+        "jose": "^4.9.2",
+        "openid-client": "^5.2.1",
+        "tslib": "^2.4.0",
+        "url-join": "^4.0.1"
+      }
+    },
     "@babel/runtime": {
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
@@ -3207,6 +3392,19 @@
         "strip-json-comments": "^3.1.1"
       }
     },
+    "@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -3341,6 +3539,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@panva/hkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.2.tgz",
+      "integrity": "sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA=="
+    },
     "@pkgr/utils": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@@ -3359,6 +3562,24 @@
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
     },
+    "@sideway/address": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
+      "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+    },
+    "@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
     "@swc/helpers": {
       "version": "0.4.14",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
@@ -3680,6 +3901,11 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+    },
     "core-js-pure": {
       "version": "3.26.1",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.1.tgz",
@@ -3732,6 +3958,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4386,6 +4617,18 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      }
+    },
     "ignore": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
@@ -4575,6 +4818,23 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "joi": {
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.7.0.tgz",
+      "integrity": "sha512-1/ugc8djfn93rTE3WRKdCzGGt/EtiYKxITMO4Wiv6q5JL1gl9ePt4kBsl1S499nbosspfctIQTpYIhSmHA3WAg==",
+      "requires": {
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/topo": "^5.0.0",
+        "@sideway/address": "^4.1.3",
+        "@sideway/formula": "^3.0.0",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "jose": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.11.1.tgz",
+      "integrity": "sha512-YRv4Tk/Wlug8qicwqFNFVEZSdbROCHRAC6qu/i0dyNKr5JQdoa2pIGoS04lLO/jXQX7Z9omoNewYIVIxqZBd9Q=="
+    },
     "js-sdsl": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@@ -4748,6 +5008,11 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
+    "object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
+    },
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -4808,6 +5073,11 @@
         "es-abstract": "^1.20.4"
       }
     },
+    "oidc-token-hash": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz",
+      "integrity": "sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ=="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4826,6 +5096,17 @@
         "is-wsl": "^2.2.0"
       }
     },
+    "openid-client": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.3.1.tgz",
+      "integrity": "sha512-RLfehQiHch9N6tRWNx68cicf3b1WR0x74bJWHRc25uYIbSRwjxYcTFaRnzbbpls5jroLAaB/bFIodTgA5LJMvw==",
+      "requires": {
+        "jose": "^4.10.0",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.0.1",
+        "oidc-token-hash": "^5.0.1"
+      }
+    },
     "optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -5055,6 +5336,11 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5088,6 +5374,11 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
+    },
     "string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
@@ -5198,6 +5489,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -5266,6 +5562,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@auth0/nextjs-auth0": "^2.0.1",
     "@types/node": "18.11.12",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",

pages/_app.tsx

@@ -3,27 +3,30 @@ import type { AppProps } from "next/app";
 import { Navigation } from "../components/Navigation/Navigation";
 import { Footer } from "../components/Footer/Footer";
 import { SEO } from "../components/SEO";
+import { UserProvider } from "@auth0/nextjs-auth0/client";
 
 export default function App({ Component, pageProps }: AppProps) {
 	return (
 		<>
-			<SEO />
+			<UserProvider>
-			<div
+				<SEO />
-				style={{
+				<div
-					display: "flex",
+					style={{
-					flexDirection: "column",
+						display: "flex",
-					justifyContent: "space-between",
+						flexDirection: "column",
-					minHeight: "100vh",
+						justifyContent: "space-between",
-				}}
+						minHeight: "100vh",
-			>
+					}}
-				<div>
+				>
-					<Navigation />
+					<div>
-					<Component {...pageProps} />
+						<Navigation />
+						<Component {...pageProps} />
+					</div>
+					<div>
+						<Footer />
+					</div>
 				</div>
-				<div>
+			</UserProvider>
-					<Footer />
-				</div>
-			</div>
 		</>
 	);
 }

pages/api/auth/[...auth0].ts

@@ -0,0 +1,3 @@
+import { handleAuth } from "@auth0/nextjs-auth0";
+
+export default handleAuth();

pages/ja.tsx

@@ -0,0 +1,44 @@
+import styles from "../styles/Ja.module.scss";
+import { useUser } from "@auth0/nextjs-auth0/client";
+
+const PageMe = () => {
+	const { user, isLoading } = useUser();
+	return (
+		<>
+			{isLoading && (
+				<main>
+					<h3>Ładujemy dane dla Ciebie...</h3>
+					<p>Sit tight.</p>
+				</main>
+			)}
+			{!isLoading && user && (
+				<main>
+					<div className={styles.header}>
+						<img src={user.picture || ""} alt={`${user.name}'s picture`} />
+						<h1>{user.name}</h1>
+					</div>
+					{/* <p>
+						mail: {user.email || "no mail"} <br />
+						mail verified: {user.email_verified || "no mail verified"} <br />
+						name: {user.name || "no name"} <br />
+						nickname: {user.nickname || "no nickname"} <br />
+						org id: {user.org_id || "no org id"} <br />
+						picture: {user.picture || "no picture"} <br />
+						sub: {user.sub || "no sub"} <br />
+						updated at: {user.updated_at || "no updated at"}
+					</p> */}
+				</main>
+			)}
+			{!isLoading && !user && (
+				<main>
+					<h1>/ja</h1>
+					<p>
+						Musisz być zalogowany aby skorzystać z funkcjonalności tej strony.
+					</p>
+				</main>
+			)}
+		</>
+	);
+};
+
+export default PageMe;

styles/Ja.module.scss

@@ -0,0 +1,14 @@
+.header {
+	margin: 2rem 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 1rem;
+	img {
+		height: 69px;
+		border-radius: 50%;
+	}
+	h1 {
+		font-size: 2rem;
+	}
+}

styles/globals.scss

@@ -27,6 +27,7 @@ body {
 	color: var(--color);
 	min-height: 100vh;
 	font-family: var(--fonts-norm);
+	overflow-y: overlay;
 }
 h1,
 h2,
@@ -97,3 +98,12 @@ button {
 		}
 	}
 }
+
+::-webkit-scrollbar {
+	background: transparent;
+	width: 4px;
+}
+::-webkit-scrollbar-thumb {
+	background: #999;
+	border-radius: 1337px;
+}