fix(auth): fix circular import problem by changing the way the authHttpClient gets accessToken; replace individual calls mocks with the common ones

This commit is contained in:
Ilia Mashkov
2026-03-18 09:10:17 +03:00
parent b75e805f54
commit 2afbd73a31
24 changed files with 135 additions and 85 deletions

View File

@@ -1,6 +0,0 @@
export const LOGIN_API_ROUTE = "auth/login";
// MOCKS
export const MOCK_EMAIL = "test@test.com";
export const MOCK_PASSWORD = "password";
export const MOCK_TOKEN = "mock.access.token";

View File

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

View File

@@ -1,12 +1,8 @@
import { http, HttpResponse } from "msw";
import type { AuthData } from "../../../model/types/service";
import { BASE_URL } from "shared/config";
import {
LOGIN_API_ROUTE,
MOCK_EMAIL,
MOCK_PASSWORD,
MOCK_TOKEN,
} from "./constants";
import { LOGIN_API_ROUTE } from "./login";
import { MOCK_AUTH_RESPONSE, MOCK_EMAIL, MOCK_PASSWORD } from "../mocks";
const LOGIN_URL = `${BASE_URL}/${LOGIN_API_ROUTE}`;
@@ -17,10 +13,7 @@ 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({
accessToken: MOCK_TOKEN,
user: { id: "1", email },
});
return HttpResponse.json(MOCK_AUTH_RESPONSE);
}
return HttpResponse.json({ message: "Invalid credentials" }, { status: 401 });

View File

@@ -1,7 +1,12 @@
import { setupServer } from "msw/node";
import { login } from "./login";
import { loginMock } from "./login.mock";
import { MOCK_EMAIL, MOCK_PASSWORD } from "./constants";
import {
MOCK_EMAIL,
MOCK_EXISTING_USER,
MOCK_PASSWORD,
MOCK_TOKEN,
} from "../mocks";
const server = setupServer(loginMock);
@@ -12,10 +17,13 @@ describe("login", () => {
describe("happy path", () => {
it("returns access token and user on valid credentials", async () => {
const result = await login({ email: MOCK_EMAIL, password: MOCK_PASSWORD });
const result = await login({
email: MOCK_EMAIL,
password: MOCK_PASSWORD,
});
expect(result.accessToken).toBe("mock.access.token");
expect(result.user).toEqual({ id: "1", email: MOCK_EMAIL });
expect(result.accessToken).toBe(MOCK_TOKEN);
expect(result.user).toEqual(MOCK_EXISTING_USER);
});
});

View File

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

View File

@@ -1 +0,0 @@
export const LOGOUT_API_ROUTE = "auth/logout";

View File

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

View File

@@ -1,6 +1,6 @@
import { http, HttpResponse } from "msw";
import { BASE_URL } from "shared/config";
import { LOGOUT_API_ROUTE } from "./constants";
import { LOGOUT_API_ROUTE } from "./logout";
const LOGOUT_URL = `${BASE_URL}/${LOGOUT_API_ROUTE}`;

View File

@@ -1,5 +1,6 @@
import { api } from "../../../api";
import { LOGOUT_API_ROUTE } from "./constants";
import { authHttpClient } from "../../config";
export const LOGOUT_API_ROUTE = "auth/logout";
/**
* Logs out the currently authenticated user.
@@ -8,5 +9,5 @@ import { LOGOUT_API_ROUTE } from "./constants";
* @returns A promise that resolves when the session is terminated.
*/
export async function logout(): Promise<void> {
await api.post(LOGOUT_API_ROUTE);
await authHttpClient.post(LOGOUT_API_ROUTE);
}

View File

@@ -0,0 +1,23 @@
import type { User } from "entities/User";
import type { AuthResponse } from "../../model";
export const MOCK_TOKEN = "mock.access.token";
export const MOCK_FRESH_TOKEN = "mock.fresh.access.token";
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,
};

View File

@@ -1,3 +0,0 @@
export const REFRESH_API_ROUTE = "auth/refresh";
export const MOCK_TOKEN = "mock.access.token";
export const MOCK_FRESH_TOKEN = "mock.fresh.access.token";

View File

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

View File

@@ -1,6 +1,7 @@
import { http, HttpResponse } from "msw";
import { BASE_URL } from "shared/config";
import { MOCK_FRESH_TOKEN, MOCK_TOKEN, REFRESH_API_ROUTE } from "./constants";
import { REFRESH_API_ROUTE } from "./refresh";
import { MOCK_EXISTING_USER, MOCK_FRESH_TOKEN, MOCK_TOKEN } from "../mocks";
const REFRESH_URL = `${BASE_URL}/${REFRESH_API_ROUTE}`;
@@ -13,8 +14,8 @@ export const refreshMock = http.post(REFRESH_URL, ({ request }) => {
if (authHeader === `Bearer ${MOCK_TOKEN}`) {
return HttpResponse.json({
user: MOCK_EXISTING_USER,
accessToken: MOCK_FRESH_TOKEN,
user: { id: "1", email: "test@test.com" },
});
}

View File

@@ -2,7 +2,7 @@ import { setupServer } from "msw/node";
import { useAuthStore } from "../../../model";
import { refresh } from "./refresh";
import { refreshMock } from "./refresh.mock";
import { MOCK_FRESH_TOKEN, MOCK_TOKEN } from "./constants";
import { MOCK_EXISTING_USER, MOCK_FRESH_TOKEN, MOCK_TOKEN } from "../mocks";
const server = setupServer(refreshMock);
@@ -21,7 +21,7 @@ describe("refresh", () => {
const result = await refresh();
expect(result.accessToken).toBe(MOCK_FRESH_TOKEN);
expect(result.user).toEqual({ id: "1", email: "test@test.com" });
expect(result.user).toEqual(MOCK_EXISTING_USER);
});
});

View File

@@ -1,7 +1,8 @@
import { api } from "../../../api";
import type { AuthResponse } from "../../../model/types/service";
import { REFRESH_API_ROUTE } from "./constants";
import { authHttpClient } from "../../config/authApi/authApi";
export const REFRESH_API_ROUTE = "auth/refresh";
export function refresh() {
return api.post(REFRESH_API_ROUTE).json<AuthResponse>();
return authHttpClient.post(REFRESH_API_ROUTE).json<AuthResponse>();
}

View File

@@ -1,6 +0,0 @@
export const REGISTER_API_ROUTE = "auth/register";
// MOCKS
export const MOCK_EMAIL = "test@test.com";
export const MOCK_PASSWORD = "password";
export const MOCK_TOKEN = "mock.access.token";

View File

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

View File

@@ -1,7 +1,8 @@
import { http, HttpResponse } from "msw";
import type { AuthData } from "../../../model/types/service";
import { BASE_URL } from "shared/config";
import { REGISTER_API_ROUTE, MOCK_EMAIL, MOCK_TOKEN } from "./constants";
import { REGISTER_API_ROUTE } from "./register";
import { MOCK_EMAIL, MOCK_TOKEN } from "../mocks";
const REGISTER_URL = `${BASE_URL}/${REGISTER_API_ROUTE}`;

View File

@@ -1,7 +1,13 @@
import { setupServer } from "msw/node";
import { register } from "./register";
import { registerMock } from "./register.mock";
import { MOCK_EMAIL, MOCK_PASSWORD, MOCK_TOKEN } from "./constants";
import {
MOCK_EMAIL,
MOCK_NEW_EMAIL,
MOCK_NEW_USER,
MOCK_PASSWORD,
MOCK_TOKEN,
} from "../mocks";
const server = setupServer(registerMock);
@@ -12,10 +18,13 @@ describe("register", () => {
describe("happy path", () => {
it("returns access token and user for a new email", async () => {
const result = await register({ email: "new@test.com", password: MOCK_PASSWORD });
const result = await register({
email: MOCK_NEW_EMAIL,
password: MOCK_PASSWORD,
});
expect(result.accessToken).toBe(MOCK_TOKEN);
expect(result.user).toEqual({ id: "2", email: "new@test.com" });
expect(result.user).toEqual(MOCK_NEW_USER);
});
});

View File

@@ -1,6 +1,7 @@
import { api } from "../../../api";
import type { AuthData, AuthResponse } from "../../../model/types/service";
import { REGISTER_API_ROUTE } from "./constants";
import { authHttpClient } from "../../config/authApi/authApi";
export const REGISTER_API_ROUTE = "auth/register";
/**
* Registers a new user with the given email and password.
@@ -9,5 +10,7 @@ import { REGISTER_API_ROUTE } from "./constants";
* @returns A promise that resolves to the authentication response.
*/
export function register(registerData: AuthData) {
return api.post(REGISTER_API_ROUTE, { json: registerData }).json<AuthResponse>();
return authHttpClient
.post(REGISTER_API_ROUTE, { json: registerData })
.json<AuthResponse>();
}

View File

@@ -1,12 +1,20 @@
import { useAuthStore } from "../../../model";
import { api as baseApi } from "shared/config";
// Extend base API with authentication hooks
export const api = baseApi.extend({
type TokenGetter = () => string | null | undefined;
class HttpClient {
private getToken: TokenGetter = () => null;
setTokenGetter(fn: TokenGetter) {
this.getToken = fn;
}
// Extend base API with authentication hooks
private instance = baseApi.extend({
hooks: {
beforeRequest: [
(request) => {
const token = useAuthStore.getState().accessToken;
const token = this.getToken();
if (token) {
request.headers.set("Authorization", `Bearer ${token}`);
@@ -22,4 +30,15 @@ export const api = baseApi.extend({
},
],
},
});
});
get = (url: string, options?: Parameters<typeof this.instance.get>[1]) => {
return this.instance.get(url, options);
};
post = (url: string, options?: Parameters<typeof this.instance.post>[1]) => {
return this.instance.post(url, options);
};
}
export const authHttpClient = new HttpClient();

View File

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

View File

@@ -3,8 +3,9 @@ import type { AuthStore, AuthStoreState } from "../../types/store";
import { login, logout, refresh, register } from "../../../api";
import { callApi } from "shared/utils";
import { UNEXPECTED_ERROR_MESSAGE } from "shared/config";
import { authHttpClient } from "../../../api/config/authApi/authApi";
const defaultStoreState: Readonly<AuthStoreState> = {
export const defaultStoreState: Readonly<AuthStoreState> = {
user: undefined,
status: "idle",
accessToken: undefined,
@@ -13,7 +14,7 @@ const defaultStoreState: Readonly<AuthStoreState> = {
export const useAuthStore = create<AuthStore>()((set) => ({
...defaultStoreState,
reset: () => set({ ...defaultStoreState }),
login: async (loginData) => {
set({ status: "loading" });
try {
@@ -108,3 +109,5 @@ export const useAuthStore = create<AuthStore>()((set) => ({
}
},
}));
authHttpClient.setTokenGetter(() => useAuthStore.getState().accessToken);

View File

@@ -21,13 +21,14 @@ export interface AuthStoreState {
error: ApiError | Error | null;
}
export type LoginAction = (data: AuthData) => void;
export type RegisterAction = (data: AuthData) => void;
export type LogoutAction = () => void;
export type RefreshAction = () => void;
export type ResetAction = () => void;
export type LoginAction = (data: AuthData) => Promise<void>;
export type RegisterAction = (data: AuthData) => Promise<void>;
export type LogoutAction = () => Promise<void>;
export type RefreshAction = () => Promise<void>;
export interface AuthStoreActions {
// Async actions
reset: ResetAction;
login: LoginAction;
register: RegisterAction;
logout: LogoutAction;