Refactor authentication system: replace NextAuth with custom login/logout/session handling, improve cookie management, and enhance error handling

2026-04-24 01:53:32 +07:00
parent 690a2fbd51
commit 7c4404ded8
26 changed files with 368 additions and 239 deletions
@@ -1,21 +1,104 @@
 "use client"

-import { SessionProvider, useSession, signIn, signOut } from "next-auth/react"
-import { useMemo, type ReactNode } from "react"
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"
 import type { User } from "./types"

+let googleScriptPromise: Promise<void> | null = null
+
+function ensureGoogleIdentityScript() {
+  if (typeof window === "undefined") return Promise.resolve()
+  if ((window as any).google?.accounts?.id) return Promise.resolve()
+  if (googleScriptPromise) return googleScriptPromise
+
+  googleScriptPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector('script[src="https://accounts.google.com/gsi/client"]')
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true })
+      existing.addEventListener("error", () => reject(new Error("Failed to load Google script")), { once: true })
+      return
+    }
+
+    const script = document.createElement("script")
+    script.src = "https://accounts.google.com/gsi/client"
+    script.async = true
+    script.defer = true
+    script.onload = () => resolve()
+    script.onerror = () => reject(new Error("Failed to load Google script"))
+    document.head.appendChild(script)
+  })
+
+  return googleScriptPromise
+}
+
+async function requestGoogleIdToken(clientId: string): Promise<string> {
+  await ensureGoogleIdentityScript()
+
+  return new Promise((resolve, reject) => {
+    const googleApi = (window as any).google?.accounts?.id
+    if (!googleApi) {
+      reject(new Error("Google Identity API is unavailable"))
+      return
+    }
+
+    let settled = false
+
+    googleApi.initialize({
+      client_id: clientId,
+      callback: (response: { credential?: string }) => {
+        if (settled) return
+        settled = true
+        const credential = (response?.credential || "").trim()
+        if (!credential) {
+          reject(new Error("Google did not return ID token"))
+          return
+        }
+        resolve(credential)
+      },
+      auto_select: false,
+      cancel_on_tap_outside: true,
+    })
+
+    googleApi.prompt((notification: any) => {
+      if (settled) return
+
+      if (notification?.isNotDisplayed?.() || notification?.isSkippedMoment?.()) {
+        settled = true
+        reject(new Error("Google sign-in prompt was closed or not displayed"))
+      }
+    })
+  })
+}
+
 export function AuthProvider({ children }: { children: ReactNode }) {
-  return <SessionProvider>{children}</SessionProvider>
+  return <>{children}</>
 }

 // Giữ nguyên custom hook `useAuth` để tương thích ngược với UI components hiện tại
 export function useAuth() {
-  const { data: session, status } = useSession()
+  const [sessionUser, setSessionUser] = useState<any>(null)
+  const [isLoading, setIsLoading] = useState(true)

-  const isLoading = status === "loading"
+  const fetchSession = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      const res = await fetch("/api/auth/session", { cache: "no-store" })
+      if (!res.ok) {
+        setSessionUser(null)
+        return
+      }

-  // Chuyển đổi session user thành format User của project
-  const sessionUser = session?.user
+      const data = await res.json()
+      setSessionUser(data?.user || null)
+    } catch {
+      setSessionUser(null)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchSession()
+  }, [fetchSession])

  const user: User | null = useMemo(() => {
    if (!sessionUser) return null
@@ -30,8 +113,38 @@ export function useAuth() {
    }
  }, [sessionUser])

-  const loginWithGoogle = () => signIn("google", { callbackUrl: "/" })
-  const logout = () => signOut({ callbackUrl: "/" })
+  const loginWithGoogle = async () => {
+    const clientId = (process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "").trim()
+    if (!clientId) {
+      throw new Error("NEXT_PUBLIC_GOOGLE_CLIENT_ID is not configured")
+    }
+
+    const googleIdToken = await requestGoogleIdToken(clientId)
+
+    const result = await fetch("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ googleIdToken }),
+    })
+
+    if (!result.ok) {
+      const errorText = await result.text()
+      throw new Error(errorText || "Đăng nhập thất bại")
+    }
+
+    const payload = await result.json()
+    setSessionUser(payload?.user || null)
+
+    return payload
+  }
+
+  const logout = async () => {
+    try {
+      await fetch("/api/auth/logout", { method: "POST" })
+    } finally {
+      setSessionUser(null)
+    }
+  }

  return { user, isLoading, loginWithGoogle, logout }
 }
@@ -0,0 +1,2 @@
+export const AUTH_COOKIE_NAME = "reader_access_token"
+export const AUTH_COOKIE_MAX_AGE_SECONDS = 7 * 24 * 60 * 60
@@ -1,85 +0,0 @@
-import { NextAuthOptions } from "next-auth"
-import GoogleProvider from "next-auth/providers/google"
-
-const readerApiOrigin = process.env.READER_API_ORIGIN?.replace(/\/+$/, "")
-const googleClientId = process.env.GOOGLE_CLIENT_ID
-const googleClientSecret = process.env.GOOGLE_CLIENT_SECRET
-
-type MobileLoginResponse = {
-    accessToken: string
-    user: {
-        id: string
-        email?: string | null
-        name?: string | null
-        image?: string | null
-        role?: string | null
-    }
-}
-
-export const authOptions: NextAuthOptions = {
-    providers: [
-        GoogleProvider({
-            clientId: googleClientId || "",
-            clientSecret: googleClientSecret || "",
-            httpOptions: {
-                timeout: 10000,
-            },
-        }),
-    ],
-    session: {
-        strategy: "jwt",
-    },
-    callbacks: {
-        async jwt({ token, account }) {
-            if (account?.provider === "google" && account.id_token) {
-                if (!readerApiOrigin) {
-                    console.warn("READER_API_ORIGIN is not configured, skipping reader-api sync after Google login")
-                    return token
-                }
-
-                try {
-                    const response = await fetch(`${readerApiOrigin}/api/auth/mobile-login`, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ googleIdToken: account.id_token }),
-                        signal: AbortSignal.timeout(5000),
-                    })
-
-                    if (!response.ok) {
-                        console.error("reader-api sync failed", {
-                            status: response.status,
-                            statusText: response.statusText,
-                        })
-                        return token
-                    }
-
-                    const data = (await response.json()) as MobileLoginResponse
-                    token.sub = data.user.id
-                    ;(token as any).id = data.user.id
-                    ;(token as any).role = data.user.role || "USER"
-                    ;(token as any).name = data.user.name || token.name || null
-                    ;(token as any).email = data.user.email || token.email || null
-                    ;(token as any).picture = data.user.image || (token as any).picture || null
-                    ;(token as any).accessToken = data.accessToken
-                } catch (error) {
-                    console.error("Failed to sync Google login with reader-api", error)
-                }
-            }
-
-            return token
-        },
-        async session({ session, token }) {
-            if (session.user) {
-                session.user.id = String((token as any).id || token.sub || "")
-                session.user.role = String((token as any).role || "USER")
-                session.user.name = ((token as any).name ?? token.name ?? session.user.name ?? null) as string | null
-                session.user.email = ((token as any).email ?? token.email ?? session.user.email ?? null) as string | null
-                session.user.image = ((token as any).picture ?? (token as any).image ?? session.user.image ?? null) as string | null
-                ;(session as any).accessToken = (token as any).accessToken || null
-            }
-            return session
-        },
-    },
-    secret: process.env.NEXTAUTH_SECRET,
-    debug: process.env.NEXTAUTH_DEBUG === "true",
-}
@@ -0,0 +1,49 @@
+import { cookies } from "next/headers"
+import { redirect } from "next/navigation"
+import { AUTH_COOKIE_NAME } from "@/lib/auth-cookie"
+
+const readerApiOrigin = (process.env.READER_API_ORIGIN || "http://localhost:8000").replace(/\/+$/, "")
+
+export type ApiSessionUser = {
+  id: string
+  email?: string | null
+  name?: string | null
+  image?: string | null
+  role?: string | null
+}
+
+export async function getApiSessionUser(): Promise<ApiSessionUser | null> {
+  const cookieStore = await cookies()
+  const accessToken = cookieStore.get(AUTH_COOKIE_NAME)?.value || ""
+
+  if (!accessToken) {
+    return null
+  }
+
+  try {
+    const response = await fetch(`${readerApiOrigin}/api/auth/session`, {
+      method: "GET",
+      headers: { authorization: `Bearer ${accessToken}` },
+      cache: "no-store",
+      signal: AbortSignal.timeout(5000),
+    })
+
+    if (!response.ok) {
+      return null
+    }
+
+    const data = await response.json()
+    return (data?.user || null) as ApiSessionUser | null
+  } catch {
+    return null
+  }
+}
+
+export async function requireModSessionUser(): Promise<ApiSessionUser> {
+  const user = await getApiSessionUser()
+  if (!user || (user.role !== "MOD" && user.role !== "ADMIN")) {
+    redirect("/")
+  }
+
+  return user
+}