From b2774f994ee3aacbbea1e2505d3db90b71696013 Mon Sep 17 00:00:00 2001
From: ibdevlawal <ibdevlawal@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:22:22 +0100
Subject: [PATCH] feat: [FE-67] Tests for the authentication flow

---
 .../AuthFlow/AuthFlowComponent.spec.tsx         | 10 ++++++++++
 .../features/AuthFlow/AuthFlowComponent.tsx     | 17 +++++++++++++++++
 frontend/features/AuthFlow/AuthFlowStore.ts     |  7 +++++++
 frontend/features/AuthFlow/AuthFlowTypes.ts     |  9 +++++++++
 frontend/features/AuthFlow/useAuthFlow.ts       |  8 ++++++++
 5 files changed, 51 insertions(+)
 create mode 100644 frontend/features/AuthFlow/AuthFlowComponent.spec.tsx
 create mode 100644 frontend/features/AuthFlow/AuthFlowComponent.tsx
 create mode 100644 frontend/features/AuthFlow/AuthFlowStore.ts
 create mode 100644 frontend/features/AuthFlow/AuthFlowTypes.ts
 create mode 100644 frontend/features/AuthFlow/useAuthFlow.ts

diff --git a/frontend/features/AuthFlow/AuthFlowComponent.spec.tsx b/frontend/features/AuthFlow/AuthFlowComponent.spec.tsx
new file mode 100644
index 00000000..fe8f4b57
--- /dev/null
+++ b/frontend/features/AuthFlow/AuthFlowComponent.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AuthFlowComponent } from "./AuthFlowComponent";
+describe("AuthFlowComponent", () => {
+  it("renders correctly", () => {
+    render(<AuthFlowComponent />);
+    expect(screen.getByText("Please log in")).toBeDefined();
+  });
+});
diff --git a/frontend/features/AuthFlow/AuthFlowComponent.tsx b/frontend/features/AuthFlow/AuthFlowComponent.tsx
new file mode 100644
index 00000000..fbd84db5
--- /dev/null
+++ b/frontend/features/AuthFlow/AuthFlowComponent.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { useAuthFlow } from "./useAuthFlow";
+export const AuthFlowComponent: React.FC = () => {
+  const { user, isAuthenticated, logout } = useAuthFlow();
+  if (!isAuthenticated) return <div>Please log in</div>;
+  return (
+    <div className="p-4">
+      <h2>Welcome, {user?.email}</h2>
+      <button
+        onClick={logout}
+        className="mt-2 bg-red-500 text-white px-4 py-2 rounded"
+      >
+        Logout
+      </button>
+    </div>
+  );
+};
diff --git a/frontend/features/AuthFlow/AuthFlowStore.ts b/frontend/features/AuthFlow/AuthFlowStore.ts
new file mode 100644
index 00000000..d183df6e
--- /dev/null
+++ b/frontend/features/AuthFlow/AuthFlowStore.ts
@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { AuthState, AuthUser } from "./AuthFlowTypes";
+export interface AuthStore extends AuthState {
+  login: (user: AuthUser) => void;
+  logout: () => void;
+}
+export const AuthFlowContext = createContext<AuthStore | undefined>(undefined);
diff --git a/frontend/features/AuthFlow/AuthFlowTypes.ts b/frontend/features/AuthFlow/AuthFlowTypes.ts
new file mode 100644
index 00000000..3ef0ac3a
--- /dev/null
+++ b/frontend/features/AuthFlow/AuthFlowTypes.ts
@@ -0,0 +1,9 @@
+export interface AuthUser {
+  id: string;
+  email: string;
+  token: string;
+}
+export interface AuthState {
+  user: AuthUser | null;
+  isAuthenticated: boolean;
+}
diff --git a/frontend/features/AuthFlow/useAuthFlow.ts b/frontend/features/AuthFlow/useAuthFlow.ts
new file mode 100644
index 00000000..935063a8
--- /dev/null
+++ b/frontend/features/AuthFlow/useAuthFlow.ts
@@ -0,0 +1,8 @@
+import { useState } from "react";
+import { AuthUser } from "./AuthFlowTypes";
+export const useAuthFlow = () => {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const login = (u: AuthUser) => setUser(u);
+  const logout = () => setUser(null);
+  return { user, isAuthenticated: !!user, login, logout };
+};