Auth0 Authentication

CHANGELOG.md

@@ -5,7 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.11.5] - Current
+## [2.12.0] - Current
+
+### Added
+
+-   Login via Auth0 (currently useless, but this enables future features)
+-   App title in header
+
+### Fixed
+
+-   Fixed display of Custom Sort instructions on mobile devices
+
+## [2.11.5] - 2025-04-03
 
 ### Added
 

README.md

@@ -50,3 +50,7 @@ Data and images from Elden Ring which are used in this project are the property
 Based on [erdtree](https://github.com/vodofrede/erdtree) by [@vodofrede](https://github.com/vodofrede)
 
 Weapon attack rating calculations feature some cannibalization of [Elden Ring Weapon Calculator](https://github.com/ThomasJClark/elden-ring-weapon-calculator) by [Thomas J Clark](https://github.com/ThomasJClark).
+
+Authentication provided by [Auth0](https://auth0.com).
+
+Mantinia Regular font provided by [fontsgeek.com](https://fontsgeek.com).

__tests__/src/app/util/components/NavLinks.test.tsx

@@ -1,14 +1,31 @@
 import "core-js/actual/structured-clone";
 
 import { NavLinks } from "@/app/util/components/NavLinks";
+import { useUser } from "@auth0/nextjs-auth0/client";
 import { render, screen } from "@testing-library/react";
 import { usePathname } from "next/navigation";
 
+// mock the next/navigation usePathname hook
 jest.mock("next/navigation", () => ({
     usePathname: jest.fn(),
 }));
+// mock the auth0 useUser hook
+jest.mock("@auth0/nextjs-auth0/client", () => ({
+    useUser: jest.fn(),
+}));
 
 describe("NavLinks", () => {
+    beforeEach(() => {
+        // mock the next/navigation usePathname hook
+        (usePathname as jest.Mock).mockReturnValue("/");
+        // mock the auth0 useUser hook
+        (useUser as jest.Mock).mockReturnValue({
+            user: null,
+            isLoading: false,
+            error: null,
+        });
+    });
+
     test("Renders", () => {
         render(<NavLinks />);
 
@@ -58,4 +75,20 @@ describe("NavLinks", () => {
 
         expect(screen.getByText("About")).toHaveClass("current");
     });
+
+    test("logged in", () => {
+        // mock the auth0 useUser hook
+        (useUser as jest.Mock).mockReturnValue({
+            user: {
+                name: "test",
+                picture: "/favicon.ico",
+                email: "test@email.com",
+            },
+            error: null,
+            isLoading: false,
+        });
+        render(<NavLinks />);
+
+        expect(screen.getByText("Logout")).toBeInTheDocument();
+    });
 });

package.json

@@ -1,6 +1,6 @@
 {
     "name": "haligtree",
-    "version": "2.11.4",
+    "version": "2.12.0",
     "private": true,
     "scripts": {
         "dev": "next dev",
@@ -13,6 +13,7 @@
         "lighthouse": "next build && next start -p 3000 & npx wait-on http://localhost:3000 && npx lhci autorun"
     },
     "dependencies": {
+        "@auth0/nextjs-auth0": "^3.7.0",
         "@tailwindcss/postcss": "^4.1.0",
         "@vercel/analytics": "^1",
         "@vercel/speed-insights": "^1",