UI auth

docker-compose-dev.yml

@@ -201,6 +201,7 @@ services:
       <<: *catalog-config
       DATABASE_URL: postgres://postgres:postgres@catalog:5432/postgres
       PEERDB_FLOW_SERVER_HTTP: http://flow_api:8113
+      PEERDB_PASSWORD: peerdb
 
 volumes:
   pgdata:

ui/app/api/login/route.ts

@@ -0,0 +1,13 @@
+import { cookies } from 'next/headers';
+
+export async function POST(request: Request) {
+  const { password } = await request.json();
+  if (process.env.PEERDB_PASSWORD !== password) {
+    return new Response(JSON.stringify({ error: 'wrong password' }));
+  }
+  cookies().set('auth', password, {
+    expires: Date.now() + 24 * 60 * 60 * 1000,
+    secure: process.env.PEERDB_SECURE_COOKIES === 'true',
+  });
+  return new Response('{}');
+}

ui/app/api/logout/route.ts

@@ -0,0 +1,6 @@
+import { cookies } from 'next/headers';
+
+export async function POST(req: Request) {
+  cookies().delete('auth');
+  return new Response('');
+}

ui/app/login/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import { Button } from '@/lib/Button';
+import { Layout, LayoutMain } from '@/lib/Layout';
+import { TextField } from '@/lib/TextField';
+
+export default function Login() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState(() =>
+    searchParams.has('reject') ? 'Authentication failed, please login' : ''
+  );
+  const login = () => {
+    fetch('/api/login', {
+      method: 'POST',
+      body: JSON.stringify({ password: pass }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.error) setError(res.error);
+        else router.push('/');
+      });
+  };
+  return (
+    <Layout>
+      <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
+        <Image src='/images/peerdb-combinedMark.svg' alt='PeerDB' width={512} />
+        {error && (
+          <div
+            style={{
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              color: '#600',
+              backgroundColor: '#c66',
+            }}
+          >
+            {error}
+          </div>
+        )}
+        <TextField
+          variant='simple'
+          placeholder='Password'
+          value={pass}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setPass(e.target.value)
+          }
+          onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter') {
+              login();
+            }
+          }}
+        />
+        <Button onClick={login}>Login</Button>
+      </LayoutMain>
+    </Layout>
+  );
+}

ui/app/page.tsx

@@ -1,10 +1,11 @@
 import SidebarComponent from '@/components/SidebarComponent';
 import { Header } from '@/lib/Header';
 import { Layout, LayoutMain } from '@/lib/Layout';
+import { cookies } from 'next/headers';
 
 export default function Home() {
   return (
-    <Layout sidebar={<SidebarComponent />}>
+    <Layout sidebar={<SidebarComponent logout={!!cookies().get('auth')} />}>
       <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
         <Header variant='largeTitle'>PeerDB Home Page</Header>
       </LayoutMain>

ui/components/Logout.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { Button } from '@/lib/Button';
+
+export default function Logout() {
+  return (
+    <Button
+      onClick={() =>
+        fetch('/api/logout', { method: 'POST' }).then((res) =>
+          location.assign('/login')
+        )
+      }
+    >
+      Logout
+    </Button>
+  );
+}

ui/components/SidebarComponent.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import useTZStore from '@/app/globalstate/time';
+import Logout from '@/components/Logout';
 import { BrandLogo } from '@/lib/BrandLogo';
-import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { RowWithSelect } from '@/lib/Layout';
 import { Sidebar, SidebarItem } from '@/lib/Sidebar';
 import Link from 'next/link';
 
-export default function SidebarComponent() {
+export default function SidebarComponent(props: { logout?: boolean }) {
   const timezones = ['UTC', 'Local', 'Relative'];
   const setZone = useTZStore((state) => state.setZone);
   const zone = useTZStore((state) => state.timezone);
@@ -60,7 +60,7 @@ export default function SidebarComponent() {
               />
             </div>
           </div>
-          <Button className='w-full'>Help and Support</Button>
+          {props.logout && <Logout />}
         </>
       }
       bottomLabel={<Label variant='footnote'>App. v0.7.0</Label>}

ui/middleware.ts

@@ -0,0 +1,23 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+export default function middleware(req: NextRequest) {
+  if (
+    req.nextUrl.pathname !== '/login' &&
+    req.nextUrl.pathname !== '/api/login' &&
+    req.nextUrl.pathname !== '/api/logout' &&
+    process.env.PEERDB_PASSWORD &&
+    req.cookies.get('auth')?.value !== process.env.PEERDB_PASSWORD
+  ) {
+    req.cookies.delete('auth');
+    return NextResponse.redirect(new URL('/login?reject', req.url));
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    // Match everything other than static assets
+    '/((?!_next/static/|images/|favicon.ico$).*)',
+  ],
+};