Login/logout process.

components/Login.js

@@ -23,7 +23,7 @@ export default function Login() {
     const response = await post('/api/auth', { username, password });
 
     if (response?.token) {
-      await Router.push('/admin');
+      await Router.push('/');
     } else {
       setMessage('Incorrect username/password.');
     }

lib/db.js

@@ -112,3 +112,13 @@ export async function getAccount(username = '') {
     }),
   );
 }
+
+export async function getPageviews(website_id) {
+  return runQuery(
+    prisma.pageview.findMany({
+      where: {
+        website_id,
+      },
+    }),
+  );
+}

lib/middleware.js

@@ -12,9 +12,4 @@ export function use(middleware) {
     });
 }
 
-export const allowPost = use(
+export const useCors = use(cors());
-  cors({
-    origin: '*',
-    methods: ['POST', 'OPTIONS'],
-  }),
-);

pages/admin.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import cookies from 'next-cookies';
-import Layout from 'components/Layout';
-import { verifySecureToken } from 'lib/crypto';
-
-export default function Admin({ username }) {
-  return (
-    <Layout title="Admin">
-      <h2>
-        You've successfully logged in as <b>{username}</b>.
-      </h2>
-    </Layout>
-  );
-}
-
-export async function getServerSideProps(context) {
-  const token = cookies(context)['umami.auth'];
-
-  try {
-    const payload = await verifySecureToken(token);
-
-    return {
-      props: {
-        username: payload.username,
-      },
-    };
-  } catch {
-    const { res } = context;
-
-    res.statusCode = 303;
-    res.setHeader('Location', '/');
-    res.end();
-  }
-
-  return { props: {} };
-}

pages/api/auth.js

@@ -1,11 +1,8 @@
 import { serialize } from 'cookie';
 import { checkPassword, createSecureToken } from 'lib/crypto';
 import { getAccount } from 'lib/db';
-import { allowPost } from 'lib/middleware';
 
 export default async (req, res) => {
-  await allowPost(req, res);
-
   const { username, password } = req.body;
 
   const account = await getAccount(username);
@@ -21,7 +18,7 @@ export default async (req, res) => {
 
     res.setHeader('Set-Cookie', [cookie]);
 
-    res.status(200).send({ token });
+    res.status(200).json({ token });
   } else {
     res.status(401).end();
   }

pages/api/collect.js

@@ -1,10 +1,10 @@
 import { savePageView, saveEvent } from 'lib/db';
-import { allowPost } from 'lib/middleware';
+import { useCors } from 'lib/middleware';
 import checkSession from 'lib/session';
 import { createToken } from 'lib/crypto';
 
 export default async (req, res) => {
-  await allowPost(req, res);
+  await useCors(req, res);
 
   const session = await checkSession(req);
 

pages/api/verify.js

@@ -5,7 +5,7 @@ export default async (req, res) => {
 
   try {
     const payload = await verifySecureToken(token);
-    res.status(200).send(payload);
+    res.status(200).json(payload);
   } catch {
     res.status(400).end();
   }

pages/index.js

@@ -1,17 +1,40 @@
 import React from 'react';
 import Link from 'next/link';
+import cookies from 'next-cookies';
 import Layout from 'components/Layout';
-import Login from 'components/Login';
+import { verifySecureToken } from 'lib/crypto';
 
-export default function Home() {
+export default function HomePage({ username }) {
   return (
     <Layout>
-      <Login />
+      <h2>
-      <p>
+        You've successfully logged in as <b>{username}</b>.
-        <Link href="/test">
+      </h2>
-          <a>Test page 🡒</a>
+      <Link href="/logout">
-        </Link>
+        <a>Logout 🡒</a>
-      </p>
+      </Link>
     </Layout>
   );
 }
+
+export async function getServerSideProps(context) {
+  const token = cookies(context)['umami.auth'];
+
+  try {
+    const payload = await verifySecureToken(token);
+
+    return {
+      props: {
+        username: payload.username,
+      },
+    };
+  } catch {
+    const { res } = context;
+
+    res.statusCode = 303;
+    res.setHeader('Location', '/login');
+    res.end();
+  }
+
+  return { props: {} };
+}

pages/login.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Link from 'next/link';
+import Layout from 'components/Layout';
+import Login from 'components/Login';
+
+export default function LoginPage() {
+  return (
+    <Layout title="Login">
+      <Login />
+      <p>
+        <Link href="/test">
+          <a>Test page 🡒</a>
+        </Link>
+      </p>
+    </Layout>
+  );
+}

pages/logout.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { serialize } from 'cookie';
+import Layout from 'components/Layout';
+
+export default function LogoutPage() {
+  return (
+    <Layout title="Logout">
+      <h2>You've successfully logged out..</h2>
+    </Layout>
+  );
+}
+
+export async function getServerSideProps({ res }) {
+  const cookie = serialize('umami.auth', '', {
+    path: '/',
+    httpOnly: true,
+    maxAge: 0,
+  });
+
+  res.statusCode = 303;
+  res.setHeader('Set-Cookie', [cookie]);
+  res.setHeader('Location', '/login');
+
+  res.end();
+
+  return { props: {} };
+}