refactor(server): improve oauth login flow (#10648)

close CLOUD-145

packages/frontend/core/src/modules/cloud/impl/auth.ts

@@ -18,10 +18,15 @@ export function configureDefaultAuthProvider(framework: Framework) {
         });
       },
 
-      async signInOauth(code: string, state: string, _provider: string) {
+      async signInOauth(
+        code: string,
+        state: string,
+        _provider: string,
+        clientNonce?: string
+      ) {
         const res = await fetchService.fetch('/api/oauth/callback', {
           method: 'POST',
-          body: JSON.stringify({ code, state }),
+          body: JSON.stringify({ code, state, client_nonce: clientNonce }),
           headers: {
             'content-type': 'application/json',
           },

packages/frontend/core/src/modules/cloud/provider/auth.ts

@@ -6,7 +6,8 @@ export interface AuthProvider {
   signInOauth(
     code: string,
     state: string,
-    provider: string
+    provider: string,
+    clientNonce?: string
   ): Promise<{ redirectUri?: string }>;
 
   signInPassword(credential: {

packages/frontend/core/src/modules/cloud/services/auth.ts

@@ -3,6 +3,7 @@ import { UserFriendlyError } from '@affine/error';
 import type { OAuthProviderType } from '@affine/graphql';
 import { track } from '@affine/track';
 import { OnEvent, Service } from '@toeverything/infra';
+import { nanoid } from 'nanoid';
 import { distinctUntilChanged, map, skip } from 'rxjs';
 
 import { ApplicationFocused } from '../../lifecycle';
@@ -130,10 +131,16 @@ export class AuthService extends Service {
     client: string,
     /** @deprecated*/ redirectUrl?: string
   ) {
+    this.setClientNonce();
     try {
       const res = await this.fetchService.fetch('/api/oauth/preflight', {
         method: 'POST',
-        body: JSON.stringify({ provider, redirect_uri: redirectUrl }),
+        body: JSON.stringify({
+          provider,
+          client,
+          redirect_uri: redirectUrl,
+          client_nonce: this.store.getClientNonce(),
+        }),
         headers: {
           'content-type': 'application/json',
         },
@@ -141,19 +148,6 @@ export class AuthService extends Service {
 
       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,
-        })
-      );
-      url = oauthUrl.toString();
-
       return url as string;
     } catch (e) {
       track.$.$.auth.signInFail({
@@ -228,4 +222,11 @@ export class AuthService extends Service {
 
     return headers;
   }
+
+  private setClientNonce() {
+    if (BUILD_CONFIG.isNative) {
+      // send random client nonce on native app
+      this.store.setClientNonce(nanoid());
+    }
+  }
 }

packages/frontend/core/src/modules/cloud/stores/auth.ts

@@ -48,6 +48,14 @@ export class AuthStore extends Store {
     this.globalState.set(`${this.serverService.server.id}-auth`, session);
   }
 
+  getClientNonce() {
+    return this.globalState.get<string>('auth-client-nonce');
+  }
+
+  setClientNonce(nonce: string) {
+    this.globalState.set('auth-client-nonce', nonce);
+  }
+
   async fetchSession() {
     const url = `/api/auth/session`;
     const options: RequestInit = {
@@ -70,7 +78,12 @@ export class AuthStore extends Store {
   }
 
   async signInOauth(code: string, state: string, provider: string) {
-    return await this.authProvider.signInOauth(code, state, provider);
+    return await this.authProvider.signInOauth(
+      code,
+      state,
+      provider,
+      this.getClientNonce()
+    );
   }
 
   async signInPassword(credential: {