use appAuth for auth

Author: mythz

TechStacks.Client/src/app/posts/[id]/[slug]/PostDetailClient.tsx

@@ -7,14 +7,16 @@ import { formatDistanceToNow } from 'date-fns';
 import { PrimaryButton } from '@servicestack/react';
 import { useAuthorization } from '@/lib/hooks/useAuthorization';
 import { useAppStore } from '@/lib/stores/useAppStore';
+import { appAuth } from '@/lib/auth';
 import routes from '@/lib/utils/routes';
 import * as gateway from '@/lib/api/gateway';
 import { TechnologyTags } from '@/components/TechnologyTags';
 import { Avatar } from '@/components/ui/Avatar';
 
 export default function PostDetailClient() {
   const { canEditPost, canDeleteComment } = useAuthorization();
-  const { sessionInfo, isAuthenticated } = useAppStore();
+  const { isAuthenticated } = appAuth();
+  const { sessionInfo } = useAppStore();
   const [post, setPost] = useState<any>(null);
   const [comments, setComments] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -48,7 +50,7 @@ export default function PostDetailClient() {
         setComments(response.comments || []);
 
         // Load user's comment votes if authenticated
-        if (isAuthenticated()) {
+        if (isAuthenticated) {
           try {
             const votes = await gateway.getUserPostCommentVotes(postId);
             setUpVotedCommentIds(votes.upVotedCommentIds || []);
@@ -71,7 +73,7 @@ export default function PostDetailClient() {
   const handleCommentVote = async (commentId: number, weight: number, e: React.MouseEvent) => {
     e.stopPropagation();
 
-    if (!isAuthenticated()) {
+    if (!isAuthenticated) {
       return;
     }
 
@@ -120,7 +122,7 @@ export default function PostDetailClient() {
   const handleSubmitComment = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!isAuthenticated() || !newComment.trim()) {
+    if (!isAuthenticated || !newComment.trim()) {
       return;
     }
 
@@ -227,7 +229,7 @@ export default function PostDetailClient() {
                   : 'hover:text-green-600'
               }`}
               title={isUpVoted ? 'Remove upvote' : 'Upvote'}
-              disabled={!isAuthenticated()}
+              disabled={!isAuthenticated}
             >
               ▲
             </button>
@@ -240,7 +242,7 @@ export default function PostDetailClient() {
                   : 'hover:text-red-600'
               }`}
               title={isDownVoted ? 'Remove downvote' : 'Downvote'}
-              disabled={!isAuthenticated()}
+              disabled={!isAuthenticated}
             >
               ▼
             </button>
@@ -296,7 +298,7 @@ export default function PostDetailClient() {
                   dangerouslySetInnerHTML={{ __html: comment.contentHtml || comment.content }}
                 />
                 <div className="flex gap-3 text-sm text-gray-600">
-                  {isAuthenticated() && (
+                  {isAuthenticated && (
                     <button
                       onClick={() => setReplyToId(comment.id)}
                       className="hover:text-blue-600"
@@ -327,7 +329,7 @@ export default function PostDetailClient() {
         </div>
 
         {/* Reply Form */}
-        {isReplyingTo && isAuthenticated() && (
+        {isReplyingTo && isAuthenticated && (
           <div className="ml-12 mt-3">
             <form onSubmit={handleSubmitComment}>
               <div className="mb-2">
@@ -460,7 +462,7 @@ export default function PostDetailClient() {
         </h2>
 
         {/* Add Top-Level Comment Form */}
-        {isAuthenticated() && !replyToId && (
+        {isAuthenticated && !replyToId && (
           <form onSubmit={handleSubmitComment} className="mb-6">
             <div className="mb-2">
               <textarea

TechStacks.Client/src/components/posts/PostsList.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 import { formatDistanceToNow } from 'date-fns';
 import routes from '@/lib/utils/routes';
 import * as gateway from '@/lib/api/gateway';
-import { useAppStore } from '@/lib/stores/useAppStore';
+import { appAuth } from '@/lib/auth';
 import { TechnologyTags } from '@/components/TechnologyTags';
 import { Post } from '@/shared/dtos';
 
@@ -17,14 +17,14 @@ interface PostsListProps {
 
 export function PostsList({ posts }: PostsListProps) {
   const router = useRouter();
-  const { isAuthenticated } = useAppStore();
+  const { isAuthenticated } = appAuth();
   const [upVotedPostIds, setUpVotedPostIds] = useState<number[]>([]);
   const [downVotedPostIds, setDownVotedPostIds] = useState<number[]>([]);
   const [localPoints, setLocalPoints] = useState<Record<number, number>>({});
 
   useEffect(() => {
     const loadUserActivity = async () => {
-      if (!isAuthenticated()) return;
+      if (!isAuthenticated) return;
 
       try {
         const activity = await gateway.getUserPostActivity();
@@ -41,7 +41,7 @@ export function PostsList({ posts }: PostsListProps) {
   const handleVote = async (postId: number, weight: number, e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent card click when voting
 
-    if (!isAuthenticated()) {
+    if (!isAuthenticated) {
       // Optionally redirect to login
       return;
     }

TechStacks.Client/src/lib/hooks/useAuthorization.ts

@@ -1,9 +1,11 @@
 'use client';
 
 import { useAppStore } from '@/lib/stores/useAppStore';
+import { appAuth } from '../auth';
 
 export function useAuthorization() {
-  const { sessionInfo, isAdmin } = useAppStore();
+  const { isAdmin } = appAuth();
+  const { sessionInfo } = useAppStore();
 
   const canEditTechnology = (tech: any) => {
     if (!sessionInfo) return false;

TechStacks.Client/src/lib/hooks/useRequireAuth.ts

@@ -2,12 +2,12 @@
 
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { useAppStore } from '@/lib/stores/useAppStore';
+import { appAuth } from '@/lib/auth';
 
 export function useRequireAuth(redirectTo?: string) {
   const router = useRouter();
-  const isAuthenticated = useAppStore((state) => state.isAuthenticated());
-
+  const { isAuthenticated } = appAuth();
+  
   useEffect(() => {
     if (!isAuthenticated && redirectTo) {
       // Only redirect if explicitly specified to avoid infinite loops

TechStacks.Client/src/lib/stores/useAppStore.ts

@@ -10,8 +10,6 @@ interface AppState {
   // Session & Auth
   sessionInfo: any | null;
   setSessionInfo: (session: any | null) => void;
-  isAuthenticated: () => boolean;
-  isAdmin: () => boolean;
 
   // Config & Overview
   config: any;
@@ -72,13 +70,6 @@ export const useAppStore = create<AppState>()(
       setConfig: (config) => set({ config }),
       setOverview: (overview) => set({ overview }),
 
-      // Computed
-      isAuthenticated: () => get().sessionInfo !== null,
-      isAdmin: () => {
-        const roles = get().sessionInfo?.roles || [];
-        return roles.includes('Admin');
-      },
-
       // Initialize app
       initialize: async () => {
         set({ loading: true });