Secure JWT storage with HttpOnly cookies (fixes #85)

README.md

@@ -119,6 +119,8 @@ If you prefer running Node processes on the host machine:
    npm run start
    ```
 
+Authentication now relies on **HttpOnly cookies** instead of `localStorage` tokens. Make sure the Admin UI is served from an origin listed in the `CORS_ORIGIN` env variable (defaults to `http://localhost:3001` in dev). When `NODE_ENV=development`, cookies are sent over plain HTTP for local testing; in production they require HTTPS.
+
 By default the Admin UI expects the server at `http://localhost:3000`.  
 Change `REACT_APP_SERVER_URL` in `apps/hotel-management-service-admin/.env` if needed.
 

apps/hotel-management-service-admin/index.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="A hotel management backend for managing hotels, rooms, customers, and reservations." />
+    <!-- Content Security Policy to mitigate XSS -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; object-src 'none'; script-src 'self'; base-uri 'self';" />
 
     <title>Hotel Management Service</title>
   </head>

apps/hotel-management-service-admin/src/__tests__/localStorage.test.ts

@@ -0,0 +1,18 @@
+import { render } from "@testing-library/react";
+import LoginPage from "../pages/LoginPage";
+
+// Spy on localStorage methods
+const setItemSpy = jest.spyOn(window.localStorage.__proto__, "setItem");
+const getItemSpy = jest.spyOn(window.localStorage.__proto__, "getItem");
+
+// Ensure spies don't affect actual implementation
+setItemSpy.mockImplementation(() => undefined);
+getItemSpy.mockImplementation(() => null);
+
+describe("No localStorage usage", () => {
+  it("renders login page without touching localStorage", () => {
+    render(<LoginPage />);
+    expect(setItemSpy).not.toHaveBeenCalled();
+    expect(getItemSpy).not.toHaveBeenCalled();
+  });
+});

apps/hotel-management-service-admin/src/auth-provider/ra-auth-http.ts

@@ -1,9 +1,6 @@
 import { gql } from "@apollo/client/core";
 import { AuthProvider } from "react-admin";
-import {
-  CREDENTIALS_LOCAL_STORAGE_ITEM,
-  USER_DATA_LOCAL_STORAGE_ITEM,
-} from "../constants";
+// Using Basic auth over cookies is deprecated; we keep provider but without localStorage persistence.
 import { Credentials, LoginMutateResult } from "../types";
 import { apolloClient } from "../data-provider/graphqlDataProvider";
 
@@ -26,48 +23,21 @@ export const httpAuthProvider: AuthProvider = {
     });
 
     if (userData && userData.data?.login.username) {
-      localStorage.setItem(
-        CREDENTIALS_LOCAL_STORAGE_ITEM,
-        createBasicAuthorizationHeader(
-          credentials.username,
-          credentials.password
-        )
-      );
-      localStorage.setItem(
-        USER_DATA_LOCAL_STORAGE_ITEM,
-        JSON.stringify(userData.data)
-      );
+      // Basic auth header will be carried only within this runtime, not persisted.
       return Promise.resolve();
     }
     return Promise.reject();
   },
-  logout: () => {
-    localStorage.removeItem(CREDENTIALS_LOCAL_STORAGE_ITEM);
-    return Promise.resolve();
-  },
+  logout: () => Promise.resolve(),
   checkError: ({ status }: any) => {
     if (status === 401 || status === 403) {
-      localStorage.removeItem(CREDENTIALS_LOCAL_STORAGE_ITEM);
       return Promise.reject();
     }
     return Promise.resolve();
   },
-  checkAuth: () => {
-    return localStorage.getItem(CREDENTIALS_LOCAL_STORAGE_ITEM)
-      ? Promise.resolve()
-      : Promise.reject();
-  },
+  checkAuth: () => Promise.resolve(),
   getPermissions: () => Promise.reject("Unknown method"),
-  getIdentity: () => {
-    const str = localStorage.getItem(USER_DATA_LOCAL_STORAGE_ITEM);
-    const userData: LoginMutateResult = JSON.parse(str || "");
-
-    return Promise.resolve({
-      id: userData.login.username,
-      fullName: userData.login.username,
-      avatar: undefined,
-    });
-  },
+  getIdentity: () => Promise.resolve({ id: undefined, fullName: undefined, avatar: undefined }),
 };
 
 function createBasicAuthorizationHeader(

apps/hotel-management-service-admin/src/auth-provider/ra-auth-jwt.ts

@@ -1,9 +1,6 @@
 import { gql } from "@apollo/client/core";
 import { AuthProvider } from "react-admin";
-import {
-  CREDENTIALS_LOCAL_STORAGE_ITEM,
-  USER_DATA_LOCAL_STORAGE_ITEM,
-} from "../constants";
+// Note: We no longer persist credentials in localStorage.
 import { Credentials, LoginMutateResult } from "../types";
 import { apolloClient } from "../data-provider/graphqlDataProvider";
 
@@ -26,47 +23,52 @@ export const jwtAuthProvider: AuthProvider = {
     });
 
     if (userData && userData.data?.login.username) {
-      localStorage.setItem(
-        CREDENTIALS_LOCAL_STORAGE_ITEM,
-        createBearerAuthorizationHeader(userData.data.login?.accessToken)
-      );
-      localStorage.setItem(
-        USER_DATA_LOCAL_STORAGE_ITEM,
-        JSON.stringify(userData.data)
-      );
+      // Cookie is automatically set by the server; nothing to persist client-side
       return Promise.resolve();
     }
     return Promise.reject();
   },
-  logout: () => {
-    localStorage.removeItem(CREDENTIALS_LOCAL_STORAGE_ITEM);
-    return Promise.resolve();
+  logout: async () => {
+    // Invoke backend mutation to clear HttpOnly cookie
+    const LOGOUT = gql`
+      mutation logout {
+        logout
+      }
+    `;
+    try {
+      await apolloClient.mutate({ mutation: LOGOUT });
+      // Apollo will include cookies automatically (credentials: include)
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
   },
   checkError: ({ status }: any) => {
     if (status === 401 || status === 403) {
-      localStorage.removeItem(CREDENTIALS_LOCAL_STORAGE_ITEM);
       return Promise.reject();
     }
     return Promise.resolve();
   },
-  checkAuth: () => {
-    return localStorage.getItem(CREDENTIALS_LOCAL_STORAGE_ITEM)
-      ? Promise.resolve()
-      : Promise.reject();
+  checkAuth: async () => {
+    // Query backend `me` (lightweight) to confirm cookie validity
+    const ME = gql`
+      query me {
+        me {
+          id
+        }
+      }
+    `;
+    try {
+      await apolloClient.query({ query: ME, fetchPolicy: "network-only" });
+      return Promise.resolve();
+    } catch (error) {
+      // If request fails due to 401/403 or network error, treat as unauthenticated
+      return Promise.reject(error);
+    }
   },
   getPermissions: () => Promise.reject("Unknown method"),
   getIdentity: () => {
-    const str = localStorage.getItem(USER_DATA_LOCAL_STORAGE_ITEM);
-    const userData: LoginMutateResult = JSON.parse(str || "");
-
-    return Promise.resolve({
-      id: userData.login.username,
-      fullName: userData.login.username,
-      avatar: undefined,
-    });
+    // TODO: Optionally fetch current user via a `me` query. For now, return empty.
+    return Promise.resolve({ id: undefined, fullName: undefined, avatar: undefined });
   },
 };
-
-export function createBearerAuthorizationHeader(accessToken: string) {
-  return `Bearer ${accessToken}`;
-}

apps/hotel-management-service-admin/src/data-provider/graphqlDataProvider.ts

@@ -1,26 +1,28 @@
 import buildGraphQLProvider from "ra-data-graphql-amplication";
 import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
-import { setContext } from "@apollo/client/link/context";
-import { CREDENTIALS_LOCAL_STORAGE_ITEM } from "../constants";
+// We no longer need to manually inject an Authorization header; rely on cookies.
 
 const httpLink = createHttpLink({
   uri: `${import.meta.env.VITE_REACT_APP_SERVER_URL}/graphql`,
+  credentials: "include", // send cookies with each request
 });
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const authLink = setContext((_, { headers }) => {
-  const token = localStorage.getItem(CREDENTIALS_LOCAL_STORAGE_ITEM);
-  return {
-    headers: {
-      ...headers,
-      authorization: token ? token : "",
-    },
-  };
-});
 
 export const apolloClient = new ApolloClient({
   cache: new InMemoryCache(),
-  link: authLink.concat(httpLink),
+  link: httpLink,
+  // Always include credentials (cookies) in requests
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: "cache-and-network",
+    },
+    query: {
+      fetchPolicy: "network-only",
+    },
+    mutate: {
+      fetchPolicy: "no-cache",
+    },
+  },
 });
 
 export default buildGraphQLProvider({

apps/hotel-management-service-server/README.md

@@ -24,7 +24,9 @@ Configuration for the server component can be provided through the use of enviro
 | DB_USER              | the username used to connect to the database | [username]                                                          |
 | DB_PASSWORD          | the password used to connect to the database | [password]                                                          |
 | DB_NAME              | the name of the database                     | [service-name] / [project-name]                                     |
-| JWT_SECRET_KEY       | the secret used to sign the json-web token   | [secret]                                                            |
+| JWT_SECRET       | the secret used to sign the JSON Web Token   | [secret]                                                            |
+| CORS_ORIGIN      | comma-separated list of allowed origins for CORS (e.g., http://localhost:3001) | http://localhost:3001 |
+| NODE_ENV         | set to `development` to allow non-secure cookies over HTTP | development |
 | JWT_EXPIRATION       | the expiration time for the json-web token   | 2d                                                                  |
 
 > **Note**

apps/hotel-management-service-server/package.json

@@ -45,7 +45,10 @@
     "reflect-metadata": "0.1.13",
     "ts-node": "10.9.2",
     "type-fest": "2.19.0",
-    "validator": "13.11.0"
+    "validator": "13.11.0",
+    "cookie-parser": "^1.4.6",
+    "@nestjs/helmet": "^11.0.1",
+    "helmet": "^7.0.0"
   },
   "devDependencies": {
     "@nestjs/cli": "^10.1.18",

apps/hotel-management-service-server/src/app.module.ts

@@ -4,6 +4,7 @@ import { RoomModule } from "./room/room.module";
 import { ReservationModule } from "./reservation/reservation.module";
 import { CustomerModule } from "./customer/customer.module";
 import { HealthModule } from "./health/health.module";
+import { AuthModule } from "./auth/auth.module";
 import { PrismaModule } from "./prisma/prisma.module";
 import { SecretsManagerModule } from "./providers/secrets/secretsManager.module";
 import { ServeStaticModule } from "@nestjs/serve-static";
@@ -15,6 +16,7 @@ import { ApolloDriver, ApolloDriverConfig } from "@nestjs/apollo";
 @Module({
   controllers: [],
   imports: [
+    AuthModule,
     HotelModule,
     RoomModule,
     ReservationModule,

apps/hotel-management-service-server/src/auth/auth.module.ts

@@ -0,0 +1,27 @@
+import { Module } from "@nestjs/common";
+import { JwtModule } from "@nestjs/jwt";
+import { ConfigModule, ConfigService } from "@nestjs/config";
+import { AuthService } from "./auth.service";
+import { AuthResolver } from "./auth.resolver";
+
+@Module({
+  imports: [
+    ConfigModule,
+    JwtModule.registerAsync({
+      imports: [ConfigModule],
+      useFactory: (config: ConfigService) => ({
+        secret: config.get<string>("JWT_SECRET", "change-me"),
+        signOptions: {
+          expiresIn: config.get<string | number>(
+            "JWT_EXPIRES_IN",
+            "24h"
+          ),
+        },
+      }),
+      inject: [ConfigService],
+    }),
+  ],
+  providers: [AuthService, AuthResolver],
+  exports: [AuthService],
+})
+export class AuthModule {}

apps/hotel-management-service-server/src/auth/auth.resolver.ts

@@ -0,0 +1,37 @@
+import { Resolver, Mutation, Args } from "@nestjs/graphql";
+import { CredentialsInput } from "./credentials.input";
+import { LoginResponse } from "./login-response.object";
+import { AuthService } from "./auth.service";
+import { Response } from "express";
+import { Res } from "@nestjs/common";
+
+@Resolver()
+export class AuthResolver {
+  constructor(private readonly authService: AuthService) {}
+
+  @Mutation(() => LoginResponse)
+  async login(
+    @Args("credentials") credentials: CredentialsInput,
+    @Res({ passthrough: true }) res: Response
+  ): Promise<LoginResponse> {
+    const { username, password } = credentials;
+    const accessToken = await this.authService.validateUser(username, password).then(() => this.authService.login(username));
+
+    // Set HttpOnly cookie for access token
+    res.cookie("accessToken", accessToken, {
+      httpOnly: true,
+      sameSite: "strict",
+      secure: process.env.NODE_ENV !== "development",
+      path: "/",
+      maxAge: Number(process.env.JWT_COOKIE_MAX_AGE ?? 1000 * 60 * 60 * 24), // default 1 day
+    });
+
+    return { accessToken };
+  }
+
+  @Mutation(() => Boolean)
+  async logout(@Res({ passthrough: true }) res: Response): Promise<boolean> {
+    res.clearCookie("accessToken", { path: "/" });
+    return true;
+  }
+}