refactor: removes unused sso logout button

Reviewed-on: #57
Reviewed-by: Dominik <mail@dominikstahl.dev>

.env.example

@@ -7,5 +7,3 @@ AUTH_AUTHENTIK_SECRET=
 AUTH_AUTHENTIK_ISSUER=
 
 NEXT_PUBLIC_APP_URL=
-
-MEETUP_SKIP_LOGIN=

README.md

@@ -94,10 +94,6 @@ This project is built with a modern tech stack:
 
       # Base URL of your application
       NEXT_PUBLIC_APP_URL="http://localhost:3000"
-
-      # Development: Skip login flow (set to "true" to bypass authentication)
-      # Ensure this is NOT set to "true" in production.
-      MEETUP_SKIP_LOGIN="false"
       ```
 
 4.  **Apply database migrations (Prisma):**
@@ -111,11 +107,20 @@ This project is built with a modern tech stack:
     - (Optional: If you need to generate Prisma Client without running migrations, use `npx prisma generate`)
 
 5.  **Run the development server:**
+
     ```bash
     yarn dev
     ```
+
     Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
 
+    The test user for the application is:
+
+    ```bash
+    email: test@example.com
+    password: password
+    ```
+
 **Self-Hosting with Docker (Planned):**
 
 - A Docker image and `docker-compose.yml` file will be provided in the future to allow for easy self-hosting of the MeetUP application. This setup will also include database services. Instructions will be updated here once available.

package.json

@@ -26,7 +26,7 @@
     "@radix-ui/react-tabs": "^1.1.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.509.0",
+    "lucide-react": "^0.510.0",
     "next": "15.3.2",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.6",
@@ -38,7 +38,7 @@
     "@eslint/eslintrc": "3.3.1",
     "@tailwindcss/postcss": "4.1.6",
     "@types/node": "22.15.17",
-    "@types/react": "19.1.3",
+    "@types/react": "19.1.4",
     "@types/react-dom": "19.1.4",
     "eslint": "9.26.0",
     "eslint-config-next": "15.3.2",

src/app/home/page.tsx

@@ -1,4 +1,3 @@
-import { Logout } from '@/components/user/sso-logout-button';
 import { RedirectButton } from '@/components/user/redirect-button';
 import { ThemePicker } from '@/components/user/theme-picker';
 
@@ -8,7 +7,7 @@ export default function Home() {
       <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
       <div>
         <h1>Home</h1>
-        <Logout />
+        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
         <RedirectButton redirectUrl='/settings' buttonText='Settings' />
       </div>
     </div>

src/app/login/page.tsx

@@ -1,4 +1,4 @@
-import { auth } from '@/auth';
+import { auth, providerMap } from '@/auth';
 import SSOLogin from '@/components/user/sso-login-button';
 import LoginForm from '@/components/user/login-form';
 import { redirect } from 'next/navigation';
@@ -35,11 +35,15 @@ export default async function LoginPage() {
             <CardContent className='gap-6 flex flex-col'>
               <LoginForm />
 
-              <hr />
+              {providerMap.length > 0 && <hr />}
 
-              {process.env.AUTH_AUTHENTIK_ISSUER && (
-                <SSOLogin provider='authentik' providerDisplayName='SSO' />
-              )}
+              {providerMap.map((provider) => (
+                <SSOLogin
+                  key={provider.id}
+                  provider={provider.id}
+                  providerDisplayName={provider.name}
+                />
+              ))}
             </CardContent>
           </Card>
         </div>

src/app/logout/page.tsx

@@ -0,0 +1,40 @@
+import { signOut } from '@/auth';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+export default function SignOutPage() {
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <form
+        action={async () => {
+          'use server';
+          await signOut({ redirectTo: '/login' });
+        }}
+      >
+        <Card className='w-[350px] max-w-screen'>
+          <CardHeader>
+            <CardTitle className='text-lg text-center'>Logout</CardTitle>
+            <CardDescription className='text-center'>
+              Are you sure you want to log out?
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='gap-6 flex flex-col'>
+            <Button
+              className='hover:bg-blue-600 hover:text-white'
+              type='submit'
+              variant='secondary'
+            >
+              Logout
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,3 +1,9 @@
-export default function Home() {
-  return <div></div>;
+import { auth } from '@/auth';
+import { redirect } from 'next/navigation';
+
+export default async function Home() {
+  const session = await auth();
+
+  if (!session?.user) redirect('/login');
+  else redirect('/home');
 }

src/auth.ts

@@ -1,13 +1,49 @@
 import NextAuth from 'next-auth';
+
+import type { Provider } from 'next-auth/providers';
+import Credentials from 'next-auth/providers/credentials';
+
 import Authentik from 'next-auth/providers/authentik';
 
+const providers: Provider[] = [
+  !process.env.DISABLE_PASSWORD_LOGIN &&
+    Credentials({
+      credentials: { password: { label: 'Password', type: 'password' } },
+      authorize(c) {
+        if (c.password !== 'password') return null;
+        return {
+          id: 'test',
+          name: 'Test User',
+          email: 'test@example.com',
+        };
+      },
+    }),
+  process.env.AUTH_AUTHENTIK_ID && Authentik,
+].filter(Boolean) as Provider[];
+
+export const providerMap = providers
+  .map((provider) => {
+    if (typeof provider === 'function') {
+      const providerData = provider();
+      return { id: providerData.id, name: providerData.name };
+    } else {
+      return { id: provider.id, name: provider.name };
+    }
+  })
+  .filter((provider) => provider.id !== 'credentials');
+
 export const { handlers, signIn, signOut, auth } = NextAuth({
-  providers: [process.env.AUTH_AUTHENTIK_ISSUER ? Authentik : null].filter(
-    (x) => x !== null,
-  ),
+  providers,
+  session: {
+    strategy: 'jwt',
+  },
+  pages: {
+    signIn: '/login',
+    signOut: '/logout',
+  },
   callbacks: {
-    authorized: async ({ auth }) => {
-      return !!auth;
+    authorized({ auth }) {
+      return !!auth?.user;
     },
   },
 });

src/components/labeled-input.tsx

@@ -6,23 +6,24 @@ export default function LabeledInput({
   label,
   placeholder,
   value,
+  name,
 }: {
   type: 'text' | 'email' | 'password';
   label: string;
   placeholder?: string;
   value?: string;
+  name?: string;
 }) {
-  const elementId = Math.random().toString(36).substring(2, 15);
-
   return (
     <div className='flex flex-col gap-1'>
-      <Label htmlFor={elementId}>{label}</Label>
+      <Label htmlFor={name}>{label}</Label>
 
       <Input
         type={type}
         placeholder={placeholder}
         defaultValue={value}
-        id={elementId}
+        id={name}
+        name={name}
       />
     </div>
   );

src/components/user/login-form.tsx

@@ -1,18 +1,38 @@
+import { signIn } from '@/auth';
 import LabeledInput from '@/components/labeled-input';
 import { Button } from '@/components/ui/button';
+import { AuthError } from 'next-auth';
+import { redirect } from 'next/navigation';
+
+const SIGNIN_ERROR_URL = '/error';
 
 export default function LoginForm() {
   return (
-    <form className='flex flex-col gap-5 w-full'>
+    <form
+      className='flex flex-col gap-5 w-full'
+      action={async (formData) => {
+        'use server';
+        try {
+          await signIn('credentials', formData);
+        } catch (error) {
+          if (error instanceof AuthError) {
+            return redirect(`${SIGNIN_ERROR_URL}?error=${error.type}`);
+          }
+          throw error;
+        }
+      }}
+    >
       <LabeledInput
         type='email'
         label='E-Mail'
         placeholder='Enter your E-Mail'
+        name='email'
       />
       <LabeledInput
         type='password'
         label='Password'
         placeholder='Enter your Password'
+        name='password'
       />
       <Button
         className='hover:bg-blue-600 hover:text-white'

src/components/user/sso-logout-button.tsx

@@ -1,18 +0,0 @@
-import { signOut } from '@/auth';
-import { IconButton } from '@/components/icon-button';
-import { faDoorOpen } from '@fortawesome/free-solid-svg-icons';
-
-export function Logout() {
-  return (
-    <form
-      action={async () => {
-        'use server';
-        await signOut({ redirectTo: '/login' });
-      }}
-    >
-      <IconButton type='submit' variant='destructive' icon={faDoorOpen}>
-        Sign Out
-      </IconButton>
-    </form>
-  );
-}

src/middleware.ts

@@ -1,18 +1,4 @@
-import { auth } from '@/auth';
-
-export default auth((req) => {
-  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);
-  } else if (req.auth != null && req.nextUrl.pathname === '/') {
-    const newUrl = new URL('/home', req.nextUrl.origin);
-    return Response.redirect(newUrl);
-  }
-});
+export { auth as middleware } from '@/auth';
 
 export const config = {
   matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],

yarn.lock

@@ -1863,12 +1863,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:19.1.3":
-  version: 19.1.3
-  resolution: "@types/react@npm:19.1.3"
+"@types/react@npm:19.1.4":
+  version: 19.1.4
+  resolution: "@types/react@npm:19.1.4"
   dependencies:
     csstype: "npm:^3.0.2"
-  checksum: 10c0/f158f88871b8df1eeed637942d3e6142abcf505b617e4921ef3763b6d4f22241b9a883d864878dd2b6a2bdc8f4e7f871f24ef88f633d144a63257f4764b9478d
+  checksum: 10c0/501350d4f9cef13c5dd1b1496fa70ebaff52f6fa359b623b51c9d817e5bc4333fa3c8b7a6a4cbc88c643385052d66a243c3ceccfd6926062f917a2dd0535f6b3
   languageName: node
   linkType: hard
 
@@ -4518,12 +4518,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:^0.509.0":
-  version: 0.509.0
-  resolution: "lucide-react@npm:0.509.0"
+"lucide-react@npm:^0.510.0":
+  version: 0.510.0
+  resolution: "lucide-react@npm:0.510.0"
   peerDependencies:
     react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/eb7434a99738d2a3b3a193c4e0cf51691a06223ec8eda514ea7fd96cdbd311069d25353cd9e720810e5c7ba3891186de6a0463c3ac5382cc1d981938847b9b95
+  checksum: 10c0/00b3efed64c370cd5ae97023583996ff83939baf6f4af11393d536ca9e520b0cc1a82a81aa6d0350625bff398daaa69357df74383631f2c3a0aeb6974f4237c7
   languageName: node
   linkType: hard
 
@@ -4590,14 +4590,14 @@ __metadata:
     "@radix-ui/react-tabs": "npm:^1.1.11"
     "@tailwindcss/postcss": "npm:4.1.6"
     "@types/node": "npm:22.15.17"
-    "@types/react": "npm:19.1.3"
+    "@types/react": "npm:19.1.4"
     "@types/react-dom": "npm:19.1.4"
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
     eslint: "npm:9.26.0"
     eslint-config-next: "npm:15.3.2"
     eslint-config-prettier: "npm:10.1.5"
-    lucide-react: "npm:^0.509.0"
+    lucide-react: "npm:^0.510.0"
     next: "npm:15.3.2"
     next-auth: "npm:^5.0.0-beta.25"
     next-themes: "npm:^0.4.6"