feat(android): Google OAuth via system browser + deep link for Android

Background: Google blocks OAuth in embedded WebView (403 disallowed_useragent). Solution: open Google login in the Android system browser, then deep-link back to the Tauri app via custom scheme after callback. Changes: - Tauri: add tauri-plugin-opener + tauri-plugin-deep-link to Cargo.toml - Tauri: register plugins in lib.rs, add capabilities - Web: auth-form.tsx Google button uses openUrl() via @tauri-apps/plugin-opener on Tauri (opens in system browser), falls back to window.location.href - Web: add lib/tauri.ts for isTauri() detection + lazy opens - API: /auth/google accepts ?platform=tauri → encodes into OAuth state param - API: /auth/google/callback decodes state → if tauri, renders HTML page that deep-links back via zeavisedu:// scheme; if web, 302 redirect - Android: patch script adds deep link intent filter for zeavisedu:// scheme Co-Authored-By: Claude <noreply@anthropic.com>
feat(auth): add Google logo SVG to 'Masuk dengan Google' button
2026-06-15 23:49:47 +07:00 · 2026-06-15 23:17:46 +07:00 · 2026-06-15 23:00:30 +07:00
10 changed files with 177 additions and 30 deletions
@@ -55,9 +55,6 @@ async function exchangeGoogleCode(code: string): Promise<GoogleTokenResponse> {
 }

 function decodeGoogleIdToken(idToken: string): GoogleIdPayload {
-  // JWT: header.payload.signature — we only need the payload
-  // Google's id_token is verified via the token endpoint (direct server-to-server),
-  // so we can safely decode without verifying the signature here.
  const parts = idToken.split('.');
  if (parts.length !== 3) {
    throw new Error('Invalid id_token format');
@@ -66,6 +63,41 @@ function decodeGoogleIdToken(idToken: string): GoogleIdPayload {
  return JSON.parse(payload);
 }

+/**
+ * Render a page for the Android system browser that redirects back to the
+ * Tauri app via a custom scheme (zeavisedu://). The app's AndroidManifest
+ * must register an intent filter for this scheme.
+ */
+function renderTauriDeepLinkPage(targetUrl: string): Response {
+  // Rewrite https://... to zeavisedu://... for the custom scheme
+  const deepLink = targetUrl.replace(/^https?:\/\//, 'zeavisedu://');
+  const html = `<!DOCTYPE html>
+<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Kembali ke ZeaVis Edu</title></head>
+<body style="font-family:sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#f0fdf4">
+<div style="text-align:center;padding:2rem">
+<p style="color:#166534;font-size:1.1rem;margin-bottom:1.5rem">Login berhasil!<br>Kembali ke aplikasi...</p>
+<a href="${deepLink.replace(/"/g, '&quot;')}" style="display:inline-block;background:#16a34a;color:white;padding:0.75rem 2rem;border-radius:0.5rem;text-decoration:none;font-weight:600;font-size:1rem">Buka ZeaVis Edu</a>
+<p style="color:#6b7280;font-size:0.8rem;margin-top:1rem">Jika tombol tidak berfungsi, salin URL ini:<br><code style="word-break:break-all;font-size:0.75rem">${deepLink.replace(/</g, '&lt;')}</code></p>
+</div>
+<script>window.location.href=${JSON.stringify(deepLink)};</script>
+</body></html>`;
+  return new Response(html, {
+    status: 200,
+    headers: { 'Content-Type': 'text/html;charset=utf-8' },
+  });
+}
+
+function resolvePlatform(stateRaw: string | undefined): string {
+  try {
+    if (stateRaw) {
+      const parsed = JSON.parse(Buffer.from(stateRaw, 'base64url').toString('utf-8'));
+      return parsed.platform ?? 'web';
+    }
+  } catch { /* ignore */ }
+  return 'web';
+}
+
 function normalizeEmail(email: unknown) {
  return typeof email === 'string' ? email.trim().toLowerCase() : '';
 }
@@ -171,12 +203,15 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
    set.headers['Set-Cookie'] = clearSessionCookie(request.headers);
    return { ok: true };
  })
-  .get('/google', ({ set }) => {
+  .get('/google', ({ query, set }) => {
    if (!env.googleOAuthEnabled) {
      set.status = 404;
      return { error: 'Google OAuth is not configured' };
    }

+    const platform = (query as Record<string, string>).platform ?? 'web';
+    const state = Buffer.from(JSON.stringify({ platform })).toString('base64url');
+
    const params = new URLSearchParams({
      client_id: env.googleClientId!,
      redirect_uri: env.googleRedirectUri!,
@@ -184,6 +219,7 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
      scope: 'openid email profile',
      access_type: 'offline',
      prompt: 'select_account',
+      state,
    });

    set.status = 302;
@@ -195,13 +231,20 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
      return { error: 'Google OAuth is not configured' };
    }

-    const code = (query as Record<string, string>).code;
-    const error = (query as Record<string, string>).error;
+    const q = query as Record<string, string>;
+    const code = q.code;
+    const error = q.error;
+    const platform = resolvePlatform(q.state);

    // User denied or Google returned an error
+    const makeErrorUrl = (msg: string) =>
+      `${env.webAppUrl}/login?error=${encodeURIComponent(msg)}`;
+
    if (error || !code) {
+      const url = makeErrorUrl(error ?? 'missing_code');
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
      set.status = 302;
-      set.headers['Location'] = `${env.webAppUrl}/login?error=${encodeURIComponent(error ?? 'missing_code')}`;
+      set.headers['Location'] = url;
      return;
    }

@@ -212,15 +255,19 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
      idPayload = decodeGoogleIdToken(tokens.id_token);
    } catch (err) {
      const msg = err instanceof Error ? err.message : 'Google auth failed';
+      const url = makeErrorUrl(msg);
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
      set.status = 302;
-      set.headers['Location'] = `${env.webAppUrl}/login?error=${encodeURIComponent(msg)}`;
+      set.headers['Location'] = url;
      return;
    }

    // Validate email
    if (!idPayload.email_verified || !idPayload.email) {
+      const url = makeErrorUrl('Email not verified by Google');
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
      set.status = 302;
-      set.headers['Location'] = `${env.webAppUrl}/login?error=${encodeURIComponent('Email not verified by Google')}`;
+      set.headers['Location'] = url;
      return;
    }

@@ -231,19 +278,15 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
    try {
      const db = createDbClient();

-      // 1. Try to find user by googleId
      let user = await db.select().from(users).where(eq(users.googleId, googleId)).limit(1).then(r => r[0] ?? null);

-      // 2. If not found, try by email (link existing account)
      if (!user) {
        user = await db.select().from(users).where(eq(users.email, email)).limit(1).then(r => r[0] ?? null);
        if (user) {
-          // Link googleId to existing account
          await db.update(users).set({ googleId }).where(eq(users.id, user.id));
        }
      }

-      // 3. Create new user if nothing matched
      if (!user) {
        const inserted = await db
          .insert(users)
@@ -253,17 +296,19 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
        authCounter.labels('register', 'true').inc();
      }

-      // Create session
      const token = await createSession(user.id);
      set.headers['Set-Cookie'] = createSessionCookie(token, request.headers);

      authCounter.labels('login', 'true').inc();

-      // Redirect to web app with token in URL for localStorage fallback
+      const successUrl = `${env.webAppUrl}/login?token=${encodeURIComponent(token)}`;
+      if (platform === 'tauri') return renderTauriDeepLinkPage(successUrl);
      set.status = 302;
-      set.headers['Location'] = `${env.webAppUrl}/login?token=${encodeURIComponent(token)}`;
+      set.headers['Location'] = successUrl;
    } catch (err) {
+      const url = makeErrorUrl('Database unavailable');
+      if (platform === 'tauri') return renderTauriDeepLinkPage(url);
      set.status = 302;
-      set.headers['Location'] = `${env.webAppUrl}/login?error=${encodeURIComponent('Database unavailable')}`;
+      set.headers['Location'] = url;
    }
  });
@@ -12,5 +12,7 @@ tauri-build = { version = "2", features = [] }

 [dependencies]
 tauri = { version = "2", default-features = false, features = ["wry", "common-controls-v6", "dynamic-acl", "x11", "dbus", "custom-protocol"] }
+tauri-plugin-opener = "2"
+tauri-plugin-deep-link = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
@@ -3,6 +3,9 @@
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
-    "core:default"
+    "core:default",
+    "opener:default",
+    "opener:allow-open-url",
+    "deep-link:default"
  ]
 }
@@ -1,5 +1,7 @@
 #!/usr/bin/env bash
-# Patches the generated AndroidManifest.xml to add CAMERA permission.
+# Patches the generated AndroidManifest.xml with:
+# 1. CAMERA permission
+# 2. Deep link intent filter (zeavisedu:// scheme) for Google OAuth return
 # Run after `tauri android init` to apply.
 set -euo pipefail

@@ -10,11 +12,34 @@ if [ ! -f "$MANIFEST" ]; then
  exit 1
 fi

-if grep -q 'android.permission.CAMERA' "$MANIFEST"; then
-  echo "CAMERA permission already present in AndroidManifest.xml"
-  exit 0
+# ── CAMERA permission ──────────────────────────────────────────────────
+
+if ! grep -q 'android.permission.CAMERA' "$MANIFEST"; then
+  echo "Adding CAMERA permission to AndroidManifest.xml..."
+  sed -i 's|<uses-permission android:name="android.permission.INTERNET" />|<uses-permission android:name="android.permission.INTERNET" />\n    <uses-permission android:name="android.permission.CAMERA" />\n    <uses-feature android:name="android.hardware.camera" android:required="false" />\n    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />|' "$MANIFEST"
+else
+  echo "CAMERA permission already present."
 fi

-echo "Adding CAMERA permission to AndroidManifest.xml..."
-sed -i 's|<uses-permission android:name="android.permission.INTERNET" />|<uses-permission android:name="android.permission.INTERNET" />\n    <uses-permission android:name="android.permission.CAMERA" />\n    <uses-feature android:name="android.hardware.camera" android:required="false" />\n    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />|' "$MANIFEST"
-echo "Done."
+# ── Deep link intent filter ────────────────────────────────────────────
+# Allows the app to receive zeavisedu:// scheme URLs from the system browser
+# (used after Google OAuth completes in external browser on Android)
+
+DEEP_LINK_FILTER='<!-- Deep link for Google OAuth return from system browser -->\
+        <intent-filter android:autoVerify="true">\
+            <action android:name="android.intent.action.VIEW" />\
+            <category android:name="android.intent.category.DEFAULT" />\
+            <category android:name="android.intent.category.BROWSABLE" />\
+            <data android:scheme="zeavisedu" />\
+        </intent-filter>'
+
+if grep -q 'android:scheme="zeavisedu"' "$MANIFEST"; then
+  echo "Deep link intent filter already present."
+else
+  echo "Adding deep link intent filter to AndroidManifest.xml..."
+  # Insert before the closing </activity> tag of MainActivity
+  sed -i "s|</activity>|${DEEP_LINK_FILTER}\n        </activity>|" "$MANIFEST"
+  echo "Deep link intent filter added."
+fi
+
+echo "AndroidManifest patched successfully."
@@ -1,6 +1,8 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_deep_link::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
 }
@@ -1,9 +1,10 @@
-import { FormEvent, useState } from 'react';
+import { FormEvent, useState, useCallback } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { isTauri, openUrl } from '@/lib/tauri';

 type AuthFormProps = {
  mode: 'login' | 'register';
@@ -25,6 +26,14 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
    await onSubmit({ name, email, password });
  }

+  const handleGoogleLogin = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    const platform = isTauri() ? 'tauri' : 'web';
+    const base = window.location.origin;
+    const googleUrl = `${base}/api/v1/auth/google?platform=${platform}`;
+    await openUrl(googleUrl);
+  }, []);
+
  return (
    <Card className="mx-auto w-full max-w-md">
      <CardHeader>
@@ -75,8 +84,15 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
          </Button>
        </form>
        {googleOAuthEnabled && (
-          <Button className="mt-3 w-full" variant="outline" asChild>
-            <a href="/api/v1/auth/google">Masuk dengan Google</a>
+          <Button className="mt-3 w-full flex items-center justify-center gap-2.5" variant="outline" onClick={handleGoogleLogin} type="button">
+            <svg viewBox="0 0 24 24" className="h-5 w-5" aria-hidden="true">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+              <path fill="none" d="M1 1h22v22H1z" />
+            </svg>
+            Masuk dengan Google
          </Button>
        )}
      </CardContent>
@@ -0,0 +1,25 @@
+/**
+ * Lightweight Tauri environment detection and utilities.
+ * Avoids importing @tauri-apps/api at module level so the web build
+ * doesn't bundle Tauri internals.
+ */
+
+let _isTauri: boolean | null = null;
+
+export function isTauri(): boolean {
+  if (_isTauri !== null) return _isTauri;
+  _isTauri =
+    typeof window !== 'undefined' &&
+    '__TAURI_INTERNALS__' in window;
+  return _isTauri;
+}
+
+export async function openUrl(url: string): Promise<void> {
+  if (!isTauri()) {
+    window.location.href = url;
+    return;
+  }
+  // Lazy-import Tauri opener only in Tauri context
+  const { openUrl: tauriOpenUrl } = await import('@tauri-apps/plugin-opener');
+  await tauriOpenUrl(url);
+}
@@ -9,7 +9,22 @@ export default defineConfig(({ mode }) => {
  const apiProxyTarget = env.VITE_API_PROXY_TARGET || 'http://localhost:3000';

  return {
-    plugins: [react(), tsconfigPaths(), metricsPlugin()],
+    plugins: [
+      react(),
+      tsconfigPaths(),
+      metricsPlugin(),
+      {
+        name: 'cloudflare-rocket-loader-fix',
+        transformIndexHtml(html) {
+          // Prevent Cloudflare Rocket Loader from mangling <script type="module">
+          // which breaks the entire JS bundle (blank page)
+          return html.replace(
+            /<script type="module"/g,
+            '<script data-cfasync="false" type="module"',
+          );
+        },
+      },
+    ],
    server: {
      proxy: {
        '/api': apiProxyTarget,
@@ -4,6 +4,10 @@
  "workspaces": {
    "": {
      "name": "zeavis-edu",
+      "dependencies": {
+        "@tauri-apps/plugin-deep-link": "2.4.9",
+        "@tauri-apps/plugin-opener": "2.5.4",
+      },
      "devDependencies": {
        "@moonrepo/cli": "^2.2.5",
        "typescript": "^6.0.3",
@@ -341,6 +345,8 @@

    "@tanstack/react-query": ["@tanstack/react-query@5.101.0", "", { "dependencies": { "@tanstack/query-core": "5.101.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-rLlJXSpkqfizLWgkR5+eLeIk0MvTx/meEIR7LRjxic+qxiQP8zVjq7BqQkiCMNLQBlLfuOLqqr6KO5GtrDlmSg=="],

+    "@tauri-apps/api": ["@tauri-apps/api@2.11.0", "", {}, "sha512-7CinYODhky9lmO23xHnUFv0Xt43fbtWMyxZcLcRBlFkcgXKuEirBvHpmtJ89YMhyeGcq20Wuc47Fa4XjyniywA=="],
+
    "@tauri-apps/cli": ["@tauri-apps/cli@2.11.2", "", { "optionalDependencies": { "@tauri-apps/cli-darwin-arm64": "2.11.2", "@tauri-apps/cli-darwin-x64": "2.11.2", "@tauri-apps/cli-linux-arm-gnueabihf": "2.11.2", "@tauri-apps/cli-linux-arm64-gnu": "2.11.2", "@tauri-apps/cli-linux-arm64-musl": "2.11.2", "@tauri-apps/cli-linux-riscv64-gnu": "2.11.2", "@tauri-apps/cli-linux-x64-gnu": "2.11.2", "@tauri-apps/cli-linux-x64-musl": "2.11.2", "@tauri-apps/cli-win32-arm64-msvc": "2.11.2", "@tauri-apps/cli-win32-ia32-msvc": "2.11.2", "@tauri-apps/cli-win32-x64-msvc": "2.11.2" }, "bin": { "tauri": "tauri.js" } }, "sha512-bk3HemqvGRoy+5D/dVMUQHKMYLglD0jVnMm/0iGMH6ufZ+p8r14m6BpIixwij3PBvZdvORUp1YifTD8QxVZ1Nw=="],

    "@tauri-apps/cli-darwin-arm64": ["@tauri-apps/cli-darwin-arm64@2.11.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-+4UZzLt+eOAEQCwgd+TqKgyUJMrvx+BgdXLLaqJYmPqzP+nE6YZr/hY6CWLYGQb8jFn99jEkmC6uA3tNvamA1w=="],
@@ -365,6 +371,10 @@

    "@tauri-apps/cli-win32-x64-msvc": ["@tauri-apps/cli-win32-x64-msvc@2.11.2", "", { "os": "win32", "cpu": "x64" }, "sha512-d2JchlFIpZevZVReyqhQOekJmb1UH3rhZ5VX6sH3ty9ETE0TKQavpihvoScUXfKKpW6HZC0MrFGRU0ZtD+w3gA=="],

+    "@tauri-apps/plugin-deep-link": ["@tauri-apps/plugin-deep-link@2.4.9", "", { "dependencies": { "@tauri-apps/api": "^2.11.0" } }, "sha512-u0SKOUHnJ1wqeqXsDFq2+kASCBj9xxbG0g9XZWPy9SOmU4wXtp6b/wiYpm6oH6/5fBTQsLqnLhIvqLBRpgHJlA=="],
+
+    "@tauri-apps/plugin-opener": ["@tauri-apps/plugin-opener@2.5.4", "", { "dependencies": { "@tauri-apps/api": "^2.11.0" } }, "sha512-1HnPkb+AmgO29HBazm4uPLKB+r7zzcTBW1d0fyYp1uP+jwtpoiNDGKMMzz58SFp49nOIrxdE3aUJtT57lfO9CQ=="],
+
    "@tokenizer/inflate": ["@tokenizer/inflate@0.4.1", "", { "dependencies": { "debug": "^4.4.3", "token-types": "^6.1.1" } }, "sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA=="],

    "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
@@ -13,5 +13,9 @@
  "workspaces": [
    "apps/*",
    "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "@tauri-apps/plugin-deep-link": "2.4.9",
+    "@tauri-apps/plugin-opener": "2.5.4"
+  }
 }