fix(admin): unable to log into admin panel (#11451)

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

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,

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();

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,