From 3ecdc377fee07f7e270b6ae60e909f58bc6c0974 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 4 Apr 2025 10:39:20 +0000
Subject: [PATCH] fix(admin): unable to log into admin panel (#11451)

---
 packages/frontend/admin/src/fetch-utils.ts    | 25 +++++++++++++++++++
 .../frontend/admin/src/modules/auth/index.tsx |  5 ++--
 .../admin/src/modules/nav/user-dropdown.tsx   |  3 ++-
 .../frontend/admin/src/modules/setup/form.tsx |  3 ++-
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/admin/src/fetch-utils.ts

diff --git a/packages/frontend/admin/src/fetch-utils.ts b/packages/frontend/admin/src/fetch-utils.ts
new file mode 100644
index 0000000000..b95c02dc8a
--- /dev/null
+++ b/packages/frontend/admin/src/fetch-utils.ts
@@ -0,0 +1,25 @@
+/**
+ * Custom fetch utility with AFFiNE version header
+ * Automatically adds the x-affine-version header to all fetch requests
+ */
+
+// BUILD_CONFIG is defined globally in the AFFiNE project
+
+/**
+ * Wrapper around fetch that automatically adds the x-affine-version header
+ * @param input Request URL
+ * @param init Request initialization options
+ * @returns Promise with the fetch Response
+ */
+export const affineFetch = (
+  input: RequestInfo | URL,
+  init?: RequestInit
+): Promise<Response> => {
+  return fetch(input, {
+    ...init,
+    headers: {
+      ...init?.headers,
+      'x-affine-version': BUILD_CONFIG.appVersion,
+    },
+  });
+};
diff --git a/packages/frontend/admin/src/modules/auth/index.tsx b/packages/frontend/admin/src/modules/auth/index.tsx
index 7509179870..e3a12236de 100644
--- a/packages/frontend/admin/src/modules/auth/index.tsx
+++ b/packages/frontend/admin/src/modules/auth/index.tsx
@@ -7,6 +7,7 @@ import { useCallback, useRef } from 'react';
 import { Navigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
+import { affineFetch } from '../../fetch-utils';
 import { isAdmin, useCurrentUser, useRevalidateCurrentUser } from '../common';
 import logo from './logo.svg';
 
@@ -20,7 +21,7 @@ export function Auth() {
       e.preventDefault();
       e.stopPropagation();
       if (!emailRef.current || !passwordRef.current) return;
-      fetch('/api/auth/sign-in', {
+      affineFetch('/api/auth/sign-in', {
         method: 'POST',
         body: JSON.stringify({
           email: emailRef.current?.value,
@@ -38,7 +39,7 @@ export function Auth() {
           return response.json();
         })
         .then(() =>
-          fetch('/graphql', {
+          affineFetch('/graphql', {
             method: 'POST',
             body: JSON.stringify({
               operationName: getUserFeaturesQuery.op,
diff --git a/packages/frontend/admin/src/modules/nav/user-dropdown.tsx b/packages/frontend/admin/src/modules/nav/user-dropdown.tsx
index 5160617607..fd5fbf4933 100644
--- a/packages/frontend/admin/src/modules/nav/user-dropdown.tsx
+++ b/packages/frontend/admin/src/modules/nav/user-dropdown.tsx
@@ -18,6 +18,7 @@ import { CircleUser } from 'lucide-react';
 import { useCallback } from 'react';
 import { toast } from 'sonner';
 
+import { affineFetch } from '../../fetch-utils';
 import { useCurrentUser, useRevalidateCurrentUser } from '../common';
 
 interface UserDropdownProps {
@@ -63,7 +64,7 @@ export function UserDropdown({ isCollapsed }: UserDropdownProps) {
   const relative = useRevalidateCurrentUser();
 
   const handleLogout = useCallback(() => {
-    fetch('/api/auth/sign-out')
+    affineFetch('/api/auth/sign-out')
       .then(() => {
         toast.success('Logged out successfully');
         return relative();
diff --git a/packages/frontend/admin/src/modules/setup/form.tsx b/packages/frontend/admin/src/modules/setup/form.tsx
index e144c74441..57e6bc6e62 100644
--- a/packages/frontend/admin/src/modules/setup/form.tsx
+++ b/packages/frontend/admin/src/modules/setup/form.tsx
@@ -11,6 +11,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
+import { affineFetch } from '../../fetch-utils';
 import { useRevalidateServerConfig, useServerConfig } from '../common';
 import { CreateAdmin } from './create-admin';
 
@@ -95,7 +96,7 @@ export const Form = () => {
 
   const createAdmin = useCallback(async () => {
     try {
-      const createResponse = await fetch('/api/setup/create-admin-user', {
+      const createResponse = await affineFetch('/api/setup/create-admin-user', {
         method: 'POST',
         body: JSON.stringify({
           email: emailValue,