Merge pull request 'feature/login-and-register-forms' (#2) from feature/login-and-register-forms into main

Reviewed-on: #2

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
@@ -5,9 +8,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([
+export default defineConfig([globalIgnores(['dist']), {
-  globalIgnores(['dist']),
-  {
   files: ['**/*.{ts,tsx}'],
   extends: [
     js.configs.recommended,
@@ -19,5 +20,4 @@ export default defineConfig([
     ecmaVersion: 2020,
     globals: globals.browser,
   },
-  },
+}, ...storybook.configs["flat/recommended"]])
-])

package.json

@@ -7,26 +7,55 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "ky": "^1.14.3",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.2",
     "@eslint/js": "^9.39.1",
     "@module-federation/vite": "^1.12.3",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.3.3",
     "globals": "^16.5.0",
+    "jsdom": "^29.0.0",
+    "msw": "^2.12.11",
+    "playwright": "^1.58.2",
+    "storybook": "^10.3.3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.1.0"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }

public/mockServiceWorker.js

@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.12.11'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

src/entities/User/index.ts

@@ -0,0 +1 @@
+export * from "./model";

src/entities/User/model/index.ts

@@ -0,0 +1 @@
+export * from "./types/types";

src/entities/User/model/types/types.ts

@@ -0,0 +1,10 @@
+export interface User {
+  /**
+   * User's unique identifier.
+   */
+  id: string;
+  /**
+   * User's email address.
+   */
+  email: string;
+}

src/features/auth/api/calls/index.ts

@@ -0,0 +1,4 @@
+export * from "./login";
+export * from "./register";
+export * from "./logout";
+export * from "./mocks";

src/features/auth/api/calls/login/index.ts

@@ -0,0 +1,2 @@
+export { login } from "./login";
+export { loginMock } from "./login.mock";

src/features/auth/api/calls/login/login.mock.ts

@@ -0,0 +1,20 @@
+import { http, HttpResponse } from "msw";
+import type { AuthData } from "../../../model/types/service";
+import { BASE_URL } from "shared/api";
+import { LOGIN_API_ROUTE } from "./login";
+import { MOCK_AUTH_RESPONSE, MOCK_EMAIL, MOCK_PASSWORD } from "../mocks";
+
+const LOGIN_URL = `${BASE_URL}/${LOGIN_API_ROUTE}`;
+
+/**
+ * Msw interceptor. Mocks the login endpoint response.
+ */
+export const loginMock = http.post(LOGIN_URL, async ({ request }) => {
+  const { email, password } = (await request.json()) as AuthData;
+
+  if (email === MOCK_EMAIL && password === MOCK_PASSWORD) {
+    return HttpResponse.json(MOCK_AUTH_RESPONSE);
+  }
+
+  return HttpResponse.json({ message: "Invalid credentials" }, { status: 401 });
+});

src/features/auth/api/calls/login/login.spec.ts

@@ -0,0 +1,33 @@
+import { setupServer } from "msw/node";
+import { login } from "./login";
+import { loginMock } from "./login.mock";
+import { MOCK_EMAIL, MOCK_EXISTING_USER, MOCK_PASSWORD } from "../mocks";
+import { MOCK_TOKEN } from "shared/api";
+
+const server = setupServer(loginMock);
+
+describe("login", () => {
+  beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  describe("happy path", () => {
+    it("returns access token and user on valid credentials", async () => {
+      const result = await login({
+        email: MOCK_EMAIL,
+        password: MOCK_PASSWORD,
+      });
+
+      expect(result.accessToken).toBe(MOCK_TOKEN);
+      expect(result.user).toEqual(MOCK_EXISTING_USER);
+    });
+  });
+
+  describe("error cases", () => {
+    it("throws on invalid credentials", async () => {
+      await expect(
+        login({ email: "wrong@test.com", password: "wrong" }),
+      ).rejects.toThrow();
+    });
+  });
+});

src/features/auth/api/calls/login/login.ts

@@ -0,0 +1,16 @@
+import type { AuthData, AuthResponse } from "../../../model/types/service";
+import { authHttpClient } from "../../config/authApi/authApi";
+
+export const LOGIN_API_ROUTE = "auth/login";
+
+/**
+ * Logs in a user with the given email and password.
+ *
+ * @param loginData - The user's login data (email and password).
+ * @returns A promise that resolves to the authentication response.
+ */
+export function login(loginData: AuthData) {
+  return authHttpClient
+    .post(LOGIN_API_ROUTE, { json: loginData })
+    .json<AuthResponse>();
+}

src/features/auth/api/calls/logout/index.ts

@@ -0,0 +1,2 @@
+export { logout } from "./logout";
+export { logoutMock } from "./logout.mock";

src/features/auth/api/calls/logout/logout.mock.ts

@@ -0,0 +1,12 @@
+import { http, HttpResponse } from "msw";
+import { BASE_URL } from "shared/api";
+import { LOGOUT_API_ROUTE } from "./logout";
+
+const LOGOUT_URL = `${BASE_URL}/${LOGOUT_API_ROUTE}`;
+
+/**
+ * Msw interceptor. Mocks the logout endpoint response.
+ */
+export const logoutMock = http.post(LOGOUT_URL, () => {
+  return new HttpResponse(null, { status: 204 });
+});

src/features/auth/api/calls/logout/logout.spec.ts

@@ -0,0 +1,19 @@
+import { setupServer } from "msw/node";
+import { logout } from "./logout";
+import { logoutMock } from "./logout.mock";
+
+const server = setupServer(logoutMock);
+
+describe("logout", () => {
+  beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  describe("happy path", () => {
+    it("resolves without a value", async () => {
+      const result = await logout();
+
+      expect(result).toBeUndefined();
+    });
+  });
+});

src/features/auth/api/calls/logout/logout.ts

@@ -0,0 +1,13 @@
+import { authHttpClient } from "../../config";
+
+export const LOGOUT_API_ROUTE = "auth/logout";
+
+/**
+ * Logs out the currently authenticated user.
+ * async/await is used here intentionally to discard the ky Response and return void.
+ *
+ * @returns A promise that resolves when the session is terminated.
+ */
+export async function logout(): Promise<void> {
+  await authHttpClient.post(LOGOUT_API_ROUTE);
+}

src/features/auth/api/calls/mocks.ts

@@ -0,0 +1,22 @@
+import type { User } from "entities/User";
+import type { AuthResponse } from "../../model";
+import { MOCK_TOKEN } from "shared/api";
+
+export const MOCK_EMAIL = "test@test.com";
+export const MOCK_NEW_EMAIL = "new@test.com";
+export const MOCK_PASSWORD = "password";
+
+export const MOCK_EXISTING_USER: User = {
+  id: "1",
+  email: MOCK_EMAIL,
+};
+
+export const MOCK_NEW_USER: User = {
+  id: "2",
+  email: MOCK_NEW_EMAIL,
+};
+
+export const MOCK_AUTH_RESPONSE: AuthResponse = {
+  accessToken: MOCK_TOKEN,
+  user: MOCK_EXISTING_USER,
+};

src/features/auth/api/calls/register/index.ts

@@ -0,0 +1,2 @@
+export { register } from "./register";
+export { registerMock } from "./register.mock";

src/features/auth/api/calls/register/register.mock.ts

@@ -0,0 +1,26 @@
+import { http, HttpResponse } from "msw";
+import type { AuthData } from "../../../model/types/service";
+import { BASE_URL, MOCK_TOKEN } from "shared/api";
+import { REGISTER_API_ROUTE } from "./register";
+import { MOCK_EMAIL } from "../mocks";
+
+const REGISTER_URL = `${BASE_URL}/${REGISTER_API_ROUTE}`;
+
+/**
+ * Msw interceptor. Mocks the register endpoint response.
+ */
+export const registerMock = http.post(REGISTER_URL, async ({ request }) => {
+  const { email } = (await request.json()) as AuthData;
+
+  if (email === MOCK_EMAIL) {
+    return HttpResponse.json(
+      { message: "User already exists" },
+      { status: 409 },
+    );
+  }
+
+  return HttpResponse.json({
+    accessToken: MOCK_TOKEN,
+    user: { id: "2", email },
+  });
+});

src/features/auth/api/calls/register/register.spec.ts

@@ -0,0 +1,38 @@
+import { setupServer } from "msw/node";
+import { register } from "./register";
+import { registerMock } from "./register.mock";
+import {
+  MOCK_EMAIL,
+  MOCK_NEW_EMAIL,
+  MOCK_NEW_USER,
+  MOCK_PASSWORD,
+} from "../mocks";
+import { MOCK_TOKEN } from "shared/api";
+
+const server = setupServer(registerMock);
+
+describe("register", () => {
+  beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  describe("happy path", () => {
+    it("returns access token and user for a new email", async () => {
+      const result = await register({
+        email: MOCK_NEW_EMAIL,
+        password: MOCK_PASSWORD,
+      });
+
+      expect(result.accessToken).toBe(MOCK_TOKEN);
+      expect(result.user).toEqual(MOCK_NEW_USER);
+    });
+  });
+
+  describe("error cases", () => {
+    it("throws when email is already registered", async () => {
+      await expect(
+        register({ email: MOCK_EMAIL, password: MOCK_PASSWORD }),
+      ).rejects.toThrow();
+    });
+  });
+});

src/features/auth/api/calls/register/register.ts

@@ -0,0 +1,16 @@
+import type { AuthData, AuthResponse } from "../../../model/types/service";
+import { authHttpClient } from "../../config/authApi/authApi";
+
+export const REGISTER_API_ROUTE = "auth/register";
+
+/**
+ * Registers a new user with the given email and password.
+ *
+ * @param registerData - The user's registration data (email and password).
+ * @returns A promise that resolves to the authentication response.
+ */
+export function register(registerData: AuthData) {
+  return authHttpClient
+    .post(REGISTER_API_ROUTE, { json: registerData })
+    .json<AuthResponse>();
+}

src/features/auth/api/config/authApi/authApi.ts

@@ -0,0 +1,34 @@
+import { api as baseApi, useTokenStore } from "shared/api";
+
+export const authHttpClient = baseApi.extend({
+  hooks: {
+    beforeRequest: [
+      (request) => {
+        const token = useTokenStore.getState().accessToken;
+
+        if (token) {
+          request.headers.set("Authorization", `Bearer ${token}`);
+        }
+
+        return request;
+      },
+    ],
+    afterResponse: [
+      async (request, options, response) => {
+        if (response.status !== 401) {
+          return response;
+        }
+
+        const { accessToken, refreshToken } = useTokenStore.getState();
+        if (!accessToken) return response;
+
+        try {
+          await refreshToken?.();
+          return authHttpClient(request); // beforeRequest picks up new token automatically
+        } catch {
+          return response;
+        }
+      },
+    ],
+  },
+});

src/features/auth/api/config/index.ts

@@ -0,0 +1 @@
+export { authHttpClient } from "./authApi/authApi";

src/features/auth/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./config";
+export * from "./calls";

src/features/auth/index.ts

@@ -1,2 +1,3 @@
 export * from "./lib";
 export * from "./ui";
+export * from "./model";

src/features/auth/model/index.ts

@@ -0,0 +1,9 @@
+// Types
+export * from "./types/service";
+export * from "./types/store";
+
+// Stores
+export * from "./stores";
+
+// Selectors
+export * from "./selectors";

src/features/auth/model/selectors/index.ts

@@ -0,0 +1,3 @@
+export * from "./selectFormValid/selectFormValid";
+export * from "./selectAuthData/selectAuthData";
+export * from "./selectStatusIsLoading/selectStatusIsLoading";

src/features/auth/model/selectors/selectAuthData/selectAuthData.spec.ts

@@ -0,0 +1,14 @@
+import { useAuthStore } from "../../stores/authStore/authStore";
+import { selectAuthData } from "./selectAuthData";
+import { MOCK_EMAIL, MOCK_PASSWORD } from "../../../api/calls/mocks";
+
+describe("selectAuthData", () => {
+  it("should return the correct auth data", () => {
+    useAuthStore.getState().setEmail(MOCK_EMAIL);
+    useAuthStore.getState().setPassword(MOCK_PASSWORD);
+    expect(selectAuthData(useAuthStore.getState())).toEqual({
+      email: MOCK_EMAIL,
+      password: MOCK_PASSWORD,
+    });
+  });
+});

src/features/auth/model/selectors/selectAuthData/selectAuthData.ts

@@ -0,0 +1,7 @@
+import type { AuthData } from "../../types/service";
+import type { AuthStore } from "../../types/store";
+
+export const selectAuthData = (state: AuthStore): AuthData => ({
+  email: state.formData.email.value,
+  password: state.formData.password.value,
+});

src/features/auth/model/selectors/selectFormValid/selectFormValid.spec.ts

@@ -0,0 +1,25 @@
+import { MOCK_EMAIL, MOCK_PASSWORD } from "../../../api/calls/mocks";
+import { useAuthStore } from "../../stores/authStore/authStore";
+import { selectFormValid } from "./selectFormValid";
+
+describe("selectFormValid", () => {
+  afterEach(() => {
+    useAuthStore.getState().reset();
+  });
+
+  it("should be false when email is invalid", () => {
+    useAuthStore.getState().setEmail("");
+    expect(selectFormValid(useAuthStore.getState())).toBe(false);
+  });
+
+  it("should be false when password is invalid", () => {
+    useAuthStore.getState().setPassword("");
+    expect(selectFormValid(useAuthStore.getState())).toBe(false);
+  });
+
+  it("should be true when email and password are valid", () => {
+    useAuthStore.getState().setEmail(MOCK_EMAIL);
+    useAuthStore.getState().setPassword(MOCK_PASSWORD);
+    expect(selectFormValid(useAuthStore.getState())).toBe(true);
+  });
+});

src/features/auth/model/selectors/selectFormValid/selectFormValid.ts

@@ -0,0 +1,4 @@
+import type { AuthStore } from "../../types/store";
+
+export const selectFormValid = (state: AuthStore) =>
+  Object.values(state.formData).every((field) => field.valid);

src/features/auth/model/selectors/selectStatusIsLoading/selectStatusIsLoading.spec.ts

@@ -0,0 +1,18 @@
+import { useAuthStore } from "../../stores";
+import { selectStatusIsLoading } from "./selectStatusIsLoading";
+
+describe("selectStatusIsLoading", () => {
+  afterEach(() => {
+    useAuthStore.getState().reset();
+  });
+
+  it("should return true when status is 'loading'", () => {
+    useAuthStore.setState({ status: "loading" });
+    expect(selectStatusIsLoading(useAuthStore.getState())).toBe(true);
+  });
+
+  it("should return false when status is not 'loading'", () => {
+    useAuthStore.setState({ status: "idle" });
+    expect(selectStatusIsLoading(useAuthStore.getState())).toBe(false);
+  });
+});

src/features/auth/model/selectors/selectStatusIsLoading/selectStatusIsLoading.ts

@@ -0,0 +1,4 @@
+import type { AuthStore } from "../../types/store";
+
+export const selectStatusIsLoading = (state: AuthStore) =>
+  state.status === "loading";

src/features/auth/model/stores/authStore/authStore.spec.ts

@@ -0,0 +1,170 @@
+import { setupServer } from "msw/node";
+import * as apiCalls from "../../../api/calls";
+import { defaultStoreState, useAuthStore } from "./authStore";
+import {
+  MOCK_EMAIL,
+  MOCK_NEW_EMAIL,
+  MOCK_PASSWORD,
+} from "../../../api/calls/mocks";
+
+const server = setupServer(
+  apiCalls.loginMock,
+  apiCalls.registerMock,
+  apiCalls.logoutMock,
+);
+
+const loginSpy = vi.spyOn(apiCalls, "login");
+const registerSpy = vi.spyOn(apiCalls, "register");
+const logoutSpy = vi.spyOn(apiCalls, "logout");
+
+describe("authStore", () => {
+  beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+  afterEach(() => {
+    useAuthStore.getState().reset();
+    server.resetHandlers();
+  });
+  afterAll(() => server.close());
+
+  describe("setEmail", () => {
+    it("should set the email in formData", () => {
+      useAuthStore.getState().setEmail(MOCK_NEW_EMAIL);
+      expect(useAuthStore.getState().formData.email).toMatchObject({
+        value: MOCK_NEW_EMAIL,
+      });
+    });
+  });
+
+  describe("setPassword", () => {
+    it("should set the password in formData", () => {
+      useAuthStore.getState().setPassword(MOCK_PASSWORD);
+      expect(useAuthStore.getState().formData.password).toMatchObject({
+        value: MOCK_PASSWORD,
+      });
+    });
+  });
+
+  describe("reset", () => {
+    it("should reset the store to default state", () => {
+      useAuthStore.getState().reset();
+      expect(useAuthStore.getState()).toMatchObject(defaultStoreState);
+    });
+  });
+
+  describe("login", () => {
+    it("should not do api call if status is loading", async () => {
+      useAuthStore.getState().setEmail(MOCK_EMAIL);
+      useAuthStore.getState().setPassword(MOCK_PASSWORD);
+      useAuthStore.setState({ status: "loading" });
+
+      await useAuthStore.getState().login();
+
+      expect(loginSpy).not.toHaveBeenCalled();
+    });
+
+    it("should not do api call if form is invalid", async () => {
+      useAuthStore.getState().setEmail("");
+      useAuthStore.getState().setPassword("");
+
+      await useAuthStore.getState().login();
+
+      const { status } = useAuthStore.getState();
+
+      expect(loginSpy).not.toHaveBeenCalled();
+      expect(status).toBe("idle");
+    });
+
+    it("should set access token, user data, and update status after successful login", async () => {
+      useAuthStore.getState().setEmail(MOCK_EMAIL);
+      useAuthStore.getState().setPassword(MOCK_PASSWORD);
+
+      await useAuthStore.getState().login();
+
+      const { user, status, error } = useAuthStore.getState();
+
+      expect(user).toBeDefined();
+      expect(status).toBe("authenticated");
+      expect(error).toBeNull();
+    });
+
+    it("should set error and update status if login fails", async () => {
+      useAuthStore.getState().setEmail("wrong@test.com");
+      useAuthStore.getState().setPassword("wrongPassword");
+
+      await useAuthStore.getState().login();
+
+      const { status, error } = useAuthStore.getState();
+
+      expect(status).toBe("unauthenticated");
+      expect(error).toBeDefined();
+    });
+  });
+
+  describe("register", () => {
+    it("should not do api call if status is loading", async () => {
+      useAuthStore.getState().setEmail(MOCK_EMAIL);
+      useAuthStore.getState().setPassword(MOCK_PASSWORD);
+      useAuthStore.setState({ status: "loading" });
+
+      await useAuthStore.getState().register();
+
+      expect(registerSpy).not.toHaveBeenCalled();
+    });
+
+    it("should not do api call if form is invalid", async () => {
+      useAuthStore.getState().setEmail("");
+      useAuthStore.getState().setPassword("");
+
+      await useAuthStore.getState().register();
+
+      const { status } = useAuthStore.getState();
+
+      expect(registerSpy).not.toHaveBeenCalled();
+      expect(status).toBe("idle");
+    });
+
+    it("should set access token, user data, and update status after successful registration", async () => {
+      useAuthStore.getState().setEmail(MOCK_NEW_EMAIL);
+      useAuthStore.getState().setPassword(MOCK_PASSWORD);
+
+      await useAuthStore.getState().register();
+
+      const { user, status, error } = useAuthStore.getState();
+
+      expect(user).toBeDefined();
+      expect(status).toBe("authenticated");
+      expect(error).toBeNull();
+    });
+
+    it("should set error and update status if registration fails", async () => {
+      useAuthStore.getState().setEmail(MOCK_EMAIL);
+      useAuthStore.getState().setPassword(MOCK_PASSWORD);
+
+      await useAuthStore.getState().register();
+
+      const { status, error } = useAuthStore.getState();
+
+      expect(status).toBe("unauthenticated");
+      expect(error).toBeDefined();
+    });
+  });
+
+  describe("logout", () => {
+    it("should not do api call if status is loading", async () => {
+      useAuthStore.setState({ status: "loading" });
+
+      await useAuthStore.getState().logout();
+
+      expect(logoutSpy).not.toHaveBeenCalled();
+    });
+
+    it("should clear access token, user data, and update status after logout", async () => {
+      await useAuthStore.getState().logout();
+
+      const { user, status, error } = useAuthStore.getState();
+
+      expect(user).toBeUndefined();
+      expect(status).toBe("unauthenticated");
+      expect(error).toBeNull();
+    });
+  });
+});

src/features/auth/model/stores/authStore/authStore.ts

@@ -0,0 +1,154 @@
+import { create } from "zustand";
+import type { AuthStore, AuthStoreState } from "../../types/store";
+import { login, logout, register } from "../../../api";
+import { callApi } from "shared/utils";
+import { UNEXPECTED_ERROR_MESSAGE } from "shared/api";
+import { selectAuthData, selectFormValid } from "../../selectors";
+
+export const defaultStoreState: Readonly<AuthStoreState> = {
+  formData: {
+    email: { value: "", valid: false },
+    password: { value: "", valid: false },
+  },
+  user: undefined,
+  status: "idle",
+  error: null,
+};
+
+function validateEmail(email: string): boolean {
+  return Boolean(email);
+}
+
+function validatePassword(password: string): boolean {
+  return Boolean(password);
+}
+
+export const useAuthStore = create<AuthStore>()((set, get) => ({
+  ...defaultStoreState,
+
+  setEmail: (email: string) => {
+    const isValid = validateEmail(email);
+    set((state) => ({
+      formData: { ...state.formData, email: { value: email, valid: isValid } },
+    }));
+  },
+  setPassword: (password: string) => {
+    const isValid = validatePassword(password);
+    set((state) => ({
+      formData: {
+        ...state.formData,
+        password: { value: password, valid: isValid },
+      },
+    }));
+  },
+  reset: () => {
+    set(defaultStoreState);
+  },
+
+  login: async () => {
+    const { status } = get();
+
+    if (status === "loading") {
+      return;
+    }
+
+    set({ status: "loading" });
+
+    const formValid = selectFormValid(get());
+
+    if (!formValid) {
+      set({ status: "idle" });
+      return;
+    }
+
+    try {
+      const loginData = selectAuthData(get());
+      const [responseData, loginError] = await callApi(() => login(loginData));
+
+      if (loginError) {
+        set({ status: "unauthenticated", error: loginError });
+        return;
+      }
+
+      set({
+        status: "authenticated",
+        user: responseData?.user,
+        error: null,
+      });
+    } catch (err) {
+      console.error(err);
+      set({
+        status: "unauthenticated",
+        error: new Error(UNEXPECTED_ERROR_MESSAGE),
+      });
+    }
+  },
+  register: async () => {
+    const { status } = get();
+
+    if (status === "loading") {
+      return;
+    }
+
+    set({ status: "loading" });
+
+    const formValid = selectFormValid(get());
+
+    if (!formValid) {
+      set({ status: "idle" });
+      return;
+    }
+
+    try {
+      const registerData = selectAuthData(get());
+      const [responseData, registerError] = await callApi(() =>
+        register(registerData),
+      );
+
+      if (registerError) {
+        set({ status: "unauthenticated", error: registerError });
+        return;
+      }
+
+      set({
+        status: "authenticated",
+        user: responseData?.user,
+        error: null,
+      });
+    } catch (err) {
+      console.error(err);
+      set({
+        status: "unauthenticated",
+        error: new Error(UNEXPECTED_ERROR_MESSAGE),
+      });
+    }
+  },
+  logout: async () => {
+    const prevStatus = get().status;
+
+    if (prevStatus === "loading") {
+      return;
+    }
+
+    set({ status: "loading" });
+    try {
+      const [, logoutError] = await callApi(() => logout());
+
+      if (logoutError) {
+        set({ error: logoutError, status: prevStatus });
+        return;
+      }
+
+      set({
+        status: "unauthenticated",
+        user: undefined,
+        error: null,
+      });
+
+      // useTokenStore.setState({ accessToken: null });
+    } catch (err) {
+      console.error(err);
+      set({ error: new Error(UNEXPECTED_ERROR_MESSAGE) });
+    }
+  },
+}));

src/features/auth/model/stores/index.ts

@@ -0,0 +1 @@
+export { useAuthStore } from "./authStore/authStore";

src/features/auth/model/types/service.ts

@@ -0,0 +1,29 @@
+import type { User } from "entities/User";
+
+export interface AuthData {
+  /**
+   * User's email address.
+   */
+  email: string;
+  /**
+   * User's password.
+   */
+  password: string;
+}
+
+export interface AuthResponse {
+  /**
+   * Access token for the authenticated user.
+   */
+  accessToken: string;
+  /**
+   * User object associated with the access token.
+   */
+  user: User;
+}
+
+export type AuthStatus =
+  | "idle"
+  | "loading"
+  | "authenticated"
+  | "unauthenticated";

src/features/auth/model/types/store.ts

@@ -0,0 +1,41 @@
+import type { User } from "entities/User";
+import type { AuthData, AuthStatus } from "./service";
+import type { ApiError } from "shared/utils";
+
+export type AuthFormData = {
+  [K in keyof AuthData]: {
+    value: AuthData[K];
+    valid: boolean;
+  };
+};
+
+export interface AuthStoreState {
+  /**
+   * Form data for login/register forms
+   */
+  formData: AuthFormData;
+  /**
+   * Current user
+   */
+  user?: User;
+  /**
+   * Authentication status
+   */
+  status: AuthStatus;
+  /**
+   * Error data
+   */
+  error: ApiError | Error | null;
+}
+
+export interface AuthStoreActions {
+  setEmail: (email: string) => void;
+  setPassword: (password: string) => void;
+  reset: () => void;
+
+  login: () => Promise<void>;
+  register: () => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+export type AuthStore = AuthStoreState & AuthStoreActions;

src/features/auth/ui/LoginForm/LoginForm.spec.tsx

@@ -0,0 +1,89 @@
+import { selectAuthData, useAuthStore } from "../../model";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LoginForm } from "./LoginForm";
+import { MOCK_EMAIL, MOCK_PASSWORD } from "../../api";
+
+describe("LoginForm", () => {
+  afterEach(() => {
+    useAuthStore.getState().reset();
+    vi.restoreAllMocks();
+  });
+
+  it("should render form", () => {
+    render(<LoginForm />);
+    const form = screen.getByRole("form");
+
+    expect(form).toBeInTheDocument();
+  });
+
+  it("disables submit button when form is invalid", () => {
+    render(<LoginForm />);
+    const loginButton = screen.getByRole("button", { name: /login/i });
+
+    expect(loginButton).toBeDisabled();
+  });
+
+  it("disables submit button when auth store status equals loading", async () => {
+    useAuthStore.setState({ status: "loading" });
+
+    render(<LoginForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const loginButton = screen.getByRole("button", { name: /login/i });
+    await userEvent.type(emailInput, MOCK_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+
+    expect(loginButton).toBeDisabled();
+  });
+
+  it("enables submit button when form is valid and auth store status isn't equal to loading", async () => {
+    useAuthStore.setState({ status: "idle" });
+
+    render(<LoginForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const loginButton = screen.getByRole("button", { name: /login/i });
+    await userEvent.type(emailInput, MOCK_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+
+    expect(loginButton).toBeEnabled();
+  });
+
+  it("updates email value in auth store when user types", async () => {
+    render(<LoginForm />);
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    await userEvent.type(emailInput, MOCK_EMAIL);
+
+    const storeEmailValue = selectAuthData(useAuthStore.getState()).email;
+    expect(storeEmailValue).toBe(MOCK_EMAIL);
+  });
+
+  it("updates password value in auth store when user types", async () => {
+    render(<LoginForm />);
+    const passwordInput = screen.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+
+    const storePasswordValue = selectAuthData(useAuthStore.getState()).password;
+    expect(storePasswordValue).toBe(MOCK_PASSWORD);
+  });
+
+  it("calls login when submit form is valid and user clicks submit", async () => {
+    const loginSpy = vi.spyOn(useAuthStore.getState(), "login");
+    useAuthStore.setState({ status: "idle" });
+
+    render(<LoginForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole("button", { name: /login/i });
+
+    await userEvent.type(emailInput, MOCK_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+    await userEvent.click(submitButton);
+
+    expect(loginSpy).toHaveBeenCalled();
+  });
+});

src/features/auth/ui/LoginForm/LoginForm.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LoginForm } from "./LoginForm";
+
+const meta: Meta<typeof LoginForm> = {
+  component: LoginForm,
+  title: "features/auth/LoginForm",
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -1,5 +1,51 @@
+import {
+  selectFormValid,
+  selectStatusIsLoading,
+  useAuthStore,
+} from "../../model";
+import type { SubmitEvent, ChangeEvent } from "react";
+
+/**
+ * Login form component
+ */
 export function LoginForm() {
+  const { formData, setEmail, setPassword, login } = useAuthStore();
+
+  const formValid = useAuthStore(selectFormValid);
+  const isLoading = useAuthStore(selectStatusIsLoading);
+
+  const disabled = !formValid || isLoading;
+
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+
+  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    login();
+  };
+
   return (
-    <form>Login Form</form>
+    <form aria-label="Login form" onSubmit={handleSubmit}>
+      <input
+        type="email"
+        aria-label="Email"
+        value={formData?.email?.value ?? ""}
+        onChange={handleEmailChange}
+      />
+      <input
+        type="password"
+        aria-label="Password"
+        value={formData?.password?.value ?? ""}
+        onChange={handlePasswordChange}
+      />
+      <button type="submit" disabled={disabled}>
+        Login
+      </button>
+    </form>
   );
 }

src/features/auth/ui/RegisterForm/RegisterForm.spec.tsx

@@ -0,0 +1,115 @@
+import { render, screen } from "@testing-library/react";
+import { RegisterForm } from "./RegisterForm";
+import { selectAuthData, useAuthStore } from "../../model";
+import { MOCK_NEW_EMAIL, MOCK_PASSWORD } from "../../api";
+import userEvent from "@testing-library/user-event";
+
+describe("RegisterForm", () => {
+  afterEach(() => {
+    useAuthStore.getState().reset();
+    vi.restoreAllMocks();
+  });
+
+  it("should render form", () => {
+    render(<RegisterForm />);
+
+    const form = screen.getByRole("form");
+    expect(form).toBeInTheDocument();
+  });
+
+  it("should disable button when form is invalid", async () => {
+    render(<RegisterForm />);
+
+    const registerButton = screen.getByRole("button", { name: /register/i });
+
+    expect(registerButton).toBeDisabled();
+  });
+
+  it("should disable button when auth store status equals loading", async () => {
+    useAuthStore.setState({ status: "loading" });
+
+    render(<RegisterForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm/i);
+    const registerButton = screen.getByRole("button", { name: /register/i });
+
+    await userEvent.type(emailInput, MOCK_NEW_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+    await userEvent.type(confirmPasswordInput, MOCK_PASSWORD);
+
+    expect(registerButton).toBeDisabled();
+  });
+
+  it("should disable button when password and confirm password do not match", async () => {
+    render(<RegisterForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm/i);
+    const registerButton = screen.getByRole("button", { name: /register/i });
+
+    await userEvent.type(emailInput, MOCK_NEW_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+    await userEvent.type(confirmPasswordInput, MOCK_PASSWORD + "1");
+
+    expect(registerButton).toBeDisabled();
+  });
+
+  it("should enable button when password and confirm password match and auth store status isn't equal to loading", async () => {
+    useAuthStore.setState({ status: "idle" });
+
+    render(<RegisterForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm/i);
+    const registerButton = screen.getByRole("button", { name: /register/i });
+
+    await userEvent.type(emailInput, MOCK_NEW_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+    await userEvent.type(confirmPasswordInput, MOCK_PASSWORD);
+
+    expect(registerButton).not.toBeDisabled();
+  });
+
+  it("should change email value in auth store when user types", async () => {
+    render(<RegisterForm />);
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    await userEvent.type(emailInput, MOCK_NEW_EMAIL);
+
+    const storeEmailValue = selectAuthData(useAuthStore.getState()).email;
+
+    expect(storeEmailValue).toBe(MOCK_NEW_EMAIL);
+  });
+
+  it("should change password value in auth store when user types", async () => {
+    render(<RegisterForm />);
+    const passwordInput = screen.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+
+    const storePasswordValue = selectAuthData(useAuthStore.getState()).password;
+
+    expect(storePasswordValue).toBe(MOCK_PASSWORD);
+  });
+
+  it("should perform register api call when user clicks register button", async () => {
+    const registerSpy = vi.spyOn(useAuthStore.getState(), "register");
+    useAuthStore.setState({ status: "idle" });
+
+    render(<RegisterForm />);
+
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    const passwordInput = screen.getByLabelText(/password/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm/i);
+    const registerButton = screen.getByRole("button", { name: /register/i });
+
+    await userEvent.type(emailInput, MOCK_NEW_EMAIL);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+    await userEvent.type(confirmPasswordInput, MOCK_PASSWORD);
+    await userEvent.click(registerButton);
+
+    expect(registerSpy).toHaveBeenCalled();
+  });
+});

src/features/auth/ui/RegisterForm/RegisterForm.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RegisterForm } from "./RegisterForm";
+
+const meta: Meta<typeof RegisterForm> = {
+  component: RegisterForm,
+  title: "features/auth/RegisterForm",
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -1,5 +1,64 @@
+import { useState, type ChangeEvent, type SubmitEvent } from "react";
+import {
+  selectFormValid,
+  selectStatusIsLoading,
+  useAuthStore,
+} from "../../model";
+
+/**
+ * Register form component
+ */
 export function RegisterForm() {
+  const { formData, setEmail, setPassword, register } = useAuthStore();
+
+  const [confirmedPassword, setConfirmedPassword] = useState("");
+
+  const formValid = useAuthStore(selectFormValid);
+  const isLoading = useAuthStore(selectStatusIsLoading);
+
+  const passwordMatch = formData?.password?.value === confirmedPassword;
+  const disabled = isLoading || !formValid || !passwordMatch;
+
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+
+  const handleConfirmChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setConfirmedPassword(e.target.value);
+  };
+
+  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    register();
+  };
+
   return (
-    <form>Register Form</form>
+    <form aria-label="Register Form" onSubmit={handleSubmit}>
+      <input
+        type="email"
+        aria-label="Email"
+        value={formData?.email?.value ?? ""}
+        onChange={handleEmailChange}
+      />
+      <input
+        type="password"
+        aria-label="Password"
+        value={formData?.password?.value ?? ""}
+        onChange={handlePasswordChange}
+      />
+      <input
+        type="password"
+        aria-label="Confirm"
+        value={confirmedPassword}
+        onChange={handleConfirmChange}
+      />
+      <button type="submit" aria-label="Register" disabled={disabled}>
+        Register
+      </button>
+    </form>
   );
 }

src/shared/api/calls/index.ts

@@ -0,0 +1,2 @@
+export * from "./refresh/refresh";
+export * from "./refresh/refresh.mock";

src/shared/api/calls/refresh/index.ts

@@ -0,0 +1,2 @@
+export { refresh } from "./refresh";
+export { refreshMock } from "./refresh.mock";

src/shared/api/calls/refresh/refresh.mock.ts

@@ -0,0 +1,26 @@
+import { http, HttpResponse } from "msw";
+import { REFRESH_API_ROUTE } from "./refresh";
+import { BASE_URL, MOCK_FRESH_TOKEN, MOCK_TOKEN } from "../../model";
+
+const REFRESH_URL = `${BASE_URL}/${REFRESH_API_ROUTE}`;
+const MOCK_BEARER_TOKEN = `Bearer ${MOCK_TOKEN}`;
+
+/**
+ * Msw interceptor. Mocks the refresh endpoint response.
+ * Cookie validation is a server concern — always returns a fresh token.
+ * Use server.use() to override with a 401 in tests that need a failure case.
+ */
+export const refreshMock = http.post(REFRESH_URL, async ({ request }) => {
+  if (request.headers.get("Authorization") === MOCK_BEARER_TOKEN) {
+    return HttpResponse.json({
+      accessToken: MOCK_FRESH_TOKEN,
+    });
+  }
+
+  return HttpResponse.json(
+    {
+      error: "Unauthorized",
+    },
+    { status: 401 },
+  );
+});

src/shared/api/calls/refresh/refresh.spec.ts

@@ -0,0 +1,30 @@
+import { setupServer } from "msw/node";
+import { useTokenStore } from "../../model/stores/tokenStore";
+import { refresh } from "./refresh";
+import { refreshMock } from "./refresh.mock";
+import { MOCK_FRESH_TOKEN, MOCK_TOKEN } from "../../model/const";
+
+const server = setupServer(refreshMock);
+
+describe("refresh", () => {
+  beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+  afterEach(() => {
+    server.resetHandlers();
+    useTokenStore.setState({ accessToken: undefined });
+  });
+  afterAll(() => server.close());
+
+  describe("happy path", () => {
+    it("returns a fresh access token and user when session is valid", async () => {
+      const result = await refresh(MOCK_TOKEN);
+
+      expect(result.accessToken).toBe(MOCK_FRESH_TOKEN);
+    });
+  });
+
+  describe("error cases", () => {
+    it("throws when session is expired or missing", async () => {
+      await expect(refresh("expired_token")).rejects.toThrow();
+    });
+  });
+});

src/shared/api/calls/refresh/refresh.ts

@@ -0,0 +1,10 @@
+import { api } from "../../config/api";
+import type { RefreshTokenResponse } from "../../model/types";
+
+export const REFRESH_API_ROUTE = "auth/refresh";
+
+export function refresh(token: string) {
+  return api
+    .post(REFRESH_API_ROUTE, { headers: { Authorization: `Bearer ${token}` } })
+    .json<RefreshTokenResponse>();
+}

src/shared/api/config/api.ts

@@ -0,0 +1,20 @@
+import ky from "ky";
+import { BASE_URL } from "../model/const";
+import { useTokenStore } from "../model";
+
+export const api = ky.create({
+  prefixUrl: BASE_URL,
+  hooks: {
+    beforeRequest: [
+      (request) => {
+        const token = useTokenStore.getState().accessToken;
+
+        if (token) {
+          request.headers.set("Authorization", `Bearer ${token}`);
+        }
+
+        return request;
+      },
+    ],
+  },
+});

src/shared/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./model";
+export { api } from "./config/api";

src/shared/api/model/const/index.ts

@@ -0,0 +1,6 @@
+export const BASE_URL =
+  import.meta.env.VITE_API_BASE_URL || "https://localhost:3001";
+
+export const UNEXPECTED_ERROR_MESSAGE = "An unexpected error occured";
+export const MOCK_TOKEN = "mock.access.token";
+export const MOCK_FRESH_TOKEN = "mock.fresh.access.token";

src/shared/api/model/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./stores/tokenStore";
+export * from "./const";

src/shared/api/model/stores/tokenStore.spec.ts

@@ -0,0 +1,45 @@
+import { setupServer } from "msw/node";
+import { MOCK_TOKEN } from "../const";
+import { defaultStoreState, useTokenStore } from "./tokenStore";
+import { refreshMock } from "shared/api/calls";
+
+const server = setupServer(refreshMock);
+
+describe("tokenStore", () => {
+  beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+  afterEach(() => {
+    useTokenStore.getState().reset();
+    server.resetHandlers();
+  });
+  afterAll(() => server.close());
+
+  describe("reset", () => {
+    it("should reset the store to default state", () => {
+      useTokenStore.getState().reset();
+      expect(useTokenStore.getState()).toMatchObject(defaultStoreState);
+    });
+  });
+
+  describe("refreshToken", () => {
+    it("should update access token after successful refresh", async () => {
+      useTokenStore.setState({ accessToken: MOCK_TOKEN });
+
+      await useTokenStore.getState().refreshToken();
+
+      const { accessToken, error } = useTokenStore.getState();
+
+      expect(accessToken).toBeDefined();
+      expect(error).toBeNull();
+    });
+
+    it("should set error if refresh fails", async () => {
+      useTokenStore.setState({ accessToken: "old_token" });
+
+      await useTokenStore.getState().refreshToken();
+
+      const { error } = useTokenStore.getState();
+
+      expect(error).toBeDefined();
+    });
+  });
+});

src/shared/api/model/stores/tokenStore.ts

@@ -0,0 +1,39 @@
+import { create } from "zustand";
+import type { TokenStore, TokenStoreState } from "../types";
+import { callApi } from "shared/utils";
+import { refresh } from "../../calls/refresh";
+import { UNEXPECTED_ERROR_MESSAGE } from "../const";
+
+export const defaultStoreState: TokenStoreState = {
+  accessToken: null,
+  error: null,
+};
+
+export const useTokenStore = create<TokenStore>()((set, get) => ({
+  ...defaultStoreState,
+  reset: () => set(defaultStoreState),
+  refreshToken: async () => {
+    try {
+      const currentToken = get().accessToken;
+      if (!currentToken) {
+        return;
+      }
+
+      const [refreshResponse, refreshError] = await callApi(() =>
+        refresh(currentToken),
+      );
+
+      if (refreshError) {
+        set({ error: refreshError });
+        return;
+      }
+
+      set({ accessToken: refreshResponse?.accessToken });
+    } catch (error) {
+      console.error(error);
+      set({
+        error: new Error(UNEXPECTED_ERROR_MESSAGE),
+      });
+    }
+  },
+}));

src/shared/api/model/types/index.ts

@@ -0,0 +1,17 @@
+import type { ApiError } from "shared/utils";
+
+export interface TokenStoreState {
+  accessToken: string | null;
+  error: ApiError | Error | null;
+}
+
+export interface TokenStoreActions {
+  reset: () => void;
+  refreshToken: () => Promise<void>;
+}
+
+export type TokenStore = TokenStoreState & TokenStoreActions;
+
+export interface RefreshTokenResponse {
+  accessToken: string;
+}

src/shared/config/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

src/shared/utils/helpers/callApi/callApi.spec.ts

@@ -0,0 +1,40 @@
+import { HTTPError } from "ky";
+import { callApi } from "./callApi";
+
+function makeHttpError(status: number, body: object) {
+  const response = new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+  return new HTTPError(response, new Request("http://test.com"), {});
+}
+
+describe("callApi", () => {
+  describe("happy path", () => {
+    it("returns [data, null] when the fn resolves", async () => {
+      const [data, error] = await callApi(() => Promise.resolve({ id: 1 }));
+
+      expect(data).toEqual({ id: 1 });
+      expect(error).toBeNull();
+    });
+  });
+
+  describe("error cases", () => {
+    it("returns [null, ApiError] on HTTPError", async () => {
+      const [data, error] = await callApi(() =>
+        Promise.reject(makeHttpError(401, { message: "Unauthorized" })),
+      );
+
+      expect(data).toBeNull();
+      expect(error).toEqual({ status: 401, message: "Unauthorized" });
+    });
+
+    it("re-throws non-HTTP errors", async () => {
+      const unexpected = new TypeError("Network failure");
+
+      await expect(
+        callApi(() => Promise.reject(unexpected)),
+      ).rejects.toThrow("Network failure");
+    });
+  });
+});

src/shared/utils/helpers/callApi/callApi.ts

@@ -0,0 +1,33 @@
+import { HTTPError } from "ky";
+
+export interface ApiError {
+  /**
+   * Client error response status code
+   */
+  status: number;
+  /**
+   * Error message
+   */
+  message: string;
+}
+
+/**
+ * Helper function that calls Ky and manages its errors;
+ * @returns A tuple [data, error] in Golang-like fashion
+ */
+export async function callApi<T>(
+  fn: () => Promise<T>,
+): Promise<[T, null] | [null, ApiError]> {
+  try {
+    const data = await fn();
+    return [data, null];
+  } catch (error) {
+    if (error instanceof HTTPError) {
+      const body = await error.response.json<{ message: string }>();
+      return [null, { status: error.response.status, message: body.message }];
+    }
+
+    // re-throw unexpected errors
+    throw error;
+  }
+}

src/shared/utils/helpers/index.ts

@@ -0,0 +1 @@
+export * from "./callApi/callApi";

src/shared/utils/index.ts

@@ -0,0 +1 @@
+export * from "./helpers";

tsconfig.app.json

@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "vitest/globals"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -22,7 +22,17 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* FSD path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "shared/*": ["src/shared/*"],
+      "entities/*": ["src/entities/*"],
+      "features/*": ["src/features/*"],
+      "widgets/*": ["src/widgets/*"],
+      "app/*": ["src/app/*"]
+    }
   },
   "include": ["src"]
 }

vite.config.ts

@@ -1,8 +1,18 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { federation } from "@module-federation/vite";
+import path from "path";
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      shared: path.resolve(__dirname, "src/shared"),
+      entities: path.resolve(__dirname, "src/entities"),
+      features: path.resolve(__dirname, "src/features"),
+      widgets: path.resolve(__dirname, "src/widgets"),
+      app: path.resolve(__dirname, "src/app"),
+    },
+  },
   plugins: [
     react({
       babel: {
@@ -13,7 +23,12 @@ export default defineConfig({
       name: "auth-react-remote",
       manifest: true,
       filename: "remoteEntry.js",
-      exposes: {},
+      exposes: {
+        "./AuthGuard": "./src/features/auth",
+        "./useAuth": "./src/features/auth",
+        "./RegisterForm": "./src/features/auth",
+        "./LoginForm": "./src/features/auth",
+      },
       shared: ["react", "react-dom", "zustand"],
     }),
   ],

vitest.config.ts

@@ -0,0 +1,59 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  plugins: [react({
+    babel: {
+      plugins: [["babel-plugin-react-compiler", {}]]
+    }
+  })],
+  resolve: {
+    alias: {
+      shared: path.resolve(__dirname, "src/shared"),
+      entities: path.resolve(__dirname, "src/entities"),
+      features: path.resolve(__dirname, "src/features"),
+      widgets: path.resolve(__dirname, "src/widgets"),
+      app: path.resolve(__dirname, "src/app")
+    }
+  },
+  test: {
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+      exclude: ["node_modules/", "src/test/"]
+    },
+    projects: [{
+      extends: true,
+      test: {
+        globals: true,
+        environment: "jsdom",
+        setupFiles: ["./src/shared/config/test/setup.ts"]
+      }
+    }, {
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        }
+      }
+    }]
+  }
+});

vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />