auth callback page powered by hono ssr

Author: yujonglee

apps/api/package.json

@@ -12,7 +12,9 @@
     "@hono/zod-validator": "^0.7.3",
     "@supabase/supabase-js": "^2.58.0",
     "@t3-oss/env-core": "^0.13.8",
+    "@tailwindcss/vite": "^4.1.14",
     "hono": "^4.9.10",
+    "tailwindcss": "^4.1.14",
     "zod": "^4.1.12"
   },
   "devDependencies": {

apps/api/src/index.tsx

@@ -5,17 +5,51 @@ import { z } from "zod";
 
 import { getEnv } from "./env";
 import { supabaseMiddleware } from "./middleware/supabase";
+import { renderer } from "./renderer";
 import type { Env } from "./types";
 
 const app = new Hono<Env>();
 app.use("/v1", supabaseMiddleware());
 
 app.get("/health", (c) => c.text("OK"));
-app.get("/", (c) => {
-  const allParams = c.req.query();
+app.get("/", renderer, (c) => {
+  const params = c.req.query();
+  const code = params.code;
+  const deeplink = "hypr://auth/callback?" + new URLSearchParams(params).toString();
 
   return c.render(
-    <pre>{JSON.stringify(allParams, null, 2)}</pre>,
+    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+      <div class="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
+        <div class="space-y-4">
+          <p class="font-mono text-lg bg-gray-100 p-2 rounded">Code: {code}</p>
+          <button
+            id="open"
+            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors"
+          >
+            Open App
+          </button>
+        </div>
+
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            function trigger() {
+              const params = new URLSearchParams(window.location.search);
+              const deeplink = 'hypr://auth/callback?' + new URLSearchParams(params).toString();
+              window.open(deeplink);
+            }
+
+            window.addEventListener('load', () => {
+              trigger();
+            });
+            document.getElementById('open').addEventListener('click', () => {
+              trigger();
+            });
+          `,
+          }}
+        />
+      </div>
+    </div>,
   );
 });
 

apps/api/src/style.css

@@ -1,3 +1 @@
-h1 {
-  font-family: Arial, Helvetica, sans-serif;
-}
+@import "tailwindcss";

apps/api/vite.config.ts

@@ -1,7 +1,8 @@
 import { cloudflare } from "@cloudflare/vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import ssrPlugin from "vite-ssr-components/plugin";
 
 export default defineConfig({
-  plugins: [cloudflare(), ssrPlugin()],
+  plugins: [tailwindcss(), cloudflare(), ssrPlugin()],
 });

apps/desktop2/src/routes/app/auth.tsx

@@ -60,7 +60,7 @@ function Component() {
     provider: Provider;
   }) => {
     if (auth?.supabase) {
-      const redirectUrl = "hypr://auth/callback";
+      const redirectUrl = "https://api.hyprnote.com/auth/callback";
       const { data, error } = await auth.supabase.auth.signInWithOAuth({
         provider,
         options: {