auth/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@local/auth",
+  "version": "0.1.0",
+  "private": true,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}

auth/src/AuthPage.tsx

@@ -1,26 +1,49 @@
 import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { useAuth } from '../providers/Author';
-import { LoginProps } from '../types/props';
 
-export default function Login({
+export type AuthMode = "login" | "register";
+
+export interface AuthPageProps {
+  mode: AuthMode;
+  onBack(): void;
+  onSwitchMode(): void;
+  login(username: string, password: string): Promise<void>;
+  register(username: string, password: string): Promise<void>;
+  loading: boolean;
+  error: string | null;
+  currentUser: any;
+}
+
+export function AuthPage({
+  mode,
   onBack,
-  onRegister
+  onSwitchMode,
-}: LoginProps) {
+  login,
-  const { login, loading, error, currentUser } = useAuth();
+  register,
+  loading,
+  error,
+  currentUser,
+}: AuthPageProps) {
+
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
 
+  const isLogin = mode === "login";
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (isLogin) {
       await login(username, password);
+    } else {
+      await register(username, password);
+    }
   };
 
   // ✅ Auto-return if already logged in
   React.useEffect(() => {
     if (currentUser) onBack();
-  }, [currentUser]);
+  }, [currentUser, onBack]);
 
   return (
     <Box
@@ -39,11 +62,13 @@ export default function Login({
       </IconButton>
 
       <Typography variant="h4" fontWeight="bold" gutterBottom>
-        Sign In
+        {isLogin ? "Sign In" : "Create Account"}
       </Typography>
 
       <Typography variant="body2" color="text.secondary" gutterBottom>
-        Please log in to continue
+        {isLogin
+          ? "Please log in to continue"
+          : "Create an account to get started"}
       </Typography>
 
       <form onSubmit={handleSubmit}>
@@ -55,6 +80,7 @@ export default function Login({
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           required
+          autoFocus
         />
         <TextField
           fullWidth
@@ -80,7 +106,13 @@ export default function Login({
           sx={{ mt: 3 }}
           disabled={loading}
         >
-          {loading ? <CircularProgress size={24} color="inherit" /> : 'Login'}
+          {loading ? (
+            <CircularProgress size={24} color="inherit" />
+          ) : isLogin ? (
+            "Login"
+          ) : (
+            "Register"
+          )}
         </Button>
       </form>
 
@@ -90,15 +122,15 @@ export default function Login({
         align="center"
         sx={{ mt: 3 }}
       >
-        Don’t have an account?{' '}
+        {isLogin ? "Don’t have an account?" : "Already have an account?"}{' '}
         <Link
           component="button"
           underline="hover"
           color="primary"
-          onClick={onRegister}
+          onClick={onSwitchMode}
           sx={{ fontWeight: 500 }}
         >
-          Register
+          {isLogin ? "Register" : "Login"}
         </Link>
       </Typography>
     </Box>

auth/src/authClient.ts

@@ -0,0 +1,32 @@
+import { createApiClient } from "./axios";
+import { tokenStore } from "./token";
+
+// @ts-ignore
+const authApi = createApiClient(import.meta.env.VITE_AUTH_BASE_URL);
+
+export const authClient = {
+  async login(username: string, password: string) {
+    const res = await authApi.post("/login", { username, password });
+    const { access_token } = res.data;
+
+    if (!access_token) {
+      throw new Error("No access token returned");
+    }
+
+    tokenStore.set(access_token);
+    return this.getIdentity();
+  },
+
+  logout() {
+    tokenStore.clear();
+  },
+
+  async getIdentity() {
+    const res = await authApi.get("/me");
+    return res.data;
+  },
+
+  isAuthenticated() {
+    return !!tokenStore.get();
+  },
+};

auth/src/axios.ts

@@ -0,0 +1,35 @@
+import axios, { AxiosInstance } from "axios";
+import { tokenStore } from "./token";
+
+export function attachAuthInterceptors(client: AxiosInstance) {
+  client.interceptors.request.use((config) => {
+    const token = tokenStore.get();
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  });
+
+  client.interceptors.response.use(
+    (res) => res,
+    (error) => {
+      if (error.response?.status === 401) {
+        tokenStore.clear();
+      }
+      return Promise.reject(error);
+    }
+  );
+}
+
+/**
+ * Factory for app APIs that need auth
+ */
+export function createApiClient(baseURL: string): AxiosInstance {
+  const client = axios.create({
+    baseURL,
+    headers: { "Content-Type": "application/json" },
+  });
+
+  attachAuthInterceptors(client);
+  return client;
+}

auth/src/context.tsx

@@ -0,0 +1,111 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import axios from "axios";
+import { tokenStore } from "./token";
+import { attachAuthInterceptors } from "./axios";
+
+export interface AuthUser {
+  _id: string;
+  username: string;
+  [key: string]: any;
+}
+
+interface AuthContextModel {
+  currentUser: AuthUser | null;
+  token: string | null;
+  loading: boolean;
+  error: string | null;
+  login(username: string, password: string): Promise<void>;
+  register(username: string, password: string): Promise<void>;
+  logout(): void;
+}
+
+const AuthContext = createContext<AuthContextModel | undefined>(undefined);
+
+export function AuthProvider({
+  children,
+  authBaseUrl,
+  apiClient,
+}: {
+  children: React.ReactNode;
+  authBaseUrl: string;
+  apiClient: any; // your domain api client
+}) {
+  const [currentUser, setCurrentUser] = useState<AuthUser | null>(null);
+  const [token, setToken] = useState<string | null>(tokenStore.get());
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const auth = axios.create({
+    baseURL: authBaseUrl,
+    headers: { "Content-Type": "application/json" },
+  });
+
+  attachAuthInterceptors(auth);
+
+  const login = async (username: string, password: string) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const res = await auth.post("/login", { username, password });
+      const { access_token, user } = res.data;
+
+      tokenStore.set(access_token);
+      setToken(access_token);
+      setCurrentUser(user);
+    } catch (e: any) {
+      setError(e.response?.data?.detail ?? "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const register = async (username: string, password: string) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      await auth.post("/register", { username, password });
+      await apiClient.post("/authors", { name: null, avatar: null });
+    } catch (e: any) {
+      setError(e.response?.data?.detail ?? "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const logout = () => {
+    tokenStore.clear();
+    setToken(null);
+    setCurrentUser(null);
+  };
+
+  const fetchCurrentUser = async () => {
+    if (!token) return;
+    try {
+      const me = await auth.get("/me");
+      const author = await apiClient.get("/authors/me");
+      setCurrentUser({ ...me.data, ...author.data });
+    } catch {
+      logout();
+    }
+  };
+
+  useEffect(() => {
+    fetchCurrentUser();
+  }, [token]);
+
+  return (
+    <AuthContext.Provider
+      value={{ currentUser, token, loading, error, login, logout, register }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth(): AuthContextModel {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside AuthProvider");
+  return ctx;
+}

auth/src/index.ts

@@ -0,0 +1,5 @@
+export { AuthProvider, useAuth } from "./context";
+export { createApiClient } from "./axios";
+export { AuthPage } from "./AuthPage";
+export type { AuthMode } from "./AuthPage";
+export { tokenStore } from "./token"

auth/src/token.ts

@@ -0,0 +1,15 @@
+const TOKEN_KEY = "token";
+
+export const tokenStore = {
+  get(): string | null {
+    return localStorage.getItem(TOKEN_KEY);
+  },
+
+  set(token: string) {
+    localStorage.setItem(TOKEN_KEY, token);
+  },
+
+  clear() {
+    localStorage.removeItem(TOKEN_KEY);
+  },
+};

src/blog/Blog.tsx

@@ -10,8 +10,6 @@ import ArticleView from './components/Article/ArticleView';
 import ArticleEditor from './components/Article/ArticleEditor';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import Login from './components/Login';
-import Register from './components/Register';
 import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
@@ -19,25 +17,29 @@ import { View, useViewRouter } from "./types/views";
 import { ArticleModel, ArticlesModel } from "./types/models";
 import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
+import { AuthPage, AuthMode } from '../../auth/src';
+
 function HomeView({
   currentUser,
-  open_login,
+  open_auth,
   open_profile,
   open_create,
   articles,
-  openArticle
+  openArticle,
 }: any) {
   return (
     <>
-      <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2, gap: 1 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2, gap: 1 }}>
         {!currentUser ? (
-          <Button variant="outlined" onClick={open_login}>Login</Button>
+          <Button variant='outlined' onClick={() => open_auth('login')}>
+            Login
+          </Button>
         ) : (
           <>
-            <Button variant="outlined" onClick={open_profile}>
+            <Button variant='outlined' onClick={open_profile}>
               {currentUser.username}
             </Button>
-            <Button variant="contained" onClick={open_create}>
+            <Button variant='contained' onClick={open_create}>
               New Article
             </Button>
           </>
@@ -52,11 +54,13 @@ function HomeView({
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
-  const { currentUser } = useAuth();
+  const auth = useAuth();
+  const { currentUser } = auth;
 
   const [ui, setUI] = React.useState({
     selectedArticle: null as ArticleModel | null,
-    view: "home" as View,
+    view: 'home' as View,
+    authMode: 'login' as AuthMode,
   });
 
   useEffect(() => {
@@ -73,6 +77,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         setUI({
           selectedArticle: article,
           view: 'article',
+          authMode: 'login'
         });
       }
     }
@@ -85,7 +90,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
   } = useViewRouter(setUI);
 
   type RouterContext = {
-    ui: any;
+    ui: typeof ui;
     articles: ArticlesModel;
     currentUser: any;
     openArticle: (article: ArticleModel) => void;
@@ -97,20 +102,27 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     navigationMap?: Record<string, string>;
   };
 
+  // @ts-ignore
   const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
     home: {
       component: HomeView,
     },
 
-    login: {
+    auth: {
-      component: Login,
+      component: AuthPage,
-      navigationMap: {
+      extraProps: ({ ui }) => ({
-        open_register: 'onRegister',
+        mode: ui.authMode,
-      },
+        onSwitchMode: () =>
-    },
+          setUI((prev) => ({
-
+            ...prev,
-    register: {
+            authMode: prev.authMode === 'login' ? 'register' : 'login',
-      component: Register,
+          })),
+        login: auth.login,
+        register: auth.register,
+        loading: auth.loading,
+        error: auth.error,
+        currentUser: auth.currentUser,
+      }),
     },
 
     profile: {
@@ -123,6 +135,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         open_editor: 'onEdit',
       },
       extraProps: ({ ui, articles }) => ({
+        // @ts-ignore
         article: articles.readById(ui.selectedArticle._id),
       }) satisfies Partial<ArticleViewProps>,
     },
@@ -130,7 +143,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     editor: {
       component: ArticleEditor,
       extraProps: ({ ui, articles }) => ({
-        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id) : null,
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id as string) : null,
       }) satisfies Partial<ArticleEditorProps>,
     },
 
@@ -147,10 +160,15 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     const navigationMap= entry['navigationMap'] || {}
     const ViewComponent = entry.component;
 
-    const childNav = navigateToChildren(
+    const childNav = {
-      ui.view,
+      ...navigateToChildren(ui.view, navigationMap),
-      navigationMap
+      open_auth: (mode: AuthMode = 'login') =>
-    );
+        setUI((prev) => ({
+          ...prev,
+          view: 'auth',
+          authMode: mode,
+        })),
+    };
 
     const ctx: RouterContext = {
       ui,
@@ -234,7 +252,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
         {ui.view === 'home' && (
           <Box
-            component="footer"
+            component='footer'
             sx={{
               position: 'fixed',
               bottom: 0,

src/blog/components/Register.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { Box, TextField, Button, Typography, IconButton, CircularProgress, Alert, } from '@mui/material';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { useAuth } from '../providers/Author';
-import { RegisterProps } from '../types/props';
-
-export default function Register({
-  onBack
-}: RegisterProps) {
-  const { register, loading, error, currentUser } = useAuth();
-  const [username, setUsername] = React.useState('');
-  const [password1, setPassword1] = React.useState('');
-  const [password2, setPassword2] = React.useState('');
-  const [localError, setLocalError] = React.useState<string | null>(null);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLocalError(null);
-
-    // ✅ Local validation
-    if (password1 !== password2) {
-      setLocalError("Passwords don't match");
-      return;
-    }
-
-    if (password1.length < 6) {
-      setLocalError('Password must be at least 6 characters long');
-      return;
-    }
-
-    // ✅ Call backend
-    await register(username, password1);
-  };
-
-  if (currentUser) {
-    // ✅ if logged in, auto-return to the article list
-    onBack();
-    return null;
-  }
-
-  return (
-    <Box
-      sx={{
-        maxWidth: 400,
-        mx: 'auto',
-        mt: 8,
-        p: 4,
-        borderRadius: 3,
-        boxShadow: 3,
-        bgcolor: 'background.paper',
-      }}
-    >
-      <IconButton onClick={onBack} sx={{ mb: 2 }}>
-        <ArrowBackRoundedIcon />
-      </IconButton>
-
-      <Typography variant="h4" fontWeight="bold" gutterBottom>
-        Sign Up
-      </Typography>
-
-      <Typography variant="body2" color="text.secondary" gutterBottom>
-        Please sign up to continue
-      </Typography>
-
-      <form onSubmit={handleSubmit}>
-        <TextField
-          fullWidth
-          label="Username"
-          type="username"
-          margin="normal"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          required
-        />
-        <TextField
-          fullWidth
-          label="Password"
-          type="password"
-          margin="normal"
-          value={password1}
-          onChange={(e) => setPassword1(e.target.value)}
-          required
-        />
-        <TextField
-          fullWidth
-          label="Password"
-          type="password"
-          margin="normal"
-          value={password2}
-          onChange={(e) => setPassword2(e.target.value)}
-          required
-        />
-
-        {(localError || error) && (
-          <Alert severity="error" sx={{ mt: 2 }}>
-            {localError || error}
-          </Alert>
-        )}
-
-        <Button
-          fullWidth
-          type="submit"
-          variant="contained"
-          color="primary"
-          sx={{ mt: 3 }}
-          disabled={loading}
-        >
-          {loading ? <CircularProgress size={24} color="inherit" /> : 'Register'}
-        </Button>
-      </form>
-    </Box>
-  );
-}

src/blog/providers/Article.tsx

@@ -1,12 +1,12 @@
-import React, { createContext, useState, useContext, useEffect } from 'react';
+import React, { createContext, useState, useContext, useEffect } from "react";
-import { api } from '../utils/api';
+import { api } from "../utils/api";
 import {
   ArticleModel,
   ArticlesModel,
   createArticlesModelObject,
-} from '../types/models';
+} from "../types/models";
-import { ArticleContextModel } from '../types/contexts';
+import { ArticleContextModel } from "../types/contexts";
-import { useAuth } from './Author';
+import { useAuth } from "./Author";
 
 const ArticleContext = createContext<ArticleContextModel | undefined>(undefined);
 
@@ -14,7 +14,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
   const [articles, setArticles] = useState<ArticlesModel>(createArticlesModelObject());
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { token, currentUser } = useAuth();
+  const { currentUser } = useAuth();
 
   /** 🔹 Author IDs must be strings for API, so we normalize here */
   const normalizeArticleForApi = (article: Partial<ArticleModel>) => {
@@ -109,14 +109,8 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
 
   /** 🔹 Auto-fetch articles whenever user logs in/out */
   useEffect(() => {
-    // Always load once on mount
-    // If endpoint requires JWT, fallback safely
-    if (!token) {
-      fetchArticles().catch(() => setLoading(false)); // try anyway (handles both public/protected)
-    } else {
     fetchArticles();
-    }
+  }, [currentUser]); // refetch on login / logout
-  }, [token]);
 
   return (
     <ArticleContext.Provider value={{

src/blog/providers/Author.tsx

@@ -1,15 +1,15 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
+import React, { createContext, useState, useEffect, useContext } from "react";
-import { api, auth } from '../utils/api';
+import { api, auth } from "../utils/api";
-import { AuthorModel } from '../types/models';
+import { AuthorModel } from "../types/models";
-import { AuthContextModel } from '../types/contexts';
+import { AuthContextModel } from "../types/contexts";
+import { tokenStore } from "../../../auth/src";
 
 const AuthContext = createContext<AuthContextModel | undefined>(undefined);
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [currentUser, setCurrentUser] = useState<AuthorModel | null>(null);
   const [authors, setAuthors] = useState<AuthorModel[]>([]);
-  const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
+  const [loading, setLoading] = useState(false);
-  const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
   /** 🔹 Register new user */
@@ -21,7 +21,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       const res = await auth.post('/register', { username, password });
 
       // auto-login
-      // await login(username, password);
+      await login(username, password);
 
       // now create author
       await api.post('/authors', { name: null, avatar: null });
@@ -42,13 +42,15 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setError(null);
 
       const res = await auth.post('/login', { username, password });
-      const { access_token, user } = res.data;
+      const { access_token } = res.data;
 
-      if (access_token) {
+      if (!access_token) {
-        localStorage.setItem('token', access_token);
+        throw new Error("No access token returned");
-        setToken(access_token);
-        setCurrentUser(user);
       }
+
+      tokenStore.set(access_token);
+
+      await fetchCurrentUser();
     } catch (err: any) {
       console.error('Login failed:', err);
       setError(err.response?.data?.detail || 'Invalid credentials');
@@ -59,8 +61,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   /** 🔹 Logout and clear everything */
   const logout = () => {
-    localStorage.removeItem('token');
+    tokenStore.clear();
-    setToken(null);
     setCurrentUser(null);
     setAuthors([]);
   };
@@ -104,7 +105,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   /** 🔹 Auto-load current user if token exists */
   const fetchCurrentUser = async () => {
-    if (!token) return;
     try {
       const me = await auth.get('/me');
 
@@ -121,15 +121,16 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   /** 🔹 On mount, try to fetch user if token exists */
   useEffect(() => {
-    if (token) fetchCurrentUser();
+    if (tokenStore.get()) {
-  }, [token]);
+      fetchCurrentUser();
+    }
+  }, []);
 
   return (
     <AuthContext.Provider
       value={{
         currentUser,
         authors,
-        token,
         loading,
         error,
         login,

src/blog/types/contexts.ts

@@ -16,7 +16,6 @@ export interface ArticleContextModel {
 export interface AuthContextModel {
   currentUser: AuthorModel | null;
   authors: AuthorModel[];
-  token: string | null;
   loading: boolean;
   error: string | null;
   login: (username: string, password: string) => Promise<void>;

src/blog/types/props.ts

@@ -9,11 +9,6 @@ export interface LatestProps {
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
-export interface LoginProps {
-  onBack: () => void;
-  onRegister: () => void;
-}
-
 export interface MainContentProps {
   articles: ArticlesModel;
   onSelectArticle: (index: ArticleModel) => void;
@@ -23,10 +18,6 @@ export interface ProfileProps {
   onBack: () => void;
 }
 
-export interface RegisterProps {
-  onBack: () => void;
-}
-
 export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;

src/blog/types/views.ts

@@ -2,8 +2,7 @@ import {ArticleModel} from "./models";
 
 export type View =
   | "home"
-  | "login"
+  | "auth"
-  | "register"
   | "article"
   | "editor"
   | "profile"
@@ -17,25 +16,26 @@ export type ViewNode = {
 export const VIEW_TREE: Record<View, ViewNode> = {
   home: {
     parent: null,
-    children: ["login", "article", "profile", "create"],
+    children: ["auth", "article", "profile", "create"],
   },
-  login: {
+
+  auth: {
     parent: "home",
-    children: ["register"],
-  },
-  register: {
-    parent: "login",
   },
+
   article: {
     parent: "home",
     children: ["editor"],
   },
+
   editor: {
     parent: "article",
   },
+
   profile: {
     parent: "home",
   },
+
   create: {
     parent: "home",
   },
@@ -43,11 +43,15 @@ export const VIEW_TREE: Record<View, ViewNode> = {
 
 export const VIEW_URL: Record<View, (ui?: any) => string> = {
   home: () => "/",
-  login: () => "/login",
+
-  register: () => "/register",
+  auth: () => "/auth",
+
   profile: () => "/profile",
+
   create: () => "/create",
+
   article: (ui) => `/articles/${ui.selectedArticle._id ?? ""}`,
+
   editor: (ui) => `/articles/${ui.selectedArticle._id ?? ""}/edit`,
 };
 

src/blog/utils/api.ts

@@ -1,53 +1,19 @@
-// src/utils/api.ts
+import { createApiClient } from "../../../auth/src";
-import axios from 'axios';
 
 const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
 const API_BASE = import.meta.env.VITE_API_BASE_URL;
 
-//------------------------------------------------------
+/**
-// COMMON TOKEN ATTACHMENT LOGIC
+ * Auth service client
-//------------------------------------------------------
+ * - login
-const attachToken = (config: any) => {
+ * - register
-  const token = localStorage.getItem('token');
+ * - me
-  if (token) {
+ * - logout
-    config.headers.Authorization = `Bearer ${token}`;
+ * - introspect
-  }
+ */
-  return config;
+export const auth = createApiClient(AUTH_BASE);
-};
 
-const handleAuthError = (error: any) => {
+/**
-  if (error.response?.status === 401) {
+ * Main application API (blog, articles, etc.)
-    console.warn('Token expired or invalid. Logging out...');
+ */
-    localStorage.removeItem('token');
+export const api = createApiClient(API_BASE);
-    // Optional: eventBus, redirect, logout callback
-  }
-  return Promise.reject(error);
-};
-
-//------------------------------------------------------
-// AUTH SERVICE CLIENT
-//------------------------------------------------------
-export const auth = axios.create({
-  baseURL: AUTH_BASE,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-//------------------------------------------------------
-// BLOG SERVICE CLIENT
-//------------------------------------------------------
-export const api = axios.create({
-  baseURL: API_BASE,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-// Attach token + 401 handling
-api.interceptors.request.use(attachToken);
-api.interceptors.response.use((res) => res, handleAuthError);
-
-// Auth service ALSO needs token for /me, /logout, /introspect
-auth.interceptors.request.use(attachToken);
-auth.interceptors.response.use((res) => res, handleAuthError);