diff --git a/.github/helm/affine/templates/ingress.yaml b/.github/helm/affine/templates/ingress.yaml
index a4c4f89987cd3..a55d19925223a 100644
--- a/.github/helm/affine/templates/ingress.yaml
+++ b/.github/helm/affine/templates/ingress.yaml
@@ -60,6 +60,20 @@ spec:
                 name: affine-graphql
                 port:
                   number: {{ .Values.graphql.service.port }}
+          - path: /oauth/login
+            pathType: Prefix
+            backend:
+              service:
+                name: affine-graphql
+                port:
+                  number: {{ .Values.graphql.service.port }}
+          - path: /desktop-signin
+            pathType: Prefix
+            backend:
+              service:
+                name: affine-graphql
+                port:
+                  number: {{ .Values.graphql.service.port }}
           - path: /workspace
             pathType: Prefix
             backend:
diff --git a/packages/backend/server/src/base/helpers/url.ts b/packages/backend/server/src/base/helpers/url.ts
index 48bf54fe18016..594a874c3fc8d 100644
--- a/packages/backend/server/src/base/helpers/url.ts
+++ b/packages/backend/server/src/base/helpers/url.ts
@@ -60,25 +60,31 @@ export class URLHelper {
     return this.url(path, query).toString();
   }
 
-  safeRedirect(res: Response, to: string) {
+  safeLink(to?: string) {
     try {
-      const finalTo = new URL(decodeURIComponent(to), this.baseUrl);
-
-      for (const host of this.redirectAllowHosts) {
-        const hostURL = new URL(host);
-        if (
-          hostURL.origin === finalTo.origin &&
-          finalTo.pathname.startsWith(hostURL.pathname)
-        ) {
-          return res.redirect(finalTo.toString().replace(/\/$/, ''));
+      if (to) {
+        const finalTo = new URL(decodeURIComponent(to), this.baseUrl);
+
+        for (const host of this.redirectAllowHosts) {
+          const hostURL = new URL(host);
+          if (
+            hostURL.origin === finalTo.origin &&
+            finalTo.pathname.startsWith(hostURL.pathname)
+          ) {
+            return finalTo.toString().replace(/\/$/, '');
+          }
         }
       }
     } catch {
       // just ignore invalid url
     }
 
-    // redirect to home if the url is invalid
-    return res.redirect(this.home);
+    // return home url if the url is invalid
+    return this.home;
+  }
+
+  safeRedirect(res: Response, to: string) {
+    return res.redirect(this.safeLink(to));
   }
 
   verify(url: string | URL) {
diff --git a/packages/backend/server/src/plugins/oauth/controller.ts b/packages/backend/server/src/plugins/oauth/controller.ts
index f38eaa2eb0992..5605ac88577e6 100644
--- a/packages/backend/server/src/plugins/oauth/controller.ts
+++ b/packages/backend/server/src/plugins/oauth/controller.ts
@@ -1,29 +1,128 @@
 import {
   Body,
   Controller,
+  Get,
   HttpCode,
   HttpStatus,
+  Logger,
   Post,
   Req,
   Res,
 } from '@nestjs/common';
 import { ConnectedAccount, PrismaClient } from '@prisma/client';
 import type { Request, Response } from 'express';
+import { z } from 'zod';
 
 import {
+  Config,
   InvalidOauthCallbackState,
   MissingOauthQueryParameter,
   OauthAccountAlreadyConnected,
   OauthStateExpired,
   UnknownOauthProvider,
+  URLHelper,
 } from '../../base';
-import { AuthService, Public } from '../../core/auth';
+import { AuthService, Public, Session } from '../../core/auth';
 import { UserService } from '../../core/user';
 import { OAuthProviderName } from './config';
 import { OAuthAccount, Tokens } from './providers/def';
 import { OAuthProviderFactory } from './register';
 import { OAuthService } from './service';
 
+const LoginParams = z.object({
+  provider: z.nativeEnum(OAuthProviderName),
+  redirectUri: z.string().optional(),
+});
+
+// handle legacy clients oauth login
+@Controller('/')
+export class OAuthLegacyController {
+  private readonly logger = new Logger(OAuthLegacyController.name);
+  private readonly clientSchema: z.ZodEnum<any>;
+
+  constructor(
+    config: Config,
+    private readonly auth: AuthService,
+    private readonly oauth: OAuthService,
+    private readonly providerFactory: OAuthProviderFactory,
+    private readonly url: URLHelper
+  ) {
+    this.clientSchema = z.enum([
+      'web',
+      'affine',
+      'affine-canary',
+      'affine-beta',
+      ...(config.node.dev ? ['affine-dev'] : []),
+    ]);
+  }
+
+  @Public()
+  @Get('/oauth/login')
+  @Get('/desktop-signin')
+  @HttpCode(HttpStatus.OK)
+  async legacyLogin(
+    @Res() res: Response,
+    @Session() session: Session | undefined,
+    @Body('provider') provider?: string,
+    @Body('redirect_uri') redirectUri?: string,
+    @Body('client') client?: string
+  ) {
+    // sign out first, web only
+    if ((!!client || client === 'web') && session) {
+      await this.auth.signOut(session.sessionId);
+      await this.auth.refreshCookies(res, session.sessionId);
+    }
+
+    const params = LoginParams.extend({ client: this.clientSchema }).safeParse({
+      provider: provider?.toLowerCase(),
+      redirectUri: this.url.safeLink(redirectUri),
+      client,
+    });
+    if (params.error) {
+      return res.redirect(
+        this.url.link('/sign-in', {
+          error: `Invalid oauth parameters`,
+        })
+      );
+    } else {
+      const { provider: providerName, redirectUri, client } = params.data;
+      const provider = this.providerFactory.get(providerName);
+      if (!provider) {
+        throw new UnknownOauthProvider({ name: providerName });
+      }
+
+      try {
+        const token = await this.oauth.saveOAuthState({
+          provider: providerName,
+          redirectUri,
+          clientId: client,
+        });
+        // legacy client state assemble
+        const oAuthUrl = new URL(provider.getAuthUrl(token));
+        oAuthUrl.searchParams.set(
+          'state',
+          JSON.stringify({
+            state: oAuthUrl.searchParams.get('state'),
+            client,
+            provider,
+          })
+        );
+        return res.redirect(oAuthUrl.toString());
+      } catch (e: any) {
+        this.logger.error(
+          `Failed to preflight oauth login for provider ${providerName}`,
+          e
+        );
+        return res.redirect(
+          this.url.link('/sign-in', {
+            error: `Invalid oauth provider parameters`,
+          })
+        );
+      }
+    }
+  }
+}
+
 @Controller('/api/oauth')
 export class OAuthController {
   constructor(
@@ -39,7 +138,9 @@ export class OAuthController {
   @HttpCode(HttpStatus.OK)
   async preflight(
     @Body('provider') unknownProviderName?: string,
-    @Body('redirect_uri') redirectUri?: string
+    @Body('redirect_uri') redirectUri?: string,
+    @Body('client') clientId?: string,
+    @Body('state') clientState?: string
   ) {
     if (!unknownProviderName) {
       throw new MissingOauthQueryParameter({ name: 'provider' });
@@ -53,66 +154,152 @@ export class OAuthController {
       throw new UnknownOauthProvider({ name: unknownProviderName });
     }
 
-    const state = await this.oauth.saveOAuthState({
+    const oAuthToken = await this.oauth.saveOAuthState({
       provider: providerName,
       redirectUri,
+      // new client will generate the state from the client side
+      clientId,
+      state: clientState,
     });
 
     return {
-      url: provider.getAuthUrl(state),
+      url: provider.getAuthUrl(oAuthToken),
     };
   }
 
   @Public()
-  @Post('/callback')
+  @Post('/exchangeToken')
   @HttpCode(HttpStatus.OK)
-  async callback(
-    @Req() req: Request,
-    @Res() res: Response,
-    @Body('code') code?: string,
-    @Body('state') stateStr?: string
+  async exchangeToken(
+    @Body('code') code: string,
+    @Body('state') oAuthToken: string
   ) {
     if (!code) {
       throw new MissingOauthQueryParameter({ name: 'code' });
     }
-
-    if (!stateStr) {
+    if (!oAuthToken) {
       throw new MissingOauthQueryParameter({ name: 'state' });
     }
 
-    if (typeof stateStr !== 'string' || !this.oauth.isValidState(stateStr)) {
+    const oAuthState = await this.oauth.getOAuthState(oAuthToken);
+
+    if (!oAuthState || !oAuthState?.state) {
       throw new InvalidOauthCallbackState();
     }
 
-    const state = await this.oauth.getOAuthState(stateStr);
-
-    if (!state) {
-      throw new OauthStateExpired();
+    // for new client, need exchange cookie by client state
+    // we only cache the code and access token in server side
+    const provider = this.providerFactory.get(oAuthState.provider);
+    if (!provider) {
+      throw new UnknownOauthProvider({
+        name: oAuthState.provider ?? 'unknown',
+      });
     }
+    const token = await this.oauth.saveOAuthState({ ...oAuthState, code });
 
-    if (!state.provider) {
-      throw new MissingOauthQueryParameter({ name: 'provider' });
-    }
+    return {
+      token,
+      provider: oAuthState.provider,
+      client: oAuthState.clientId,
+    };
+  }
+
+  @Public()
+  @Post('/callback')
+  @HttpCode(HttpStatus.OK)
+  async callback(
+    @Req() req: Request,
+    @Res() res: Response,
+    /** @deprecated */ @Body('code') code?: string,
+    @Body('state') oAuthToken?: string,
+    // new client will send token to exchange cookie
+    @Body('secret') inAppState?: string
+  ) {
+    if (inAppState && oAuthToken) {
+      // new method, need exchange cookie by client state
+      // we only cache the code and access token in server side
+      const authState = await this.oauth.getOAuthState(oAuthToken);
+      if (!authState || authState.state !== inAppState || !authState.code) {
+        throw new OauthStateExpired();
+      }
 
-    const provider = this.providerFactory.get(state.provider);
+      if (!authState.provider) {
+        throw new MissingOauthQueryParameter({ name: 'provider' });
+      }
 
-    if (!provider) {
-      throw new UnknownOauthProvider({ name: state.provider ?? 'unknown' });
-    }
+      const provider = this.providerFactory.get(authState.provider);
 
-    const tokens = await provider.getToken(code);
-    const externAccount = await provider.getUser(tokens.accessToken);
-    const user = await this.loginFromOauth(
-      state.provider,
-      externAccount,
-      tokens
-    );
-
-    await this.auth.setCookies(req, res, user.id);
-    res.send({
-      id: user.id,
-      redirectUri: state.redirectUri,
-    });
+      if (!provider) {
+        throw new UnknownOauthProvider({
+          name: authState.provider ?? 'unknown',
+        });
+      }
+
+      // NOTE: in web client, we don't need to exchange token
+      // and provide the auth code directly
+      const tokens = await provider.getToken(authState.code);
+      const externAccount = await provider.getUser(tokens.accessToken);
+      const user = await this.loginFromOauth(
+        authState.provider,
+        externAccount,
+        tokens
+      );
+
+      await this.auth.setCookies(req, res, user.id);
+      res.send({
+        id: user.id,
+        /* @deprecated */
+        redirectUri: authState.redirectUri,
+      });
+    } else {
+      if (!code) {
+        throw new MissingOauthQueryParameter({ name: 'code' });
+      }
+
+      if (!oAuthToken) {
+        throw new MissingOauthQueryParameter({ name: 'state' });
+      }
+
+      if (
+        typeof oAuthToken !== 'string' ||
+        !this.oauth.isValidState(oAuthToken)
+      ) {
+        throw new InvalidOauthCallbackState();
+      }
+
+      const authState = await this.oauth.getOAuthState(oAuthToken);
+
+      if (!authState) {
+        throw new OauthStateExpired();
+      }
+
+      if (!authState.provider) {
+        throw new MissingOauthQueryParameter({ name: 'provider' });
+      }
+
+      const provider = this.providerFactory.get(authState.provider);
+
+      if (!provider) {
+        throw new UnknownOauthProvider({
+          name: authState.provider ?? 'unknown',
+        });
+      }
+
+      const tokens = await provider.getToken(code);
+      const externAccount = await provider.getUser(tokens.accessToken);
+      const user = await this.loginFromOauth(
+        authState.provider,
+        externAccount,
+        tokens
+      );
+
+      await this.auth.setCookies(req, res, user.id);
+      res.send({
+        id: user.id,
+        /* @deprecated */
+        redirectUri: authState.redirectUri,
+      });
+    }
   }
 
   private async loginFromOauth(
diff --git a/packages/backend/server/src/plugins/oauth/index.ts b/packages/backend/server/src/plugins/oauth/index.ts
index abfc3aab2e436..175bda3f82efa 100644
--- a/packages/backend/server/src/plugins/oauth/index.ts
+++ b/packages/backend/server/src/plugins/oauth/index.ts
@@ -4,7 +4,7 @@ import { AuthModule } from '../../core/auth';
 import { ServerFeature } from '../../core/config';
 import { UserModule } from '../../core/user';
 import { Plugin } from '../registry';
-import { OAuthController } from './controller';
+import { OAuthController, OAuthLegacyController } from './controller';
 import { OAuthProviders } from './providers';
 import { OAuthProviderFactory } from './register';
 import { OAuthResolver } from './resolver';
@@ -19,7 +19,7 @@ import { OAuthService } from './service';
     OAuthResolver,
     ...OAuthProviders,
   ],
-  controllers: [OAuthController],
+  controllers: [OAuthController, OAuthLegacyController],
   contributesTo: ServerFeature.OAuth,
   if: config => config.flavor.graphql && !!config.plugins.oauth,
 })
diff --git a/packages/backend/server/src/plugins/oauth/service.ts b/packages/backend/server/src/plugins/oauth/service.ts
index da0ccee9ce503..d74f7ef2592e6 100644
--- a/packages/backend/server/src/plugins/oauth/service.ts
+++ b/packages/backend/server/src/plugins/oauth/service.ts
@@ -9,6 +9,13 @@ import { OAuthProviderFactory } from './register';
 const OAUTH_STATE_KEY = 'OAUTH_STATE';
 
 interface OAuthState {
+  // client id, currently it's the client schema
+  // if not provided, it's web platform
+  clientId?: string;
+  // client state
+  state?: string;
+  // provider authorize code
+  code?: string;
   redirectUri?: string;
   provider: OAuthProviderName;
 }
diff --git a/packages/frontend/core/src/components/affine/auth/oauth.tsx b/packages/frontend/core/src/components/affine/auth/oauth.tsx
index e109e7a6de813..9c8f020bbb59e 100644
--- a/packages/frontend/core/src/components/affine/auth/oauth.tsx
+++ b/packages/frontend/core/src/components/affine/auth/oauth.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@affine/component/ui/button';
-import { ServerService } from '@affine/core/modules/cloud';
+import { AuthService, ServerService } from '@affine/core/modules/cloud';
 import { UrlService } from '@affine/core/modules/url';
 import { OAuthProviderType } from '@affine/graphql';
 import track from '@affine/track';
@@ -53,43 +53,47 @@ export function OAuth({ redirectUrl }: { redirectUrl?: string }) {
   ));
 }
 
+type OAuthProviderProps = {
+  provider: OAuthProviderType;
+  redirectUrl?: string;
+  scheme?: string;
+  popupWindow: (url: string) => void;
+};
+
 function OAuthProvider({
   provider,
   redirectUrl,
   scheme,
   popupWindow,
-}: {
-  provider: OAuthProviderType;
-  redirectUrl?: string;
-  scheme?: string;
-  popupWindow: (url: string) => void;
-}) {
-  const serverService = useService(ServerService);
+}: OAuthProviderProps) {
+  const auth = useService(AuthService);
   const { icon } = OAuthProviderMap[provider];
 
   const onClick = useCallback(() => {
-    const params = new URLSearchParams();
-
-    params.set('provider', provider);
-
-    if (redirectUrl) {
-      params.set('redirect_uri', redirectUrl);
+    async function preflight() {
+      if (ignore) return;
+      try {
+        return await auth.oauthPreflight(provider, scheme, false, redirectUrl);
+      } catch {
+        return null;
+      }
     }
 
-    if (scheme) {
-      params.set('client', scheme);
-    }
-
-    // TODO: Android app scheme not implemented
-    // if (BUILD_CONFIG.isAndroid) {}
-
-    const oauthUrl =
-      serverService.server.baseUrl + `/oauth/login?${params.toString()}`;
-
-    track.$.$.auth.signIn({ method: 'oauth', provider });
-
-    popupWindow(oauthUrl);
-  }, [popupWindow, provider, redirectUrl, scheme, serverService]);
+    let ignore = false;
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    preflight().then(url => {
+      // cover popup limit in safari
+      setTimeout(() => {
+        if (url && !ignore) {
+          track.$.$.auth.signIn({ method: 'oauth', provider });
+          popupWindow(url);
+        }
+      });
+    });
+    return () => {
+      ignore = true;
+    };
+  }, [auth, popupWindow, provider, redirectUrl, scheme]);
 
   return (
     <Button
diff --git a/packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx b/packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx
index 453f4a6e326cf..ad9481504fbc2 100644
--- a/packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx
+++ b/packages/frontend/core/src/desktop/pages/auth/oauth-callback.tsx
@@ -1,3 +1,4 @@
+import { extractLinkSearchParams } from '@affine/core/utils/link';
 import { useService } from '@toeverything/infra';
 import { useEffect, useRef } from 'react';
 import {
@@ -7,52 +8,59 @@ import {
   // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   useNavigate,
 } from 'react-router-dom';
+import { z } from 'zod';
 
 import { AuthService } from '../../../modules/cloud';
 import { supportedClient } from './common';
 
-interface LoaderData {
-  state: string;
-  code: string;
-  provider: string;
-}
+const LoaderData = z.object({
+  state: z.string(),
+  provider: z.string(),
+  code: z.string().optional(),
+});
 
-export const loader: LoaderFunction = async ({ request }) => {
-  const url = new URL(request.url);
-  const queries = url.searchParams;
-  const code = queries.get('code');
-  let stateStr = queries.get('state') ?? '{}';
+const ParsedState = z.object({
+  payload: LoaderData,
+  client: supportedClient.optional(),
+});
 
-  if (!code || !stateStr) {
-    return redirect('/sign-in?error=Invalid oauth callback parameters');
-  }
+type LoaderData = z.infer<typeof LoaderData>;
+type ParsedState = z.infer<typeof ParsedState>;
 
+async function parseState(url: string): Promise<ParsedState> {
+  const { code, state: stateStr } = extractLinkSearchParams(url);
+  if (!code || !stateStr) throw new Error('Invalid oauth callback parameters');
   try {
+    /** @deprecated old client compatibility*/
+    // NOTE: in old client, state is a JSON string
+    // we check and passthrough the state to the client
     const { state, client, provider } = JSON.parse(stateStr);
-    stateStr = state;
-
-    const payload: LoaderData = {
-      state,
-      code,
-      provider,
-    };
-
-    if (!client || client === 'web') {
-      return payload;
-    }
-
-    const clientCheckResult = supportedClient.safeParse(client);
-    if (!clientCheckResult.success) {
-      return redirect('/sign-in?error=Invalid oauth callback parameters');
-    }
+    return ParsedState.parse({ payload: { state, code, provider }, client });
+  } catch {}
+  // new client behavior
+  const { token, provider, client } = await fetch('/api/oauth/exchangeToken', {
+    method: 'POST',
+    body: JSON.stringify({ code, state: stateStr }),
+    headers: { 'content-type': 'application/json' },
+  }).then(r => r.json());
+  const payload = client ? { token } : { code, state: stateStr };
+  return ParsedState.parse({ payload: { ...payload, provider }, client });
+}
 
-    const authParams = new URLSearchParams();
-    authParams.set('method', 'oauth');
-    authParams.set('payload', JSON.stringify(payload));
-    authParams.set('server', location.origin);
+export const loader: LoaderFunction = async args => {
+  try {
+    const { payload, client } = await parseState(args.request.url);
+    // sign in directly if it's web client
+    if (!client || client === 'web') return payload;
 
     return redirect(
-      `/open-app/url?url=${encodeURIComponent(`${client}://authentication?${authParams.toString()}`)}`
+      `/open-app/url?url=${encodeURIComponent(
+        `${client}://authentication?${new URLSearchParams({
+          method: 'oauth',
+          payload: JSON.stringify(payload),
+          server: location.origin,
+        }).toString()}`
+      )}`
     );
   } catch {
     return redirect('/sign-in?error=Invalid oauth callback parameters');
@@ -62,18 +70,16 @@ export const loader: LoaderFunction = async ({ request }) => {
 export const Component = () => {
   const auth = useService(AuthService);
   const data = useLoaderData() as LoaderData;
+  const nav = useNavigate();
 
   // loader data from useLoaderData is not reactive, so that we can safely
   // assume the effect below is only triggered once
   const triggeredRef = useRef(false);
 
-  const nav = useNavigate();
-
   useEffect(() => {
-    if (triggeredRef.current) {
-      return;
-    }
+    if (triggeredRef.current) return;
     triggeredRef.current = true;
+
     auth
       .signInOauth(data.code, data.state, data.provider)
       .then(({ redirectUri }) => {
diff --git a/packages/frontend/core/src/desktop/pages/auth/oauth-login.tsx b/packages/frontend/core/src/desktop/pages/auth/oauth-login.tsx
index 179ca4f67755a..afe896bf43974 100644
--- a/packages/frontend/core/src/desktop/pages/auth/oauth-login.tsx
+++ b/packages/frontend/core/src/desktop/pages/auth/oauth-login.tsx
@@ -66,7 +66,7 @@ export const Component = () => {
 
   useEffect(() => {
     auth
-      .oauthPreflight(data.provider, data.client, data.redirectUri)
+      .oauthPreflight(data.provider, data.client, true, data.redirectUri)
       .then(url => {
         // this is the url of oauth provider auth page, can't navigate with react-router
         location.href = url;
diff --git a/packages/frontend/core/src/desktop/pages/open-app/index.tsx b/packages/frontend/core/src/desktop/pages/open-app/index.tsx
index c8e657d26607f..788a1ea480daa 100644
--- a/packages/frontend/core/src/desktop/pages/open-app/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/open-app/index.tsx
@@ -1,18 +1,44 @@
 import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { GraphQLService } from '@affine/core/modules/cloud';
 import { OpenInAppPage } from '@affine/core/modules/open-in-app/views/open-in-app-page';
-import { appSchemes, channelToScheme } from '@affine/core/utils/channel';
+import { appSchemaUrl, appSchemes, channelToScheme } from '@affine/core/utils';
+import { extractLinkSearchParams } from '@affine/core/utils/link';
 import type { GetCurrentUserQuery } from '@affine/graphql';
 import { getCurrentUserQuery } from '@affine/graphql';
 import { useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import {
+  type LoaderFunction,
+  redirect,
+  useLoaderData,
+  useParams,
+} from 'react-router-dom';
+import { z } from 'zod';
 
 import { AppContainer } from '../../components/app-container';
 
+const LoaderData = z.object({
+  action: z.enum(['url', 'signin-redirect']),
+  url: appSchemaUrl,
+  params: z.record(z.string()),
+});
+
+type LoaderData = z.infer<typeof LoaderData>;
+
+export const loader: LoaderFunction = async args => {
+  const action = args.params.action || '';
+
+  try {
+    const { url, ...params } = extractLinkSearchParams(args.request.url);
+    return LoaderData.parse({ action, url, params });
+  } catch (e) {
+    console.error(e);
+    return redirect('/404');
+  }
+};
+
 const OpenUrl = () => {
-  const [params] = useSearchParams();
-  const urlToOpen = params.get('url');
+  const { params, url } = useLoaderData() as LoaderData;
   const navigateHelper = useNavigateHelper();
 
   const onOpenHere = useCallback(
@@ -23,15 +49,13 @@ const OpenUrl = () => {
     [navigateHelper]
   );
 
-  if (!urlToOpen) {
+  if (!url) {
     return null;
   }
 
-  params.delete('url');
-
-  const urlObj = new URL(urlToOpen || '');
+  const urlObj = new URL(url || '');
 
-  params.forEach((v, k) => {
+  Object.entries(params).forEach(([k, v]) => {
     urlObj.searchParams.set(k, v);
   });
 
@@ -47,14 +71,13 @@ const OpenOAuthJwt = () => {
   const [currentUser, setCurrentUser] = useState<
     GetCurrentUserQuery['currentUser'] | null
   >(null);
-  const [params] = useSearchParams();
+  const { params } = useLoaderData() as LoaderData;
   const graphqlService = useService(GraphQLService);
 
-  const maybeScheme = appSchemes.safeParse(params.get('scheme'));
+  const maybeScheme = appSchemes.safeParse(params['scheme']);
   const scheme = maybeScheme.success
     ? maybeScheme.data
     : channelToScheme[BUILD_CONFIG.appBuildType];
-  const next = params.get('next');
 
   useEffect(() => {
     graphqlService
@@ -73,7 +96,7 @@ const OpenOAuthJwt = () => {
 
   const urlToOpen = `${scheme}://signin-redirect?token=${
     currentUser.token.sessionToken
-  }&next=${next || ''}`;
+  }&next=${params['next'] || ''}`;
 
   return <OpenInAppPage urlToOpen={urlToOpen} />;
 };
diff --git a/packages/frontend/core/src/desktop/router.tsx b/packages/frontend/core/src/desktop/router.tsx
index d311ade62c0ab..53a222cff180b 100644
--- a/packages/frontend/core/src/desktop/router.tsx
+++ b/packages/frontend/core/src/desktop/router.tsx
@@ -138,24 +138,12 @@ export const topLevelRoutes = [
         lazy: () =>
           import(/* webpackChunkName: "auth" */ './pages/auth/magic-link'),
       },
-      {
-        path: '/oauth/login',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/oauth-login'),
-      },
       {
         path: '/oauth/callback',
         lazy: () =>
           import(/* webpackChunkName: "auth" */ './pages/auth/oauth-callback'),
       },
       // deprecated, keep for old client compatibility
-      // TODO(@forehalo): remove
-      {
-        path: '/desktop-signin',
-        lazy: () =>
-          import(/* webpackChunkName: "auth" */ './pages/auth/oauth-login'),
-      },
-      // deprecated, keep for old client compatibility
       // use '/sign-in'
       // TODO(@forehalo): remove
       {
diff --git a/packages/frontend/core/src/mobile/router.tsx b/packages/frontend/core/src/mobile/router.tsx
index 83842e6ad7af3..e0fd992beb44f 100644
--- a/packages/frontend/core/src/mobile/router.tsx
+++ b/packages/frontend/core/src/mobile/router.tsx
@@ -65,13 +65,6 @@ export const topLevelRoutes = [
             /* webpackChunkName: "auth" */ '@affine/core/desktop/pages/auth/magic-link'
           ),
       },
-      {
-        path: '/oauth/login',
-        lazy: () =>
-          import(
-            /* webpackChunkName: "auth" */ '@affine/core/desktop/pages/auth/oauth-login'
-          ),
-      },
       {
         path: '/oauth/callback',
         lazy: () =>
diff --git a/packages/frontend/core/src/modules/cloud/services/auth.ts b/packages/frontend/core/src/modules/cloud/services/auth.ts
index 7013127308ae1..40f825ab8495c 100644
--- a/packages/frontend/core/src/modules/cloud/services/auth.ts
+++ b/packages/frontend/core/src/modules/cloud/services/auth.ts
@@ -2,6 +2,7 @@ import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import type { OAuthProviderType } from '@affine/graphql';
 import { track } from '@affine/track';
 import { ApplicationFocused, OnEvent, Service } from '@toeverything/infra';
+import { nanoid } from 'nanoid';
 import { distinctUntilChanged, map, skip } from 'rxjs';
 
 import type { UrlService } from '../../url';
@@ -27,6 +28,8 @@ function toAIUserInfo(account: AuthAccountInfo | null) {
 @OnEvent(ApplicationFocused, e => e.onApplicationFocused)
 @OnEvent(ServerStarted, e => e.onServerStarted)
 export class AuthService extends Service {
+  // a random state for login flow
+  private state = nanoid();
   session = this.framework.createEntity(AuthSession);
 
   constructor(
@@ -131,32 +134,45 @@ export class AuthService extends Service {
 
   async oauthPreflight(
     provider: OAuthProviderType,
-    client: string,
+    client: string | undefined,
+    oldClient = false,
     /** @deprecated*/ redirectUrl?: string
   ) {
     try {
-      const res = await this.fetchService.fetch('/api/oauth/preflight', {
-        method: 'POST',
-        body: JSON.stringify({ provider, redirect_uri: redirectUrl }),
-        headers: {
-          'content-type': 'application/json',
-        },
-      });
+      // generate a random state for login flow
+      this.state = nanoid();
 
-      let { url } = await res.json();
-
-      // change `state=xxx` to `state={state:xxx,native:true}`
-      // so we could know the callback should be redirect to native app
-      const oauthUrl = new URL(url);
-      oauthUrl.searchParams.set(
-        'state',
-        JSON.stringify({
-          state: oauthUrl.searchParams.get('state'),
-          client,
-          provider,
+      let { url } = await this.fetchService
+        .fetch('/api/oauth/preflight', {
+          method: 'POST',
+          body: JSON.stringify({
+            provider,
+            redirect_uri: redirectUrl,
+            client,
+            // only send state for new client login
+            state: oldClient ? undefined : this.state,
+          }),
+          headers: {
+            'content-type': 'application/json',
+          },
         })
-      );
-      url = oauthUrl.toString();
+        .then(r => r.json());
+
+      /** @deprecated old client compatibility */
+      if (oldClient) {
+        // change `state=xxx` to `state={state:xxx,native:true}`
+        // so we could know the callback should be redirect to native app
+        const oauthUrl = new URL(url);
+        oauthUrl.searchParams.set(
+          'state',
+          JSON.stringify({
+            state: oauthUrl.searchParams.get('state'),
+            client,
+            provider,
+          })
+        );
+        url = oauthUrl.toString();
+      }
 
       return url;
     } catch (e) {
@@ -169,7 +185,27 @@ export class AuthService extends Service {
     }
   }
 
-  async signInOauth(code: string, state: string, provider: string) {
+  async signInOauthToken(state: string, provider: string) {
+    try {
+      const res = await this.fetchService.fetch('/api/oauth/callback', {
+        method: 'POST',
+        body: JSON.stringify({ state, secret: this.state }),
+        headers: {
+          'content-type': 'application/json',
+        },
+      });
+
+      this.session.revalidate();
+
+      track.$.$.auth.signedIn({ method: 'oauth', provider });
+      return res.json();
+    } catch (e) {
+      track.$.$.auth.signInFail({ method: 'oauth', provider });
+      throw e;
+    }
+  }
+
+  async signInOauth(code: string | undefined, state: string, provider: string) {
     try {
       const res = await this.fetchService.fetch('/api/oauth/callback', {
         method: 'POST',
diff --git a/packages/frontend/core/src/modules/desktop-api/service/desktop-api.ts b/packages/frontend/core/src/modules/desktop-api/service/desktop-api.ts
index e44a6e1ad59e6..f516c12e91d4d 100644
--- a/packages/frontend/core/src/modules/desktop-api/service/desktop-api.ts
+++ b/packages/frontend/core/src/modules/desktop-api/service/desktop-api.ts
@@ -166,8 +166,12 @@ export class DesktopApiService extends Service {
             break;
           }
           case 'oauth': {
-            const { code, state, provider } = payload;
-            await authService.signInOauth(code, state, provider);
+            const { code, state, provider, token } = payload;
+            if (token) {
+              await authService.signInOauthToken(token, provider);
+            } else {
+              await authService.signInOauth(code, state, provider);
+            }
             break;
           }
         }
diff --git a/packages/frontend/core/src/utils/channel.ts b/packages/frontend/core/src/utils/channel.ts
index 56a5762bdf344..7dd2b6701f4f3 100644
--- a/packages/frontend/core/src/utils/channel.ts
+++ b/packages/frontend/core/src/utils/channel.ts
@@ -10,6 +10,18 @@ export const appSchemes = z.enum([
 
 const appChannelSchemes = z.enum(['stable', 'canary', 'beta', 'internal']);
 
+export const appSchemaUrl = z.custom<string>(
+  url => {
+    try {
+      return appSchemes.safeParse(new URL(url).protocol.replace(':', ''))
+        .success;
+    } catch {
+      return false;
+    }
+  },
+  { message: 'Invalid URL or protocol' }
+);
+
 export type Scheme = z.infer<typeof appSchemes>;
 export type Channel = z.infer<typeof appChannelSchemes>;
 
diff --git a/packages/frontend/core/src/utils/link.ts b/packages/frontend/core/src/utils/link.ts
new file mode 100644
index 0000000000000..1ac15781885dd
--- /dev/null
+++ b/packages/frontend/core/src/utils/link.ts
@@ -0,0 +1,6 @@
+export function extractLinkSearchParams(link: string): Record<string, string> {
+  return Array.from(new URL(link).searchParams.entries()).reduce(
+    (acc, [k, v]) => ((acc[k] = v), acc),
+    {} as Record<string, string>
+  );
+}
diff --git a/tools/cli/src/webpack/config.ts b/tools/cli/src/webpack/config.ts
index e39038277d9df..91da56e2e2a75 100644
--- a/tools/cli/src/webpack/config.ts
+++ b/tools/cli/src/webpack/config.ts
@@ -386,6 +386,8 @@ export const createConfiguration: (
           changeOrigin: true,
           secure: false,
         },
+        { context: '/oauth/login', target: 'http://localhost:3010' },
+        { context: '/desktop-signin', target: 'http://localhost:3010' },
         { context: '/api', target: 'http://localhost:3010' },
         { context: '/socket.io', target: 'http://localhost:3010', ws: true },
         { context: '/graphql', target: 'http://localhost:3010' },