ilia/auth-remote-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: create separate shared store for auth token and refresh action

Browse Source
This commit is contained in:
Ilia Mashkov
2026-03-24 09:26:10 +03:00
parent fd5b50a6f2
commit 6a2a826a11
27 changed files with 221 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/auth/api/calls/index.ts
View File

@@ -1,4 +1,4 @@
export * from "./login";
export * from "./register";
export * from "./logout";
export * from "./refresh";
export * from "../../../../shared/api/calls/refresh";

2
src/features/auth/api/calls/login/login.mock.ts
View File

@@ -1,6 +1,6 @@
import { http, HttpResponse } from "msw";
import type { AuthData } from "../../../model/types/service";
import { BASE_URL } from "shared/config";
import { BASE_URL } from "shared/api";
import { LOGIN_API_ROUTE } from "./login";
import { MOCK_AUTH_RESPONSE, MOCK_EMAIL, MOCK_PASSWORD } from "../mocks";

8
src/features/auth/api/calls/login/login.spec.ts
View File

@@ -1,12 +1,8 @@
import { setupServer } from "msw/node";
import { login } from "./login";
import { loginMock } from "./login.mock";
import {
MOCK_EMAIL,
MOCK_EXISTING_USER,
MOCK_PASSWORD,
MOCK_TOKEN,
} from "../mocks";
import { MOCK_EMAIL, MOCK_EXISTING_USER, MOCK_PASSWORD } from "../mocks";
import { MOCK_TOKEN } from "shared/api";
const server = setupServer(loginMock);

2
src/features/auth/api/calls/logout/logout.mock.ts
View File

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

3
src/features/auth/api/calls/mocks.ts
View File

@@ -1,8 +1,7 @@
import type { User } from "entities/User";
import type { AuthResponse } from "../../model";
import { MOCK_TOKEN } from "shared/api";
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";

2
src/features/auth/api/calls/refresh/index.ts
View File

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

23
src/features/auth/api/calls/refresh/refresh.mock.ts
View File

@@ -1,23 +0,0 @@
import { http, HttpResponse } from "msw";
import { BASE_URL } from "shared/config";
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}`;
/**
* Msw interceptor. Mocks the refresh endpoint response.
* Validates the Authorization header — returns a fresh token on success, 401 on expired/missing session.
*/
export const refreshMock = http.post(REFRESH_URL, ({ request }) => {
const authHeader = request.headers.get("Authorization");
if (authHeader === `Bearer ${MOCK_TOKEN}`) {
return HttpResponse.json({
user: MOCK_EXISTING_USER,
accessToken: MOCK_FRESH_TOKEN,
});
}
return HttpResponse.json({ message: "Session expired" }, { status: 401 });
});

33
src/features/auth/api/calls/refresh/refresh.spec.ts
View File

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

8
src/features/auth/api/calls/refresh/refresh.ts
View File

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

4
src/features/auth/api/calls/register/register.mock.ts
View File

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

2
src/features/auth/api/calls/register/register.spec.ts
View File

@@ -6,8 +6,8 @@ import {
MOCK_NEW_EMAIL,
MOCK_NEW_USER,
MOCK_PASSWORD,
MOCK_TOKEN,
} from "../mocks";
import { MOCK_TOKEN } from "shared/api";
const server = setupServer(registerMock);

66
src/features/auth/api/config/authApi/authApi.ts
View File

@@ -1,44 +1,34 @@
import { api as baseApi } from "shared/config";
import { api as baseApi, useTokenStore } from "shared/api";
type TokenGetter = () => string | null | undefined;
export const authHttpClient = baseApi.extend({
hooks: {
beforeRequest: [
(request) => {
const token = useTokenStore.getState().accessToken;
class HttpClient {
private getToken: TokenGetter = () => null;
if (token) {
request.headers.set("Authorization", `Bearer ${token}`);
}
setTokenGetter(fn: TokenGetter) {
this.getToken = fn;
}
// Extend base API with authentication hooks
private instance = baseApi.extend({
hooks: {
beforeRequest: [
(request) => {
const token = this.getToken();
if (token) {
request.headers.set("Authorization", `Bearer ${token}`);
}
return request;
},
],
afterResponse: [
async (request, options, response) => {
// Refresh token logic
return request;
},
],
afterResponse: [
async (request, options, response) => {
if (response.status !== 401) {
return response;
},
],
},
});
}
get = (url: string, options?: Parameters<typeof this.instance.get>[1]) => {
return this.instance.get(url, options);
};
const { accessToken, refreshToken } = useTokenStore.getState();
if (!accessToken) return response;
post = (url: string, options?: Parameters<typeof this.instance.post>[1]) => {
return this.instance.post(url, options);
};
}
export const authHttpClient = new HttpClient();
try {
await refreshToken?.();
return authHttpClient(request); // beforeRequest picks up new token automatically
} catch {
return response;
}
},
],
},
});

38
src/features/auth/model/stores/authStore/authStore.spec.ts
View File

@@ -10,7 +10,6 @@ import {
MOCK_EMAIL,
MOCK_NEW_EMAIL,
MOCK_PASSWORD,
MOCK_TOKEN,
} from "../../../api/calls/mocks";
const server = setupServer(loginMock, registerMock, logoutMock, refreshMock);
@@ -26,7 +25,7 @@ describe("authStore", () => {
describe("reset", () => {
it("should reset the store to default state", () => {
useAuthStore.getState().reset();
expect(useAuthStore.getState()).toMatchObject({ ...defaultStoreState });
expect(useAuthStore.getState()).toMatchObject(defaultStoreState);
});
});
@@ -36,9 +35,8 @@ describe("authStore", () => {
.getState()
.login({ email: MOCK_EMAIL, password: MOCK_PASSWORD });
const { accessToken, user, status, error } = useAuthStore.getState();
const { user, status, error } = useAuthStore.getState();
expect(accessToken).toBeDefined();
expect(user).toBeDefined();
expect(status).toBe("authenticated");
expect(error).toBeNull();
@@ -62,9 +60,8 @@ describe("authStore", () => {
.getState()
.register({ email: MOCK_NEW_EMAIL, password: MOCK_PASSWORD });
const { accessToken, user, status, error } = useAuthStore.getState();
const { user, status, error } = useAuthStore.getState();
expect(accessToken).toBeDefined();
expect(user).toBeDefined();
expect(status).toBe("authenticated");
expect(error).toBeNull();
@@ -86,38 +83,11 @@ describe("authStore", () => {
it("should clear access token, user data, and update status after logout", async () => {
await useAuthStore.getState().logout();
const { accessToken, user, status, error } = useAuthStore.getState();
const { user, status, error } = useAuthStore.getState();
expect(accessToken).toBeUndefined();
expect(user).toBeUndefined();
expect(status).toBe("unauthenticated");
expect(error).toBeNull();
});
});
describe("refresh", () => {
it("should update access token and user data after successful refresh", async () => {
useAuthStore.setState({ accessToken: MOCK_TOKEN });
await useAuthStore.getState().refresh();
const { accessToken, user, status, error } = useAuthStore.getState();
expect(accessToken).toBeDefined();
expect(user).toBeDefined();
expect(status).toBe("authenticated");
expect(error).toBeNull();
});
it("should set error and update status if refresh fails", async () => {
useAuthStore.setState({ accessToken: "old_token" });
await useAuthStore.getState().refresh();
const { status, error } = useAuthStore.getState();
expect(status).toBe("unauthenticated");
expect(error).toBeDefined();
});
});
});

43
src/features/auth/model/stores/authStore/authStore.ts
View File

@@ -1,20 +1,18 @@
import { create } from "zustand";
import type { AuthStore, AuthStoreState } from "../../types/store";
import { login, logout, refresh, register } from "../../../api";
import { login, logout, register } from "../../../api";
import { callApi } from "shared/utils";
import { UNEXPECTED_ERROR_MESSAGE } from "shared/config";
import { authHttpClient } from "../../../api/config/authApi/authApi";
import { UNEXPECTED_ERROR_MESSAGE } from "shared/api";
export const defaultStoreState: Readonly<AuthStoreState> = {
user: undefined,
status: "idle",
accessToken: undefined,
error: null,
};
export const useAuthStore = create<AuthStore>()((set) => ({
...defaultStoreState,
reset: () => set({ ...defaultStoreState }),
reset: () => set(defaultStoreState),
login: async (loginData) => {
set({ status: "loading" });
try {
@@ -28,9 +26,10 @@ export const useAuthStore = create<AuthStore>()((set) => ({
set({
status: "authenticated",
user: responseData?.user,
accessToken: responseData?.accessToken,
error: null,
});
// useTokenStore.setState({ accessToken: responseData?.accessToken });
} catch (err) {
console.error(err);
set({
@@ -53,9 +52,10 @@ export const useAuthStore = create<AuthStore>()((set) => ({
set({
status: "authenticated",
user: responseData?.user,
accessToken: responseData?.accessToken,
error: null,
});
// useTokenStore.setState({ accessToken: responseData?.accessToken });
} catch (err) {
console.error(err);
set({
@@ -77,38 +77,13 @@ export const useAuthStore = create<AuthStore>()((set) => ({
set({
status: "unauthenticated",
user: undefined,
accessToken: undefined,
error: null,
});
// useTokenStore.setState({ accessToken: null });
} catch (err) {
console.error(err);
set({ error: new Error(UNEXPECTED_ERROR_MESSAGE) });
}
},
refresh: async () => {
set({ status: "loading" });
try {
const [responseData, refreshError] = await callApi(() => refresh());
if (refreshError) {
set({ status: "unauthenticated", error: refreshError });
return;
}
set({
status: "authenticated",
user: responseData?.user,
accessToken: responseData?.accessToken,
error: null,
});
} catch (err) {
console.error(err);
set({
status: "unauthenticated",
error: new Error(UNEXPECTED_ERROR_MESSAGE),
});
}
},
}));
authHttpClient.setTokenGetter(() => useAuthStore.getState().accessToken);

6
src/features/auth/model/types/store.ts
View File

@@ -11,10 +11,6 @@ export interface AuthStoreState {
* Authentication status
*/
status: AuthStatus;
/**
* Authentication token
*/
accessToken?: string;
/**
* Error data
*/
@@ -25,14 +21,12 @@ 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 {
reset: ResetAction;
login: LoginAction;
register: RegisterAction;
logout: LogoutAction;
refresh: RefreshAction;
}
export type AuthStore = AuthStoreState & AuthStoreActions;