From d86c86e13753370a49c627fec194f97c2c924421 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Fri, 18 Apr 2025 21:05:49 +0200 Subject: [PATCH 01/23] feat: implement basic oauth authentication --- package.json | 1 + src/app/api/auth/[...nextauth]/route.ts | 2 + src/app/login/page.tsx | 20 ++++++++ src/auth.ts | 6 +++ src/components/user/signin-button.tsx | 14 ++++++ src/components/user/signout-button.tsx | 14 ++++++ src/middleware.ts | 1 + yarn.lock | 62 +++++++++++++++++++++++++ 8 files changed, 120 insertions(+) create mode 100644 src/app/api/auth/[...nextauth]/route.ts create mode 100644 src/app/login/page.tsx create mode 100644 src/auth.ts create mode 100644 src/components/user/signin-button.tsx create mode 100644 src/components/user/signout-button.tsx create mode 100644 src/middleware.ts diff --git a/package.json b/package.json index 2260762..c9452a8 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "next": "15.3.2", + "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts new file mode 100644 index 0000000..c95521a --- /dev/null +++ b/src/app/api/auth/[...nextauth]/route.ts @@ -0,0 +1,2 @@ +import { handlers } from '@/auth'; // Referring to the auth.ts we just created +export const { GET, POST } = handlers; diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 0000000..c3e261e --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,20 @@ +import { auth } from '@/auth'; +import SignIn from '@/components/user/signin-button'; +import { SignOut } from '@/components/user/signout-button'; + +export default async function Login() { + const session = await auth(); + return ( +
+

Login

+ {!session?.user ? ( + + ) : ( + <> +

Hallo {session.user.name}

+ + + )} +
+ ); +} diff --git a/src/auth.ts b/src/auth.ts new file mode 100644 index 0000000..e97fa92 --- /dev/null +++ b/src/auth.ts @@ -0,0 +1,6 @@ +import NextAuth from 'next-auth'; +import Authentik from 'next-auth/providers/authentik'; + +export const { handlers, signIn, signOut, auth } = NextAuth({ + providers: [Authentik], +}); diff --git a/src/components/user/signin-button.tsx b/src/components/user/signin-button.tsx new file mode 100644 index 0000000..9e4dc55 --- /dev/null +++ b/src/components/user/signin-button.tsx @@ -0,0 +1,14 @@ +import { signIn } from '@/auth'; + +export default function SignIn() { + return ( +
{ + 'use server'; + await signIn('authentik'); + }} + > + +
+ ); +} diff --git a/src/components/user/signout-button.tsx b/src/components/user/signout-button.tsx new file mode 100644 index 0000000..6bc4c98 --- /dev/null +++ b/src/components/user/signout-button.tsx @@ -0,0 +1,14 @@ +import { signOut } from '@/auth'; + +export function SignOut() { + return ( +
{ + 'use server'; + await signOut(); + }} + > + +
+ ); +} diff --git a/src/middleware.ts b/src/middleware.ts new file mode 100644 index 0000000..c979e88 --- /dev/null +++ b/src/middleware.ts @@ -0,0 +1 @@ +export { auth as middleware } from '@/auth'; diff --git a/yarn.lock b/yarn.lock index 4f15697..8d5a0fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,19 @@ # yarn lockfile v1 +"@auth/core@0.37.2": + version "0.37.2" + resolved "https://registry.yarnpkg.com/@auth/core/-/core-0.37.2.tgz#0db8a94a076846bd88eb7f9273618513e2285cb2" + integrity sha512-kUvzyvkcd6h1vpeMAojK2y7+PAV5H+0Cc9+ZlKYDFhDY31AlvsB+GW5vNO4qE3Y07KeQgvNO9U0QUx/fN62kBw== + dependencies: + "@panva/hkdf" "^1.2.1" + "@types/cookie" "0.6.0" + cookie "0.7.1" + jose "^5.9.3" + oauth4webapi "^3.0.0" + preact "10.11.3" + preact-render-to-string "5.2.3" + "@emnapi/core@^1.4.0": version "1.4.3" resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.4.3.tgz#9ac52d2d5aea958f67e52c40a065f51de59b77d6" @@ -339,6 +352,11 @@ resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e" integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA== +"@panva/hkdf@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.2.1.tgz#cb0d111ef700136f4580349ff0226bf25c853f23" + integrity sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw== + "@rtsao/scc@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8" @@ -368,6 +386,11 @@ dependencies: tslib "^2.4.0" +"@types/cookie@0.6.0": + version "0.6.0" + resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5" + integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA== + "@types/estree@^1.0.6": version "1.0.7" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.7.tgz#4158d3105276773d5b7695cd4834b1722e4f37a8" @@ -879,6 +902,11 @@ cookie-signature@^1.2.1: resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.2.2.tgz#57c7fc3cc293acab9fec54d73e15690ebe4a1793" integrity sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg== +cookie@0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9" + integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w== + cookie@^0.7.1: version "0.7.2" resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7" @@ -1948,6 +1976,11 @@ iterator.prototype@^1.1.4: has-symbols "^1.1.0" set-function-name "^2.0.2" +jose@^5.9.3: + version "5.10.0" + resolved "https://registry.yarnpkg.com/jose/-/jose-5.10.0.tgz#c37346a099d6467c401351a9a0c2161e0f52c4be" + integrity sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg== + "js-tokens@^3.0.0 || ^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -2117,6 +2150,13 @@ negotiator@^1.0.0: resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-1.0.0.tgz#b6c91bb47172d69f93cfd7c357bbb529019b5f6a" integrity sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg== +next-auth@^5.0.0-beta.25: + version "5.0.0-beta.25" + resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-5.0.0-beta.25.tgz#3a9f9734e1d8fa5ced545360f1afc24862cb92d5" + integrity sha512-2dJJw1sHQl2qxCrRk+KTQbeH+izFbGFPuJj5eGgBZFYyiYYtvlrBeUw1E/OJJxTRjuxbSYGnCTkUIRsIIW0bog== + dependencies: + "@auth/core" "0.37.2" + next@15.3.2: version "15.3.2" resolved "https://registry.yarnpkg.com/next/-/next-15.3.2.tgz#97510629e38a058dd154782a5c2ec9c9ab94d0d8" @@ -2140,6 +2180,11 @@ next@15.3.2: "@next/swc-win32-x64-msvc" "15.3.2" sharp "^0.34.1" +oauth4webapi@^3.0.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/oauth4webapi/-/oauth4webapi-3.5.0.tgz#9be1227e2a6af7761dd0d1a811ce33050077974b" + integrity sha512-DF3mLWNuxPkxJkHmWxbSFz4aE5CjWOsm465VBfBdWzmzX4Mg3vF8icxK+iKqfdWrIumBJ2TaoNQWx+SQc2bsPQ== + object-assign@^4, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -2321,6 +2366,18 @@ postcss@8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" +preact-render-to-string@5.2.3: + version "5.2.3" + resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.3.tgz#23d17376182af720b1060d5a4099843c7fe92fe4" + integrity sha512-aPDxUn5o3GhWdtJtW0svRC2SS/l8D9MAgo2+AWml+BhDImb27ALf04Q2d+AHqUUOc6RdSXFIBVa2gxzgMKgtZA== + dependencies: + pretty-format "^3.8.0" + +preact@10.11.3: + version "10.11.3" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19" + integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg== + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -2331,6 +2388,11 @@ prettier@3.5.3: resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.3.tgz#4fc2ce0d657e7a02e602549f053b239cb7dfe1b5" integrity sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw== +pretty-format@^3.8.0: + version "3.8.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385" + integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew== + prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" From 77ef7038d243614bba8e77ffe941d44b30161fe5 Mon Sep 17 00:00:00 2001 From: Dominik Stahl Date: Sat, 19 Apr 2025 01:24:28 +0200 Subject: [PATCH 02/23] feat: added button styling and updated login layout --- package.json | 5 ++ src/app/globals.css | 24 ++++++++- src/app/login/page.tsx | 20 ++++--- src/components/Button.module.css | 54 +++++++++++++++++++ src/components/Button.tsx | 39 ++++++++++++++ src/components/user/login-button.tsx | 24 +++++++++ .../{signout-button.tsx => logout-button.tsx} | 5 +- src/components/user/signin-button.tsx | 14 ----- yarn.lock | 40 ++++++++++++++ 9 files changed, 196 insertions(+), 29 deletions(-) create mode 100644 src/components/Button.module.css create mode 100644 src/components/Button.tsx create mode 100644 src/components/user/login-button.tsx rename src/components/user/{signout-button.tsx => logout-button.tsx} (61%) delete mode 100644 src/components/user/signin-button.tsx diff --git a/package.json b/package.json index c9452a8..9d933a6 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,11 @@ "format": "prettier --write ." }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-regular-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "next": "15.3.2", "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", diff --git a/src/app/globals.css b/src/app/globals.css index e3734be..6dae48f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,12 +1,32 @@ :root { --background: #ffffff; - --foreground: #171717; + --foreground: #3a3a3a; + + --neutral: #808080; + + --primary-50: rgba(59, 130, 246, 0.5); + --primary-75: rgba(59, 130, 246, 0.75); + --primary-100: rgba(59, 130, 246, 1); + + --warning-50: rgba(245, 158, 11, 0.5); + --warning-75: rgba(245, 158, 11, 0.75); + --warning-100: rgba(245, 158, 11, 1); + + --success-50: rgba(22, 163, 74, 0.5); + --success-75: rgba(22, 163, 74, 0.75); + --success-100: rgba(22, 163, 74, 1); + + --danger-50: rgba(220, 38, 38, 0.5); + --danger-75: rgba(220, 38, 38, 0.75); + --danger-100: rgba(220, 38, 38, 1); + + --button-text-size: 18px; } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; - --foreground: #ededed; + --foreground: #e5e7eb; } } diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index c3e261e..44e80c0 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,20 +1,18 @@ import { auth } from '@/auth'; -import SignIn from '@/components/user/signin-button'; -import { SignOut } from '@/components/user/signout-button'; +import Login from '@/components/user/login-button'; +import { redirect } from 'next/navigation'; -export default async function Login() { +export default async function LoginPage() { const session = await auth(); + + if (session?.user) { + redirect('/'); + } + return (

Login

- {!session?.user ? ( - - ) : ( - <> -

Hallo {session.user.name}

- - - )} +
); } diff --git a/src/components/Button.module.css b/src/components/Button.module.css new file mode 100644 index 0000000..85e67b6 --- /dev/null +++ b/src/components/Button.module.css @@ -0,0 +1,54 @@ +.button { + background-color: var(--color-50); + border-radius: 9999px; + padding: 10px 20px; + outline: none; + border: 2px solid var(--color-100); + transition: background-color 0.3s ease; + height: 50px; +} + +.button:hover { + background-color: var(--color-75); +} + +.button:active { + background-color: var(--color-100); +} + +.button span { + color: var(--foreground); + font-size: var(--button-text-size); + font-weight: 600; +} + +.icon { + display: grid; + grid-template-columns: 25px 1fr; + gap: 10px; + align-items: center; +} + +.style_primary { + --color-50: var(--primary-50); + --color-75: var(--primary-75); + --color-100: var(--primary-100); +} + +.style_warning { + --color-50: var(--warning-50); + --color-75: var(--warning-75); + --color-100: var(--warning-100); +} + +.style_success { + --color-50: var(--success-50); + --color-75: var(--success-75); + --color-100: var(--success-100); +} + +.style_danger { + --color-50: var(--danger-50); + --color-75: var(--danger-75); + --color-100: var(--danger-100); +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..7fee3ff --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,39 @@ +import style from './Button.module.css'; + +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +export default function Button({ + type, + children, + mode = 'primary', + icon, +}: { + type?: 'button' | 'submit' | 'reset'; + children?: React.ReactNode; + mode?: 'primary' | 'warning' | 'success' | 'danger'; + icon?: IconProp; +}) { + if (!icon) { + return ( + + ); + } else { + return ( + + ); + } +} diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx new file mode 100644 index 0000000..e88891b --- /dev/null +++ b/src/components/user/login-button.tsx @@ -0,0 +1,24 @@ +import { signIn } from '@/auth'; +import Button from '../Button'; +import { faOpenid } from '@fortawesome/free-brands-svg-icons'; + +export default function Login({ + provider, + providerDisplayName, +}: { + provider: string; + providerDisplayName: string; +}) { + return ( +
{ + 'use server'; + await signIn(provider); + }} + > + +
+ ); +} diff --git a/src/components/user/signout-button.tsx b/src/components/user/logout-button.tsx similarity index 61% rename from src/components/user/signout-button.tsx rename to src/components/user/logout-button.tsx index 6bc4c98..2ce6c8b 100644 --- a/src/components/user/signout-button.tsx +++ b/src/components/user/logout-button.tsx @@ -1,6 +1,7 @@ import { signOut } from '@/auth'; +import Button from '../Button'; -export function SignOut() { +export function Logout() { return (
{ @@ -8,7 +9,7 @@ export function SignOut() { await signOut(); }} > - +
); } diff --git a/src/components/user/signin-button.tsx b/src/components/user/signin-button.tsx deleted file mode 100644 index 9e4dc55..0000000 --- a/src/components/user/signin-button.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { signIn } from '@/auth'; - -export default function SignIn() { - return ( -
{ - 'use server'; - await signIn('authentik'); - }} - > - -
- ); -} diff --git a/yarn.lock b/yarn.lock index 8d5a0fd..e0a6eb1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -103,6 +103,46 @@ "@eslint/core" "^0.13.0" levn "^0.4.1" +"@fortawesome/fontawesome-common-types@6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470" + integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg== + +"@fortawesome/fontawesome-svg-core@^6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2" + integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/free-brands-svg-icons@^6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz#4ebee8098f31da5446dda81edc344025eb59b27e" + integrity sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/free-regular-svg-icons@^6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz#f1651e55e6651a15589b0569516208f9c65f96db" + integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/free-solid-svg-icons@^6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6" + integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/react-fontawesome@^0.2.2": + version "0.2.2" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4" + integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g== + dependencies: + prop-types "^15.8.1" + "@humanfs/core@^0.19.1": version "0.19.1" resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77" From d43c0f78b4a2e1b074c5d838c8e50d5b250a7008 Mon Sep 17 00:00:00 2001 From: Dominik Stahl Date: Sat, 19 Apr 2025 01:25:23 +0200 Subject: [PATCH 03/23] feat: setup protected routes --- src/auth.ts | 5 +++++ src/middleware.ts | 13 ++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/auth.ts b/src/auth.ts index e97fa92..1d91260 100644 --- a/src/auth.ts +++ b/src/auth.ts @@ -3,4 +3,9 @@ import Authentik from 'next-auth/providers/authentik'; export const { handlers, signIn, signOut, auth } = NextAuth({ providers: [Authentik], + callbacks: { + authorized: async ({ auth }) => { + return !!auth; + }, + }, }); diff --git a/src/middleware.ts b/src/middleware.ts index c979e88..e03128a 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -1 +1,12 @@ -export { auth as middleware } from '@/auth'; +import { auth } from '@/auth'; + +export default auth((req) => { + if (!req.auth && req.nextUrl.pathname !== '/login') { + const newUrl = new URL('/login', req.nextUrl.origin); + return Response.redirect(newUrl); + } +}); + +export const config = { + matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], +}; From 93b1fec3641fe809629f3773d12cd5629dd6f2af Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sat, 19 Apr 2025 20:51:08 +0200 Subject: [PATCH 04/23] feat: added default route to /login --- src/app/api/auth/[...nextauth]/route.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts index c95521a..cb15ae3 100644 --- a/src/app/api/auth/[...nextauth]/route.ts +++ b/src/app/api/auth/[...nextauth]/route.ts @@ -1,2 +1,10 @@ -import { handlers } from '@/auth'; // Referring to the auth.ts we just created +import { handlers } from '@/auth'; +import { NextRequest, NextResponse } from 'next/server'; + export const { GET, POST } = handlers; + +export async function middleware(request: NextRequest) { + if (request.nextUrl.pathname === '/') { + return NextResponse.redirect(new URL('/login', request.url)); + } +} From 8a627983dff914df830b7cdafe6f39ebba948f5a Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sat, 19 Apr 2025 22:14:56 +0200 Subject: [PATCH 05/23] fix: renamed button related files --- src/components/button.module.css | 54 ++++++++++++++++++++++++++++++++ src/components/button.tsx | 39 +++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 src/components/button.module.css create mode 100644 src/components/button.tsx diff --git a/src/components/button.module.css b/src/components/button.module.css new file mode 100644 index 0000000..85e67b6 --- /dev/null +++ b/src/components/button.module.css @@ -0,0 +1,54 @@ +.button { + background-color: var(--color-50); + border-radius: 9999px; + padding: 10px 20px; + outline: none; + border: 2px solid var(--color-100); + transition: background-color 0.3s ease; + height: 50px; +} + +.button:hover { + background-color: var(--color-75); +} + +.button:active { + background-color: var(--color-100); +} + +.button span { + color: var(--foreground); + font-size: var(--button-text-size); + font-weight: 600; +} + +.icon { + display: grid; + grid-template-columns: 25px 1fr; + gap: 10px; + align-items: center; +} + +.style_primary { + --color-50: var(--primary-50); + --color-75: var(--primary-75); + --color-100: var(--primary-100); +} + +.style_warning { + --color-50: var(--warning-50); + --color-75: var(--warning-75); + --color-100: var(--warning-100); +} + +.style_success { + --color-50: var(--success-50); + --color-75: var(--success-75); + --color-100: var(--success-100); +} + +.style_danger { + --color-50: var(--danger-50); + --color-75: var(--danger-75); + --color-100: var(--danger-100); +} diff --git a/src/components/button.tsx b/src/components/button.tsx new file mode 100644 index 0000000..275063f --- /dev/null +++ b/src/components/button.tsx @@ -0,0 +1,39 @@ +import style from './button.module.css'; + +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +export default function Button({ + type, + children, + mode = 'primary', + icon, +}: { + type?: 'button' | 'submit' | 'reset'; + children?: React.ReactNode; + mode?: 'primary' | 'warning' | 'success' | 'danger'; + icon?: IconProp; +}) { + if (!icon) { + return ( + + ); + } else { + return ( + + ); + } +} From 9987eb651b5ae50f1d2b423fda223ea5214f3f6a Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sat, 19 Apr 2025 22:15:27 +0200 Subject: [PATCH 06/23] feat: add Home page with Logout button --- src/app/home/page.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/app/home/page.tsx diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx new file mode 100644 index 0000000..21b36ff --- /dev/null +++ b/src/app/home/page.tsx @@ -0,0 +1,10 @@ +import { Logout } from '@/components/user/logout-button'; + +export default function Home() { + return ( +
+

Home

+ +
+ ); +} From eb748783806728eb99d236ffc663f2e0e69e0911 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sat, 19 Apr 2025 22:17:45 +0200 Subject: [PATCH 07/23] fix: changed button component references --- src/components/user/login-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx index e88891b..463fb6c 100644 --- a/src/components/user/login-button.tsx +++ b/src/components/user/login-button.tsx @@ -1,5 +1,5 @@ import { signIn } from '@/auth'; -import Button from '../Button'; +import Button from '../button'; import { faOpenid } from '@fortawesome/free-brands-svg-icons'; export default function Login({ From d781567b4feaafb407df534fe519dbd56b1d88d8 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sat, 19 Apr 2025 22:20:46 +0200 Subject: [PATCH 08/23] feat: added logout route and icon --- src/components/user/logout-button.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/user/logout-button.tsx b/src/components/user/logout-button.tsx index 2ce6c8b..9a42274 100644 --- a/src/components/user/logout-button.tsx +++ b/src/components/user/logout-button.tsx @@ -1,15 +1,18 @@ import { signOut } from '@/auth'; -import Button from '../Button'; +import Button from '../button'; +import { faDoorOpen } from '@fortawesome/free-solid-svg-icons'; export function Logout() { return (
{ 'use server'; - await signOut(); + await signOut({ redirectTo: '/login' }); }} > - +
); } From 64bd361b571484f6236bc6537f487bf3673d7009 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sat, 19 Apr 2025 22:24:41 +0200 Subject: [PATCH 09/23] feat: added labeled input and texbox stying --- src/app/globals.css | 4 ++ src/app/login/login.module.css | 14 +++++++ src/app/login/page.tsx | 23 ++++++++++- src/components/Button.module.css | 54 ------------------------ src/components/Button.tsx | 39 ------------------ src/components/labeled-input.module.css | 37 +++++++++++++++++ src/components/labeled-input.tsx | 55 +++++++++++++++++++++++++ 7 files changed, 131 insertions(+), 95 deletions(-) create mode 100644 src/app/login/login.module.css delete mode 100644 src/components/Button.module.css delete mode 100644 src/components/Button.tsx create mode 100644 src/components/labeled-input.module.css create mode 100644 src/components/labeled-input.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 6dae48f..1f7e9c7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -21,6 +21,10 @@ --danger-100: rgba(220, 38, 38, 1); --button-text-size: 18px; + + --textbox-50: rgb(204, 204, 204, 0.5); + --textbox-75: rgb(204, 204, 204, 0.75); + --textbox-100: rgb(204, 204, 204, 1); } @media (prefers-color-scheme: dark) { diff --git a/src/app/login/login.module.css b/src/app/login/login.module.css new file mode 100644 index 0000000..a099cbb --- /dev/null +++ b/src/app/login/login.module.css @@ -0,0 +1,14 @@ +/* /home/max/Git/MeetUp/src/app/login/login.module.css */ +.loginContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + gap: 1.5rem; + padding: 2rem; +} + +.loginContainer h1 { + margin-bottom: 1rem; +} diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 44e80c0..74b9f00 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,17 +1,36 @@ +// /home/max/Git/MeetUp/src/app/login/page.tsx import { auth } from '@/auth'; +import LabeledInput from '@/components/labeled-input'; import Login from '@/components/user/login-button'; import { redirect } from 'next/navigation'; +import style from './login.module.css'; + +import '@/app/globals.css'; + export default async function LoginPage() { const session = await auth(); if (session?.user) { - redirect('/'); + redirect('/home'); } return ( -
+

Login

+ + +
); diff --git a/src/components/Button.module.css b/src/components/Button.module.css deleted file mode 100644 index 85e67b6..0000000 --- a/src/components/Button.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.button { - background-color: var(--color-50); - border-radius: 9999px; - padding: 10px 20px; - outline: none; - border: 2px solid var(--color-100); - transition: background-color 0.3s ease; - height: 50px; -} - -.button:hover { - background-color: var(--color-75); -} - -.button:active { - background-color: var(--color-100); -} - -.button span { - color: var(--foreground); - font-size: var(--button-text-size); - font-weight: 600; -} - -.icon { - display: grid; - grid-template-columns: 25px 1fr; - gap: 10px; - align-items: center; -} - -.style_primary { - --color-50: var(--primary-50); - --color-75: var(--primary-75); - --color-100: var(--primary-100); -} - -.style_warning { - --color-50: var(--warning-50); - --color-75: var(--warning-75); - --color-100: var(--warning-100); -} - -.style_success { - --color-50: var(--success-50); - --color-75: var(--success-75); - --color-100: var(--success-100); -} - -.style_danger { - --color-50: var(--danger-50); - --color-75: var(--danger-75); - --color-100: var(--danger-100); -} diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index 7fee3ff..0000000 --- a/src/components/Button.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import style from './Button.module.css'; - -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -export default function Button({ - type, - children, - mode = 'primary', - icon, -}: { - type?: 'button' | 'submit' | 'reset'; - children?: React.ReactNode; - mode?: 'primary' | 'warning' | 'success' | 'danger'; - icon?: IconProp; -}) { - if (!icon) { - return ( - - ); - } else { - return ( - - ); - } -} diff --git a/src/components/labeled-input.module.css b/src/components/labeled-input.module.css new file mode 100644 index 0000000..e4f614d --- /dev/null +++ b/src/components/labeled-input.module.css @@ -0,0 +1,37 @@ +.input, +.input * { + box-sizing: border-box; +} + +.input { + height: 50px; + position: relative; + overflow: visible; +} + +.input input { + width: 100%; + height: 100%; + border: 1px solid var(--textbox-75); + border-radius: 9999px; + padding: 10px 20px; + background-color: var(--textbox-50); + color: var(--foreground); + font-size: 16px; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + box-shadow 0.2s ease; +} + +.input input:hover { + background-color: var(--textbox-75); + border-color: var(--textbox-100); +} + +.input input:focus { + outline: none; + background-color: var(--textbox-100); + border-color: var(--primary-100); + box-shadow: 0 0 0 2px var(--primary-50); +} diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx new file mode 100644 index 0000000..ea89c29 --- /dev/null +++ b/src/components/labeled-input.tsx @@ -0,0 +1,55 @@ +import style from './labeled-input.module.css'; + +export default function LabeledInput({ + type, + size = 'default', + label, + placeholder, + value, +}: { + type: 'text' | 'email' | 'password'; + size: 'default' | 'login' | 'settings'; + label?: string; + placeholder?: string; + value?: string; +}) { + if (!label) { + return ( +
+ +
+ ); + } else { + return ( +
+

+ +

+ + +
+ ); + } +} From 4d781775e3990de2b948af8eca58660047046104 Mon Sep 17 00:00:00 2001 From: Dominik Stahl Date: Sat, 19 Apr 2025 23:11:11 +0200 Subject: [PATCH 10/23] refactor(login): page styling --- src/app/api/auth/[...nextauth]/route.ts | 7 ------ src/app/globals.css | 8 ++++++ src/app/login/login.module.css | 20 +++++++++++++-- src/app/login/page.tsx | 27 +++++++++++--------- src/components/button.tsx | 8 ++++++ src/components/labeled-input.module.css | 4 +-- src/components/labeled-input.tsx | 33 +++++++++++-------------- src/components/user/login-button.tsx | 2 +- 8 files changed, 66 insertions(+), 43 deletions(-) diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts index cb15ae3..0a98352 100644 --- a/src/app/api/auth/[...nextauth]/route.ts +++ b/src/app/api/auth/[...nextauth]/route.ts @@ -1,10 +1,3 @@ import { handlers } from '@/auth'; -import { NextRequest, NextResponse } from 'next/server'; export const { GET, POST } = handlers; - -export async function middleware(request: NextRequest) { - if (request.nextUrl.pathname === '/') { - return NextResponse.redirect(new URL('/login', request.url)); - } -} diff --git a/src/app/globals.css b/src/app/globals.css index 1f7e9c7..4d042b1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -25,12 +25,20 @@ --textbox-50: rgb(204, 204, 204, 0.5); --textbox-75: rgb(204, 204, 204, 0.75); --textbox-100: rgb(204, 204, 204, 1); + + --base-1: #f3f3f3; } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #e5e7eb; + + --textbox-50: rgb(75, 85, 99, 0.5); + --textbox-75: rgb(75, 85, 99, 0.75); + --textbox-100: rgb(75, 85, 99, 1); + + --base-1: #111111; } } diff --git a/src/app/login/login.module.css b/src/app/login/login.module.css index a099cbb..73b5f1b 100644 --- a/src/app/login/login.module.css +++ b/src/app/login/login.module.css @@ -1,14 +1,30 @@ -/* /home/max/Git/MeetUp/src/app/login/login.module.css */ +body:has(.loginContainer) { + display: flex; + justify-content: center; + align-items: center; + height: 100svh; +} + .loginContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; - min-height: 100vh; gap: 1.5rem; padding: 2rem; + width: 300px; + + background-color: var(--base-1); + border-radius: 1rem; + border: 2px solid var(--foreground); } .loginContainer h1 { margin-bottom: 1rem; } + +.loginContainer form { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 74b9f00..ff5b63c 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -19,18 +19,21 @@ export default async function LoginPage() {

Login

- - +
+ + + + +
+
); diff --git a/src/components/button.tsx b/src/components/button.tsx index 275063f..50d1947 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -8,17 +8,22 @@ export default function Button({ children, mode = 'primary', icon, + width, }: { type?: 'button' | 'submit' | 'reset'; children?: React.ReactNode; mode?: 'primary' | 'warning' | 'success' | 'danger'; icon?: IconProp; + width?: number; }) { if (!icon) { return ( @@ -30,6 +35,9 @@ export default function Button({ style.button + ' ' + style['style_' + mode] + ' ' + style['icon'] } type={type} + style={{ + width: width ? `${width}px` : '100%', + }} > {children} diff --git a/src/components/labeled-input.module.css b/src/components/labeled-input.module.css index e4f614d..483a225 100644 --- a/src/components/labeled-input.module.css +++ b/src/components/labeled-input.module.css @@ -4,14 +4,14 @@ } .input { - height: 50px; position: relative; overflow: visible; + width: 250px; } .input input { width: 100%; - height: 100%; + height: 50px; border: 1px solid var(--textbox-75); border-radius: 9999px; padding: 10px 20px; diff --git a/src/components/labeled-input.tsx b/src/components/labeled-input.tsx index ea89c29..48f27fe 100644 --- a/src/components/labeled-input.tsx +++ b/src/components/labeled-input.tsx @@ -2,52 +2,47 @@ import style from './labeled-input.module.css'; export default function LabeledInput({ type, - size = 'default', + width, label, placeholder, value, }: { type: 'text' | 'email' | 'password'; - size: 'default' | 'login' | 'settings'; + width?: number; label?: string; placeholder?: string; value?: string; }) { + const randomId = Math.random().toString(36).substring(2, 15); + if (!label) { return (
); } else { return (
-

- -

+
); diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx index 463fb6c..4437ca6 100644 --- a/src/components/user/login-button.tsx +++ b/src/components/user/login-button.tsx @@ -16,7 +16,7 @@ export default function Login({ await signIn(provider); }} > - From 486e8cc1f84c542576d61ef83bc48cf2c3861ae6 Mon Sep 17 00:00:00 2001 From: Maximilian Liebmann Date: Sun, 4 May 2025 04:36:11 +0200 Subject: [PATCH 11/23] feat: update login and logout components and labels --- src/app/home/page.tsx | 2 +- src/app/login/page.tsx | 2 +- src/components/button.module.css | 2 +- src/components/labeled-input.module.css | 2 +- src/components/user/{login-button.tsx => sso-login-button.tsx} | 0 .../user/{logout-button.tsx => sso-logout-button.tsx} | 0 6 files changed, 4 insertions(+), 4 deletions(-) rename src/components/user/{login-button.tsx => sso-login-button.tsx} (100%) rename src/components/user/{logout-button.tsx => sso-logout-button.tsx} (100%) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 21b36ff..b28c508 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,4 +1,4 @@ -import { Logout } from '@/components/user/logout-button'; +import { Logout } from '@/components/user/sso-logout-button'; export default function Home() { return ( diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index ff5b63c..5e54a9f 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,7 +1,7 @@ // /home/max/Git/MeetUp/src/app/login/page.tsx import { auth } from '@/auth'; import LabeledInput from '@/components/labeled-input'; -import Login from '@/components/user/login-button'; +import Login from '@/components/user/sso-login-button'; import { redirect } from 'next/navigation'; import style from './login.module.css'; diff --git a/src/components/button.module.css b/src/components/button.module.css index 85e67b6..0a9df2d 100644 --- a/src/components/button.module.css +++ b/src/components/button.module.css @@ -1,6 +1,6 @@ .button { background-color: var(--color-50); - border-radius: 9999px; + border-radius: 16px; padding: 10px 20px; outline: none; border: 2px solid var(--color-100); diff --git a/src/components/labeled-input.module.css b/src/components/labeled-input.module.css index 483a225..85f46ed 100644 --- a/src/components/labeled-input.module.css +++ b/src/components/labeled-input.module.css @@ -13,7 +13,7 @@ width: 100%; height: 50px; border: 1px solid var(--textbox-75); - border-radius: 9999px; + border-radius: 16px; padding: 10px 20px; background-color: var(--textbox-50); color: var(--foreground); diff --git a/src/components/user/login-button.tsx b/src/components/user/sso-login-button.tsx similarity index 100% rename from src/components/user/login-button.tsx rename to src/components/user/sso-login-button.tsx diff --git a/src/components/user/logout-button.tsx b/src/components/user/sso-logout-button.tsx similarity index 100% rename from src/components/user/logout-button.tsx rename to src/components/user/sso-logout-button.tsx From 710db0a99190b1b86f29896da743a9315bd523b3 Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Tue, 6 May 2025 11:37:30 +0200 Subject: [PATCH 12/23] feat: trying to add normal login button --- src/app/login/page.tsx | 6 +++++- src/components/user/login-button.tsx | 11 +++++++++++ src/components/user/sso-login-button.tsx | 2 +- 3 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 src/components/user/login-button.tsx diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 5e54a9f..27fc99c 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -7,6 +7,8 @@ import { redirect } from 'next/navigation'; import style from './login.module.css'; import '@/app/globals.css'; +import SSOLogin from '@/components/user/sso-login-button'; +import Login from '@/components/user/login-button'; export default async function LoginPage() { const session = await auth(); @@ -32,9 +34,11 @@ export default async function LoginPage() { /> + +
- +
); } diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx new file mode 100644 index 0000000..f503cec --- /dev/null +++ b/src/components/user/login-button.tsx @@ -0,0 +1,11 @@ +import Button from '../button'; + +export default function Login() { + return ( +
+ +
+ ); +} diff --git a/src/components/user/sso-login-button.tsx b/src/components/user/sso-login-button.tsx index 4437ca6..272872e 100644 --- a/src/components/user/sso-login-button.tsx +++ b/src/components/user/sso-login-button.tsx @@ -2,7 +2,7 @@ import { signIn } from '@/auth'; import Button from '../button'; import { faOpenid } from '@fortawesome/free-brands-svg-icons'; -export default function Login({ +export default function SSOLogin({ provider, providerDisplayName, }: { From 43504d31f71dda9c6b632165ac16b2d3fa63222c Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Tue, 6 May 2025 12:07:47 +0200 Subject: [PATCH 13/23] feat: added normal login button --- src/app/globals.css | 4 ++++ src/app/login/page.tsx | 7 +++---- src/components/button.module.css | 6 ++++++ src/components/button.tsx | 2 +- src/components/user/login-button.tsx | 4 ++-- 5 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 4d042b1..e37b231 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -22,6 +22,10 @@ --button-text-size: 18px; + --neutral-50: rgb(204, 204, 204, 0.5); + --neutral-75: rgb(204, 204, 204, 0.75); + --neutral-100: rgb(204, 204, 204, 1); + --textbox-50: rgb(204, 204, 204, 0.5); --textbox-75: rgb(204, 204, 204, 0.75); --textbox-100: rgb(204, 204, 204, 1); diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 27fc99c..68b1584 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,14 +1,13 @@ // /home/max/Git/MeetUp/src/app/login/page.tsx import { auth } from '@/auth'; import LabeledInput from '@/components/labeled-input'; -import Login from '@/components/user/sso-login-button'; +import SSOLogin from '@/components/user/sso-login-button'; +import Login from '@/components/user/login-button'; import { redirect } from 'next/navigation'; import style from './login.module.css'; import '@/app/globals.css'; -import SSOLogin from '@/components/user/sso-login-button'; -import Login from '@/components/user/login-button'; export default async function LoginPage() { const session = await auth(); @@ -34,7 +33,7 @@ export default async function LoginPage() { /> - +
diff --git a/src/components/button.module.css b/src/components/button.module.css index 0a9df2d..05fb359 100644 --- a/src/components/button.module.css +++ b/src/components/button.module.css @@ -52,3 +52,9 @@ --color-75: var(--danger-75); --color-100: var(--danger-100); } + +.style_neutral { + --color-50: var(--neutral-50); + --color-75: var(--neutral-75); + --color-100: var(--neutral-100); +} diff --git a/src/components/button.tsx b/src/components/button.tsx index 50d1947..87094ad 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -12,7 +12,7 @@ export default function Button({ }: { type?: 'button' | 'submit' | 'reset'; children?: React.ReactNode; - mode?: 'primary' | 'warning' | 'success' | 'danger'; + mode?: 'primary' | 'warning' | 'success' | 'danger' | 'neutral'; icon?: IconProp; width?: number; }) { diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx index f503cec..2a33cd9 100644 --- a/src/components/user/login-button.tsx +++ b/src/components/user/login-button.tsx @@ -1,9 +1,9 @@ import Button from '../button'; -export default function Login() { +export default function Login({}: {}) { return (
-
From bf50f3a5a5f080d632f66c785359a3a9d696ca3e Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Tue, 6 May 2025 13:07:50 +0200 Subject: [PATCH 14/23] fix: disable sso login when no issuer present --- src/app/login/page.tsx | 7 ++++++- src/auth.ts | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 68b1584..b20e030 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -37,7 +37,12 @@ export default async function LoginPage() {
- + {process.env.AUTH_AUTHENTIK_ISSUER && ( + + )} + {process.env.AUTH_AUTHENTIK_ISSUER && ( + + )} ); } diff --git a/src/auth.ts b/src/auth.ts index 1d91260..50b654c 100644 --- a/src/auth.ts +++ b/src/auth.ts @@ -2,7 +2,9 @@ import NextAuth from 'next-auth'; import Authentik from 'next-auth/providers/authentik'; export const { handlers, signIn, signOut, auth } = NextAuth({ - providers: [Authentik], + providers: [process.env.AUTH_AUTHENTIK_ISSUER ? Authentik : null].filter( + (x) => x !== null, + ), callbacks: { authorized: async ({ auth }) => { return !!auth; From d7e682d4843419486de12cf4d4bcc663378d1cfc Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Tue, 6 May 2025 13:49:29 +0200 Subject: [PATCH 15/23] fix: removes unused props from login component --- src/components/user/login-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx index 2a33cd9..aa1cf24 100644 --- a/src/components/user/login-button.tsx +++ b/src/components/user/login-button.tsx @@ -1,6 +1,6 @@ import Button from '../button'; -export default function Login({}: {}) { +export default function Login() { return (
- - ); -} diff --git a/src/components/user/login-form.tsx b/src/components/user/login-form.tsx new file mode 100644 index 0000000..12d1f3e --- /dev/null +++ b/src/components/user/login-form.tsx @@ -0,0 +1,24 @@ +import LabeledInput from '@/components/labeled-input'; +import Button from '../button'; + +export default function LoginForm() { + return ( +
+
+ + + + +
+ ); +} From 0187b2e955432af2972ccf24eb0dde808f87d711 Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Thu, 8 May 2025 13:04:16 +0200 Subject: [PATCH 21/23] fix: update middleware to check MEETUP_SKIP_LOGIN environment variable before redirecting to login --- src/middleware.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/middleware.ts b/src/middleware.ts index e03128a..e6e663d 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -1,7 +1,11 @@ import { auth } from '@/auth'; export default auth((req) => { - if (!req.auth && req.nextUrl.pathname !== '/login') { + if ( + !req.auth && + req.nextUrl.pathname !== '/login' && + process.env.MEETUP_SKIP_LOGIN === 'true' + ) { const newUrl = new URL('/login', req.nextUrl.origin); return Response.redirect(newUrl); } From 6a076c0b93c40807db0b68c034b073531c83ff3e Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Thu, 8 May 2025 13:17:28 +0200 Subject: [PATCH 22/23] fix: remove unnecessary comment from login page --- src/app/login/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index a09aeb1..9aadba1 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,4 +1,3 @@ -// /home/max/Git/MeetUp/src/app/login/page.tsx import { auth } from '@/auth'; import SSOLogin from '@/components/user/sso-login-button'; import LoginForm from '@/components/user/login-form'; From 97ea28f58869e274b0242a850b2b641fe8579ab1 Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Thu, 8 May 2025 13:21:28 +0200 Subject: [PATCH 23/23] fix: correct condition for MEETUP_SKIP_LOGIN environment variable in middleware --- src/middleware.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/middleware.ts b/src/middleware.ts index e6e663d..a35c316 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -4,7 +4,7 @@ export default auth((req) => { if ( !req.auth && req.nextUrl.pathname !== '/login' && - process.env.MEETUP_SKIP_LOGIN === 'true' + process.env.MEETUP_SKIP_LOGIN !== 'true' ) { const newUrl = new URL('/login', req.nextUrl.origin); return Response.redirect(newUrl);