bumped up to 0.3.2 for auth package changes

Reviewed-on: #2
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

.drone.yml

@@ -66,6 +66,8 @@ steps:
     environment:
       API_BASE_URL:
         from_secret: API_BASE_URL
+      AUTH_BASE_URL:
+        from_secret: AUTH_BASE_URL
     volumes:
       - name: dockersock
         path: /var/run/docker.sock
@@ -76,6 +78,7 @@ steps:
       - |
         docker build --network=host \
         --build-arg VITE_API_BASE_URL="$API_BASE_URL" \
+        --build-arg VITE_AUTH_BASE_URL="$AUTH_BASE_URL" \
         -t apps/blog:$IMAGE_TAG \
         -t apps/blog:latest \
         /drone/src

Dockerfile

@@ -15,7 +15,8 @@ COPY . .
 
 # Build the app
 ARG VITE_API_BASE_URL
-RUN VITE_API_BASE_URL=$VITE_API_BASE_URL npm run build
+ARG VITE_AUTH_BASE_URL
+RUN VITE_API_BASE_URL=$VITE_API_BASE_URL VITE_AUTH_BASE_URL=$VITE_AUTH_BASE_URL npm run build
 
 # Stage 2: Static file server (BusyBox)
 FROM busybox:latest

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,27 +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';
 
-interface LoginProps {
+export type AuthMode = "login" | "register";
-  onBack: () => void;
+
-  onRegister: () => void;
+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 default function Login({ onBack, onRegister }: LoginProps) {
+export function AuthPage({
-  const { login, loading, error, currentUser } = useAuth();
+  mode,
+  onBack,
+  onSwitchMode,
+  login,
+  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();
-    await login(username, password);
+    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
@@ -40,11 +62,13 @@ export default function Login({ onBack, onRegister }: LoginProps) {
       </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}>
@@ -56,6 +80,7 @@ export default function Login({ onBack, onRegister }: LoginProps) {
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           required
+          autoFocus
         />
         <TextField
           fullWidth
@@ -81,7 +106,13 @@ export default function Login({ onBack, onRegister }: LoginProps) {
           sx={{ mt: 3 }}
           disabled={loading}
         >
-          {loading ? <CircularProgress size={24} color="inherit" /> : 'Login'}
+          {loading ? (
+            <CircularProgress size={24} color="inherit" />
+          ) : isLogin ? (
+            "Login"
+          ) : (
+            "Register"
+          )}
         </Button>
       </form>
 
@@ -91,15 +122,15 @@ export default function Login({ onBack, onRegister }: LoginProps) {
         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/contexts.tsx

@@ -0,0 +1,97 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { tokenStore } from "./token";
+import { createApiClient } from "./axios";
+import { AuthUser } from "./models";
+
+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,
+}: {
+  children: React.ReactNode;
+  authBaseUrl: string;
+}) {
+  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 = createApiClient(authBaseUrl);
+
+  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 login(username, password);
+    } 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");
+      setCurrentUser({ ...me.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,6 @@
+export { AuthProvider, useAuth } from "./contexts";
+export { createApiClient } from "./axios";
+export { AuthPage } from "./AuthPage";
+export type { AuthUser } from "./models";
+export type { AuthMode } from "./AuthPage";
+export { tokenStore } from "./token"

auth/src/models.ts

@@ -0,0 +1,11 @@
+export interface AuthUser {
+  // meta fields
+  _id?: string | null;
+  created_at: string;
+  updated_at: string;
+
+  // model fields
+  username: string;
+  email: string;
+  is_active: boolean;
+}

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);
+  },
+};

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.4",
+  "version": "0.3.2",
   "private": true,
   "scripts": {
     "dev": "vite",

src/blog/Blog.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
@@ -9,27 +10,36 @@ 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';
+import { useAuth as useAuthor } from './providers/Author';
 import { View, useViewRouter } from "./types/views";
-import { ArticleModel } from "./types/models";
+import { ArticleModel, ArticlesModel } from "./types/models";
 import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
-function HomeView({ currentUser, open_login, open_profile, open_create, articles, openArticle }: any) {
+import { useAuth, AuthPage, AuthMode } from '../../auth/src';
+
+function HomeView({
+  currentUser,
+  open_auth,
+  open_profile,
+  open_create,
+  articles,
+  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>
           </>
@@ -44,13 +54,35 @@ function HomeView({ currentUser, open_login, open_profile, open_create, articles
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
-  const { currentUser } = useAuth();
+  const auth = useAuth();
+  const { currentUser } = useAuthor();
 
   const [ui, setUI] = React.useState({
-    selectedArticle: null as number | null,
+    selectedArticle: null as ArticleModel | null,
-    view: "home" as View,
+    view: 'home' as View,
+    authMode: 'login' as AuthMode,
   });
 
+  useEffect(() => {
+    if (loading) return;
+
+    const path = window.location.pathname;
+    const parts = path.split('/').filter(Boolean);
+
+    if (parts[0] === 'articles' && parts[1]) {
+      const id = parts[1];
+      const article = articles.readById(id);
+
+      if (article) {
+        setUI({
+          selectedArticle: article,
+          view: 'article',
+          authMode: 'login'
+        });
+      }
+    }
+  }, [loading]);
+
   const {
     goBack,
     navigateToChildren,
@@ -58,28 +90,39 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
   } = useViewRouter(setUI);
 
   type RouterContext = {
-    ui: any;
+    ui: typeof ui;
-    articles: ArticleModel[];
+    articles: ArticlesModel;
     currentUser: any;
-    openArticle: (index: number) => void;
+    openArticle: (article: ArticleModel) => void;
   };
 
   type ViewComponentEntry<P> = {
     component: React.ComponentType<P>;
     extraProps?: (ctx: RouterContext) => Partial<P>;
+    navigationMap?: Record<string, string>;
   };
 
+  // @ts-ignore
   const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
     home: {
       component: HomeView,
     },
 
-    login: {
+    auth: {
-      component: Login,
+      component: AuthPage,
-    },
+      extraProps: ({ ui }) => ({
-
+        mode: ui.authMode,
-    register: {
+        onSwitchMode: () =>
-      component: Register,
+          setUI((prev) => ({
+            ...prev,
+            authMode: prev.authMode === 'login' ? 'register' : 'login',
+          })),
+        login: auth.login,
+        register: auth.register,
+        loading: auth.loading,
+        error: auth.error,
+        currentUser: currentUser,
+      }),
     },
 
     profile: {
@@ -88,15 +131,19 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
     article: {
       component: ArticleView,
+      navigationMap: {
+        open_editor: 'onEdit',
+      },
       extraProps: ({ ui, articles }) => ({
-        article: articles[ui.selectedArticle!],
+        // @ts-ignore
+        article: articles.readById(ui.selectedArticle._id),
       }) satisfies Partial<ArticleViewProps>,
     },
 
     editor: {
       component: ArticleEditor,
       extraProps: ({ ui, articles }) => ({
-        article: ui.selectedArticle !== null ? articles[ui.selectedArticle] : null,
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id as string) : null,
       }) satisfies Partial<ArticleEditorProps>,
     },
 
@@ -110,9 +157,18 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
   const renderView = () => {
     const entry = VIEW_COMPONENTS[ui.view];
+    const navigationMap= entry['navigationMap'] || {}
     const ViewComponent = entry.component;
 
-    const childNav = navigateToChildren(ui.view);
+    const childNav = {
+      ...navigateToChildren(ui.view, navigationMap),
+      open_auth: (mode: AuthMode = 'login') =>
+        setUI((prev) => ({
+          ...prev,
+          view: 'auth',
+          authMode: mode,
+        })),
+    };
 
     const ctx: RouterContext = {
       ui,
@@ -196,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/Article/ArticleView.tsx

@@ -28,11 +28,10 @@ const CoverImage = styled('img')({
 export default function ArticleView({
   article,
   onBack,
-  open_editor,
+  onEdit,
 }: ArticleViewProps) {
 
   const { currentUser } = useAuth();
-  const onEdit = open_editor;
 
   return (
     <ArticleContainer>

src/blog/components/ArticleCards/ArticleCardSize12.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize12({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardSize2.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize2({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize4({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardSize6.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize6({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/Latest.tsx

@@ -1,99 +1,19 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import { LatestProps } from "../types/props";
+import { StyledTypography, TitleTypography } from "../types/styles";
+import { ArticleMeta } from "./ArticleMeta";
 import Fade from '@mui/material/Fade';
 
-
+export default function Latest({
-const StyledTypography = styled(Typography)({
+  articles,
-  display: '-webkit-box',
+  onSelectArticle,
-  WebkitBoxOrient: 'vertical',
+  onLoadMore
-  WebkitLineClamp: 2,
+}: LatestProps) {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-const TitleTypography = styled(Typography)(({ theme }) => ({
-  position: 'relative',
-  textDecoration: 'none',
-  '&:hover': { cursor: 'pointer' },
-  '& .arrow': {
-    visibility: 'hidden',
-    position: 'absolute',
-    right: 0,
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '&:hover .arrow': {
-    visibility: 'visible',
-    opacity: 0.7,
-  },
-  '&:focus-visible': {
-    outline: '3px solid',
-    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
-    outlineOffset: '3px',
-    borderRadius: '8px',
-  },
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    width: 0,
-    height: '1px',
-    bottom: 0,
-    left: 0,
-    backgroundColor: (theme.vars || theme).palette.text.primary,
-    opacity: 0.3,
-    transition: 'width 0.3s ease, opacity 0.3s ease',
-  },
-  '&:hover::before': {
-    width: '100%',
-  },
-}));
-
-function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <Box
-        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
-      >
-        <AvatarGroup max={3}>
-          {authors.map((author, index) => (
-            <Avatar
-              key={index}
-              alt={author.name}
-              src={(
-                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
-                "/" +
-                (author.avatar?.replace(/^\/+/, "") || "")
-              )}
-              sx={{ width: 24, height: 24 }}
-            />
-          ))}
-        </AvatarGroup>
-        <Typography variant="caption">
-          {authors.map((a) => a.name).join(', ')}
-        </Typography>
-      </Box>
-      <Typography variant="caption">Recently Updated</Typography>
-    </Box>
-  );
-}
-
-export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
   const [animating, setAnimating] = React.useState(false);
@@ -182,7 +102,7 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
                   {article.description}
                 </StyledTypography>
 
-                <Author authors={article.authors} />
+                <ArticleMeta article={article} />
               </Box>
             </Fade>
           </Grid>

src/blog/components/MainContent.tsx

@@ -9,7 +9,8 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
-import { ArticleModel } from "../types/models";
+import {ArticlesModel, createArticlesModelObject} from "../types/models";
+import { MainContentProps } from "../types/props";
 import ArticleCardsGrid from "./ArticleCards/ArticleCardsGrid";
 
 export function Search() {
@@ -36,12 +37,9 @@ export function Search() {
 export default function MainContent({
   articles,
   onSelectArticle,
-}: {
+}: MainContentProps) {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
-}) {
 
-  const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
+  const [visibleArticles, setVisibleArticles] = React.useState<ArticlesModel>(articles);
   const [activeTag, setActiveTag] = React.useState<string>('all');
 
   const filterArticlesByTag = (tag: string) => {
@@ -60,11 +58,11 @@ export default function MainContent({
     }
 
     // 🔵 Filter by selected tag
-    const filtered = articles.filter((article) => article.tag === tag);
+    const filtered = articles.articlesList.filter((article) => article.tag === tag);
     console.log('👀 All Articles:', articles);
     console.log(`👀 Filtered (${tag}):`, filtered);
 
-    setVisibleArticles(filtered);
+    setVisibleArticles(createArticlesModelObject(filtered));
     setActiveTag(tag);
   };
 

src/blog/components/Profile.tsx

@@ -9,16 +9,18 @@ import {
   Alert,
 } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { useAuth } from '../providers/Author';
+import { useAuth as useAuthor } from '../providers/Author';
+import { useAuth } from '../../../auth/src';
 import { useUpload } from "../providers/Upload";
 import ImageUploadField from './ImageUploadField';
+import { ProfileProps } from '../types/props';
 
-interface ProfileProps {
+export default function Profile({
-  onBack: () => void;
+  onBack
-}
+}: ProfileProps) {
+  const { logout } = useAuth();
+  const { currentUser, updateProfile, loading, error } = useAuthor();
 
-export default function Profile({ onBack }: ProfileProps) {
-  const { currentUser, loading, error, logout, updateProfile } = useAuth();
   const { uploadFile } = useUpload();
   const [formData, setFormData] = React.useState({
     username: currentUser?.username || '',
@@ -134,6 +136,7 @@ export default function Profile({ onBack }: ProfileProps) {
         label="Username"
         name="username"
         margin="normal"
+        disabled={true}
         value={formData.username}
         onChange={handleChange}
       />

src/blog/components/Register.tsx

@@ -1,114 +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';
-
-interface RegisterProps {
-  onBack: () => void;
-}
-
-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,29 +1,20 @@
-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 } from '../types/models';
+import {
-import { ArticleContextModel } from '../types/contexts';
+  ArticleModel,
-import { useAuth } from './Author';
+  ArticlesModel,
+  createArticlesModelObject,
+} from "../types/models";
+import { ArticleContextModel } from "../types/contexts";
+import { useAuth } from "./Author";
 
 const ArticleContext = createContext<ArticleContextModel | undefined>(undefined);
 
 export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [articles, setArticles] = useState<ArticleModel[]>([]);
+  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();
-
-  const upsertArticleInList = (updated: ArticleModel) => {
-    setArticles(prev => {
-      const exists = prev.some(a => a._id === updated._id);
-      if (exists) {
-        // UPDATE → replace item
-        return prev.map(a => (a._id === updated._id ? updated : a));
-      } else {
-        // CREATE → append to top
-        return [updated, ...prev];
-      }
-    });
-  };
 
   /** 🔹 Author IDs must be strings for API, so we normalize here */
   const normalizeArticleForApi = (article: Partial<ArticleModel>) => {
@@ -51,7 +42,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
 
       const res = await api.get<ArticleModel[]>('/articles', { params: { skip: 0, limit: 100 } });
       const formatted = res.data.map((a) => ({ ...a, id: a._id || undefined }));
-      setArticles(formatted);
+      setArticles(prev => prev.refresh(formatted));
     } catch (err: any) {
       console.error('Failed to fetch articles:', err);
       setError(err.response?.data?.detail || 'Failed to fetch articles');
@@ -77,7 +68,10 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       setError(null);
 
       const res = await api.put<ArticleModel>(`/articles/${articleData._id}`, normalizedArticleData);
-      upsertArticleInList(res.data);
+      setArticles(prev => {
+        prev.update(res.data);
+        return { ...prev };
+      });
       return res.data;
     } catch (err: any) {
       console.error('Article update failed:', err);
@@ -100,7 +94,10 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       setError(null);
 
       const res = await api.post<ArticleModel>(`/articles`, normalizedArticleData);
-      upsertArticleInList(res.data);
+      setArticles(prev => {
+        prev.create(res.data);
+        return { ...prev };
+      });
       return res.data;
     } catch (err: any) {
       console.error('Article create failed:', err);
@@ -112,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
+    fetchArticles();
-    // If endpoint requires JWT, fallback safely
+  }, [currentUser]); // refetch on login / logout
-    if (!token) {
-      fetchArticles().catch(() => setLoading(false)); // try anyway (handles both public/protected)
-    } else {
-      fetchArticles();
-    }
-  }, [token]);
 
   return (
     <ArticleContext.Provider value={{

src/blog/providers/Author.tsx

@@ -1,63 +1,50 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
+import React, { createContext, useState, useEffect, useContext } from "react";
-import { api } from '../utils/api';
+import { api } from "../utils/api";
-import { AuthorModel } from '../types/models';
+import { AuthorModel } from "../types/models";
-import { AuthContextModel } from '../types/contexts';
+import { AuthContextModel } from "../types/contexts";
+import { useAuth as useBaseAuth } from "../../../auth/src";
 
 const AuthContext = createContext<AuthContextModel | undefined>(undefined);
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { currentUser: authUser, logout } = useBaseAuth();
   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 */
+  /**
-  const register = async (username: string, password: string) => {
+   * Hydrate application-level currentUser
+   */
+  const hydrateCurrentUser = async () => {
+    if (!authUser) return;
+
     try {
       setLoading(true);
       setError(null);
 
-      const res = await api.post('/auth/register', { username, password });
+      const res = await api.get<AuthorModel>("/authors/me");
-      return res.data;
+
-    } catch (err: any) {
+      /**
-      console.error('Registration failed:', err);
+       * Explicit precedence:
-      setError(err.response?.data?.detail || 'Registration failed');
+       * Auth service is source of truth for inherited fields
+       */
+      const fullUser: AuthorModel = {
+        ...res.data,
+        username: authUser.username,
+        email: authUser.email,
+        is_active: authUser.is_active,
+      };
+
+      setCurrentUser(fullUser);
+    } catch (err) {
+      console.error("Failed to hydrate current user:", err);
+      logout();
     } finally {
       setLoading(false);
     }
   };
 
-  /** 🔹 Login and store JWT token */
-  const login = async (username: string, password: string) => {
-    try {
-      setLoading(true);
-      setError(null);
-
-      const res = await api.post('/auth/login', { username, password });
-      const { access_token, user } = res.data;
-
-      if (access_token) {
-        localStorage.setItem('token', access_token);
-        setToken(access_token);
-        setCurrentUser(user);
-      }
-    } catch (err: any) {
-      console.error('Login failed:', err);
-      setError(err.response?.data?.detail || 'Invalid credentials');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  /** 🔹 Logout and clear everything */
-  const logout = () => {
-    localStorage.removeItem('token');
-    setToken(null);
-    setCurrentUser(null);
-    setAuthors([]);
-  };
-
   /** 🔹 Fetch all authors (JWT handled by api interceptor) */
   const refreshAuthors = async () => {
     try {
@@ -95,39 +82,27 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-  /** 🔹 Auto-load current user if token exists */
+  /**
-  const fetchCurrentUser = async () => {
+   * React strictly to auth lifecycle
-    if (!token) return;
+   */
-    try {
-      const me = await api.get<{ _id: string; username: string; email: string }>('/auth/me');
-
-      const author = await api.get<AuthorModel>(`/authors/${me.data._id}`);
-
-      const fullUser = { ...me.data, ...author.data };
-
-      setCurrentUser(fullUser);
-    } catch (err) {
-      console.error('Failed to fetch current user:', err);
-      logout();
-    }
-  };
-
-  /** 🔹 On mount, try to fetch user if token exists */
   useEffect(() => {
-    if (token) fetchCurrentUser();
+    if (authUser) {
-  }, [token]);
+      hydrateCurrentUser();
+    } else {
+      setCurrentUser(null);
+      setAuthors([]);
+      setError(null);
+    }
+  }, [authUser]);
 
   return (
     <AuthContext.Provider
       value={{
         currentUser,
         authors,
-        token,
         loading,
         error,
-        login,
+
-        logout,
-        register,
         refreshAuthors,
         updateProfile,
       }}

src/blog/types/contexts.ts

@@ -1,23 +1,24 @@
-import { ArticleModel, AuthorModel } from "./models";
+import {
+  ArticleModel,
+  ArticlesModel,
+  AuthorModel
+} from "./models";
 
 export interface ArticleContextModel {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   loading: boolean;
   error: string | null;
   refreshArticles: () => Promise<void>;
-  updateArticle: (user: ArticleModel) => Promise<ArticleModel | void>;
+  updateArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
-  createArticle: (user: ArticleModel) => Promise<ArticleModel | void>;
+  createArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
 }
 
 export interface AuthContextModel {
   currentUser: AuthorModel | null;
   authors: AuthorModel[];
-  token: string | null;
   loading: boolean;
   error: string | null;
-  login: (username: string, password: string) => Promise<void>;
+
-  register: (username: string, password: string) => Promise<void>;
-  logout: () => void;
   refreshAuthors: () => Promise<void>;
   updateProfile: (user: AuthorModel) => Promise<AuthorModel | void>;
 }

src/blog/types/models.ts

@@ -1,15 +1,19 @@
-export interface AuthorModel {
+import {
+  createInList, readInList, updateInList, deleteInList,
+  createById, readById, updateById, deleteById
+} from "../utils/articles";
+import { AuthUser } from "../../../auth/src";
+
+
+export interface AuthorModel extends AuthUser {
   // meta fields
   _id?: string | null;
   created_at: string;
   updated_at: string;
 
   // model fields
-  username: string;
   name: string;
-  email: string;
   avatar: string;
-  is_active: boolean;
 }
 
 export interface ArticleModel {
@@ -28,3 +32,82 @@ export interface ArticleModel {
   // ref fields
   authors: AuthorModel[];
 }
+
+export interface ArticlesModel {
+  articlesList: ArticleModel[];
+  articlesById: Record<string, ArticleModel>;
+  // articlesByTag: Record<string, ArticleModel[]>;
+  // articlesByAuthor: Record<string, ArticleModel[]>;
+
+  length: number;
+  slice(start: number, end?: number): ArticleModel[];
+
+  refresh(list: ArticleModel[]): ArticlesModel;
+  create(a: ArticleModel): ArticlesModel;
+  readByIndex(index: number): ArticleModel | undefined;
+  readById(id: string): ArticleModel | undefined;
+  update(a: ArticleModel): ArticlesModel;
+  delete(id: string): ArticlesModel;
+}
+
+// ---------- FACTORY ----------
+export function createArticlesModelObject(
+  articles: ArticleModel[] = []
+): ArticlesModel {
+  const initialMap: Record<string, ArticleModel> = {};
+  for (const a of articles) {
+    if (a._id) initialMap[a._id] = a;
+  }
+
+  return {
+    articlesList: articles,
+    articlesById: initialMap,
+
+    // --- computed property ---
+    get length() {
+      return this.articlesList.length;
+    },
+
+    // --- array-like slice ---
+    slice(start: number, end?: number) {
+      return this.articlesList.slice(start, end);
+    },
+
+    refresh(list) {
+      this.articlesList = list;
+
+      const map: Record<string, ArticleModel> = {};
+      for (const a of list) {
+        if (a._id) map[a._id] = a;
+      }
+      this.articlesById = map;
+      return this;
+    },
+
+    create(a) {
+      this.articlesList = createInList(this.articlesList, a);
+      this.articlesById = createById(this.articlesById, a);
+      return this;
+    },
+
+    readByIndex(index) {
+      return readInList(this.articlesList, index);
+    },
+
+    readById(id) {
+      return readById(this.articlesById, id);
+    },
+
+    update(a) {
+      this.articlesList = updateInList(this.articlesList, a);
+      this.articlesById = updateById(this.articlesById, a);
+      return this;
+    },
+
+    delete(id) {
+      this.articlesList = deleteInList(this.articlesList, id);
+      this.articlesById = deleteById(this.articlesById, id);
+      return this;
+    }
+  };
+}

src/blog/types/props.ts

@@ -1,18 +1,29 @@
-import { ArticleModel } from "./models";
+import {
+  ArticleModel,
+  ArticlesModel,
+} from "./models";
 
 export interface LatestProps {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   onSelectArticle?: (index: number) => void;
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
+export interface MainContentProps {
+  articles: ArticlesModel;
+  onSelectArticle: (index: ArticleModel) => void;
+}
+
+export interface ProfileProps {
+  onBack: () => void;
+}
+
 export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;
-  open_editor: () => void;
+  onEdit: () => void;
 }
 
-
 export interface ArticleEditorProps {
   article?: ArticleModel | null;
   onBack: () => void;
@@ -26,14 +37,14 @@ export interface ArticleCardProps {
   article: ArticleModel;
   index: number;
   focusedCardIndex: number | null;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   onFocus: (index: number) => void;
   onBlur: () => void;
 }
 
 export interface ArticleGridProps {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   xs?: number;  // default 12 for mobile full-width
   md12?: number, // default 12 (full-width)
   md6?: number; // default 6 (half-width)

src/blog/types/styles.ts

@@ -38,3 +38,40 @@ export const StyledTypography = styled(Typography)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
+
+export const TitleTypography = styled(Typography)(({ theme }) => ({
+  position: 'relative',
+  textDecoration: 'none',
+  '&:hover': { cursor: 'pointer' },
+  '& .arrow': {
+    visibility: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  '&:hover .arrow': {
+    visibility: 'visible',
+    opacity: 0.7,
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '3px',
+    borderRadius: '8px',
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: '1px',
+    bottom: 0,
+    left: 0,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
+    opacity: 0.3,
+    transition: 'width 0.3s ease, opacity 0.3s ease',
+  },
+  '&:hover::before': {
+    width: '100%',
+  },
+}));

src/blog/types/views.ts

@@ -1,7 +1,8 @@
+import { ArticleModel } from "./models";
+
 export type View =
   | "home"
-  | "login"
+  | "auth"
-  | "register"
   | "article"
   | "editor"
   | "profile"
@@ -15,33 +16,60 @@ 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",
   },
 };
 
+export const VIEW_URL: Record<View, (ui?: any) => string> = {
+  home: () => "/",
+
+  auth: () => "/auth",
+
+  profile: () => "/profile",
+
+  create: () => "/create",
+
+  article: (ui) => `/articles/${ui.selectedArticle._id ?? ""}`,
+
+  editor: (ui) => `/articles/${ui.selectedArticle._id ?? ""}/edit`,
+};
+
 export function useViewRouter(setUI: any) {
-  const navigate = (view: View) => {
+  const navigate = (
-    setUI((prev: any) => ({ ...prev, view }));
+    view: View,
+    nextState?: any
+  ) => {
+    setUI((prev: any) => {
+      const newState = { ...prev, ...nextState, view };
+
+      // update URL
+      const url = VIEW_URL[view](newState);
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
@@ -51,18 +79,35 @@ export function useViewRouter(setUI: any) {
     if (parent) navigate(parent);
   };
 
-  const openArticle = (i: number) => {
+  const openArticle = (article: ArticleModel) => {
-    setUI({ selectedArticle: i, view: "article" });
+    setUI((prev: any) => {
+      const newState = {
+        ...prev,
+        selectedArticle: article,
+        view: "article",
+      };
+
+      const url = `/articles/${article._id}`;
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   // auto child navigators from children[]
-  const navigateToChildren = (view: View) => {
+  const navigateToChildren = (
+    view: View,
+    navigationMap?: Record<string, string>,
+  ) => {
     const node = VIEW_TREE[view];
     const funcs: Record<string, () => void> = {};
 
     node.children?.forEach((child) => {
-      funcs[`open_${child}`] = () => navigate(child);
+      const funcName = `open_${child}`;
+      const customFuncName = navigationMap?.[funcName];
+      funcs[funcName] = () => navigate(child);
+      if (customFuncName) funcs[customFuncName] = () => navigate(child);
     });
 
     return funcs;

src/blog/utils/api.ts

@@ -1,33 +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;
 
-export const api = axios.create({
+/**
-  baseURL: API_BASE,
+ * Auth service client
-  headers: {
+ * - login
-    'Content-Type': 'application/json',
+ * - register
-  },
+ * - me
-});
+ * - logout
+ * - introspect
+ */
+export const auth = createApiClient(AUTH_BASE);
 
-// 🔹 Attach token from localStorage before each request
+/**
-api.interceptors.request.use((config) => {
+ * Main application API (blog, articles, etc.)
-  const token = localStorage.getItem('token');
+ */
-  if (token) {
+export const api = createApiClient(API_BASE);
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
-// 🔹 Handle expired or invalid tokens globally
-api.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    if (error.response?.status === 401) {
-      console.warn('Token expired or invalid. Logging out...');
-      localStorage.removeItem('token');
-      // Optionally: trigger a redirect or event
-    }
-    return Promise.reject(error);
-  }
-);

src/blog/utils/articles.ts

@@ -0,0 +1,74 @@
+import {
+  ArticleModel,
+} from "../types/models";
+
+export function createInList(list: ArticleModel[], a: ArticleModel) {
+  return [...list, a];
+}
+
+export function readInList(list: ArticleModel[], index: number) {
+  if (index < 0 || index >= list.length) {
+    // Soft fallback
+    return undefined;
+  }
+  return list[index];
+}
+
+export function updateInList(list: ArticleModel[], a: ArticleModel) {
+  return list.map(x => (x._id === a._id ? a : x));
+}
+
+export function deleteInList(list: ArticleModel[], id: string) {
+  return list.filter(x => x._id !== id);
+}
+
+// Map helpers
+export function createById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Soft mode: ignore create, return unchanged
+    return map;
+  }
+
+  if (map[a._id]) {
+    // Soft mode: do not replace existing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function readById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  if (!id) return undefined;
+  return map[id];
+}
+
+export function updateById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Cannot update without ID
+    return map;
+  }
+
+  if (!map[a._id]) {
+    // ID does not exist → soft mode: do nothing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function deleteById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  const { [id]: _, ...rest } = map;
+  return rest;
+}

src/main.jsx

@@ -2,20 +2,22 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import Blog from './blog/Blog';
 import { ArticleProvider } from './blog/providers/Article';
-import { AuthProvider } from './blog/providers/Author';
+import { AuthProvider as AuthorProvider } from './blog/providers/Author';
 import { UploadProvider } from "./blog/providers/Upload";
+import { AuthProvider } from "../auth/src";
 
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
+const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
 
 root.render(
-  <React.StrictMode>
+  <UploadProvider>
-    <UploadProvider>
+    <AuthProvider authBaseUrl={AUTH_BASE}>
-      <AuthProvider>
+      <AuthorProvider>
         <ArticleProvider>
           <Blog />
         </ArticleProvider>
-      </AuthProvider>
+      </AuthorProvider>
-    </UploadProvider>
+    </AuthProvider>
-  </React.StrictMode>,
+  </UploadProvider>
 );

src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL: string;
+  readonly VITE_AUTH_BASE_URL: string;
 }
 
 interface ImportMeta {