Implement redux.

pages/_app.js

@@ -1,7 +1,15 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import { useStore } from 'redux/store';
 import 'styles/bootstrap-grid.css';
 import 'styles/index.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  const store = useStore();
+
+  return (
+    <Provider store={store}>
+      <Component {...pageProps} />
+    </Provider>
+  );
 }

pages/api/auth/login.js

@@ -1,6 +1,7 @@
 import { serialize } from 'cookie';
 import { checkPassword, createSecureToken } from 'lib/crypto';
 import { getAccount } from 'lib/db';
+import { AUTH_COOKIE_NAME } from 'lib/constants';
 
 export default async (req, res) => {
   const { username, password } = req.body;
@@ -10,7 +11,7 @@ export default async (req, res) => {
   if (account && (await checkPassword(password, account.password))) {
     const { user_id, username, is_admin } = account;
     const token = await createSecureToken({ user_id, username, is_admin });
-    const cookie = serialize('umami.auth', token, {
+    const cookie = serialize(AUTH_COOKIE_NAME, token, {
       path: '/',
       httpOnly: true,
       maxAge: 60 * 60 * 24 * 365,

pages/api/auth/logout.js

@@ -0,0 +1,16 @@
+import { serialize } from 'cookie';
+import { AUTH_COOKIE_NAME } from 'lib/constants';
+
+export default async (req, res) => {
+  const cookie = serialize(AUTH_COOKIE_NAME, '', {
+    path: '/',
+    httpOnly: true,
+    maxAge: 0,
+  });
+
+  res.statusCode = 303;
+  res.setHeader('Set-Cookie', [cookie]);
+  res.setHeader('Location', '/login');
+
+  return res.end();
+};

pages/api/auth/verify.js

@@ -0,0 +1,11 @@
+import { useAuth } from 'lib/middleware';
+
+export default async (req, res) => {
+  await useAuth(req, res);
+
+  if (req.auth) {
+    return res.status(200).json(req.auth);
+  }
+
+  return res.status(401).end();
+};

pages/index.js

@@ -1,33 +1,18 @@
 import React from 'react';
-import { parse } from 'cookie';
 import Layout from 'components/Layout';
-import { verifySecureToken } from 'lib/crypto';
-import WebsiteList from '../components/WebsiteList';
+import WebsiteList from 'components/WebsiteList';
+import useUser from 'hooks/useUser';
+
+export default function HomePage() {
+  const { loading } = useUser();
+
+  if (loading) {
+    return null;
+  }
 
-export default function HomePage({ username }) {
   return (
     <Layout>
       <WebsiteList />
     </Layout>
   );
 }
-
-export async function getServerSideProps({ req, res }) {
-  const token = parse(req.headers.cookie || '')['umami.auth'];
-
-  try {
-    const payload = await verifySecureToken(token);
-
-    return {
-      props: {
-        ...payload,
-      },
-    };
-  } catch {
-    res.statusCode = 303;
-    res.setHeader('Location', '/login');
-    res.end();
-  }
-
-  return { props: {} };
-}

pages/logout.js

@@ -1,27 +1,9 @@
-import React from 'react';
-import { serialize } from 'cookie';
-import Layout from 'components/Layout';
+import { useEffect } from 'react';
 
 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: {} };
+  useEffect(() => {
+    fetch('/api/auth/logout').then(() => (window.location.href = '/login'));
+  }, []);
+
+  return null;
 }

pages/settings.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Layout from 'components/Layout';
+import Settings from 'components/Settings';
+import useUser from 'hooks/useUser';
+
+export default function SettingsPage() {
+  const { loading } = useUser();
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Layout>
+      <Settings />
+    </Layout>
+  );
+}

pages/website/[...id].js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/Layout';
-import WebsiteDetails from '../../components/WebsiteDetails';
+import WebsiteDetails from 'components/WebsiteDetails';
+import useUser from 'hooks/useUser';
 
 export default function DetailsPage() {
+  const { loading } = useUser();
   const router = useRouter();
   const { id } = router.query;
 
-  if (!id) {
+  if (!id || loading) {
     return null;
   }