Implement authentication blocked pages using middleware

Author: chiaryan

apps/frontend/src/app/services/login-store.ts

@@ -1,15 +1,26 @@
+"use client";
+
 const KEY: string = "TOKEN";
 
 export function setToken(token: string): void {
-    window.localStorage[KEY] = token
+    document.cookie = `${KEY}=${token}`
 }
 
 export function getToken(): string {
-    return KEY in window.localStorage ? window.localStorage[KEY] : ""
+    const keyValue = document.cookie.split("; ").find(kv => kv.startsWith(`${KEY}=`))
+    if (keyValue == undefined) {
+        return "";
+    }
+
+    const [_, value] = keyValue.split("=");
+
+    if (value == undefined) {
+        return "";
+    }
+
+    return value;
 }
 
 export function deleteToken() {
-    if (KEY in window.localStorage) {
-        window.localStorage.removeItem(KEY);
-    }
+    document.cookie = `${KEY}=`;
 }

apps/frontend/src/app/services/user.ts

@@ -1,3 +1,7 @@
+"use client";
+
+import { getToken } from "./login-store";
+
 const USER_SERVICE_URL = process.env.NEXT_PUBLIC_USER_SERVICE_URL;
 
 export interface User {
@@ -91,7 +95,7 @@ export const UpdateUser = async (
   user: UpdateUserRequestType,
   id: string
 ): Promise<UpdateUserResponseType> => {
-  const JWT_TOKEN = localStorage.getItem("TOKEN") ?? undefined;
+  const JWT_TOKEN = getToken();
   const response = await fetch(
     `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}users/${id}`,
     {
@@ -116,7 +120,7 @@ export const UpdateUser = async (
 };
 
 export const ValidateUser = async (): Promise<VerifyTokenResponseType> => {
-  const JWT_TOKEN = localStorage.getItem("TOKEN") ?? undefined;
+  const JWT_TOKEN = getToken();
   const response = await fetch(
     `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}auth/verify-token`,
     {

apps/frontend/src/components/Header/header.tsx

@@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
 import "./styles.scss";
 import DropdownButton from "antd/es/dropdown/dropdown-button";
 import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
+import { deleteToken } from "@/app/services/login-store";
 
 interface HeaderProps {
   selectedKey: string[] | undefined;
@@ -55,7 +56,7 @@ const Header = (props: HeaderProps): JSX.Element => {
       ),
       onClick: () => {
         // Clear away the previously stored jwt token in localstorage
-        localStorage.clear();
+        deleteToken();
         // Redirect user to login page
         push("/login");
       },

apps/frontend/src/middleware.ts

@@ -0,0 +1,44 @@
+import { log } from 'console';
+import { NextURL } from 'next/dist/server/web/next-url';
+import { redirect } from 'next/navigation'
+import { type NextRequest, NextResponse } from 'next/server';
+import { ValidateUser } from './app/services/user';
+import { cookies } from 'next/headers';
+
+const PUBLIC_ROUTES = ["/login", "/register"];
+
+async function isValidToken(TOKEN: string): Promise<boolean> {
+  const { status } = await fetch(
+    `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}auth/verify-token`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${TOKEN}`,
+      },
+    }
+  );
+  return status === 200;
+}
+
+export default async function middleware(request: NextRequest) {
+  const REDIRECT_TO_LOGIN = NextResponse.redirect(new NextURL("/login", request.url));
+  const TOKEN = request.cookies.get("TOKEN");
+  if (TOKEN == undefined) {
+    return REDIRECT_TO_LOGIN;
+  }
+  
+  if (!await isValidToken(TOKEN.value)) {
+    REDIRECT_TO_LOGIN.cookies.delete("TOKEN");
+    return REDIRECT_TO_LOGIN;
+  }
+
+  return NextResponse.next();
+  
+}
+
+export const config = {
+  // matcher: /\/^(?!api\/.*|_next\/static\/.*|_next\/image\/.*|favicon.ico|sitemap.xml|robots.txt)$/,
+  matcher: "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|login|register).*)",
+}
+