chore: store Clerk token in cookie

Author: Saravana Kumar Rajendran

docs/docs/Configuration/environment-variables.md

@@ -178,6 +178,8 @@ The following table lists the environment variables supported by Langflow.
 |----------|--------|---------|-------------|
 | <Link id="DO_NOT_TRACK"/>DO_NOT_TRACK | Boolean | `false` | If this option is enabled, Langflow does not track telemetry. |
 | <Link id="LANGFLOW_AUTO_LOGIN"/><span class="env-prefix">LANGFLOW_</span>AUTO_LOGIN | Boolean | `true` | Enable automatic login for Langflow. Set to `false` to disable automatic login and require the login form to log into the Langflow UI. Setting to `false` requires [`LANGFLOW_SUPERUSER`](#LANGFLOW_SUPERUSER) and [`LANGFLOW_SUPERUSER_PASSWORD`](environment-variables.md#LANGFLOW_SUPERUSER_PASSWORD) to be set. |
+| <Link id="CLERK_AUTH_ENABLED"/>CLERK_AUTH_ENABLED | Boolean | `false` | When enabled, Langflow uses Clerk for authentication. After signing in or signing up with Clerk, the frontend registers the user with the backend and then logs in via `/api/v1/login` to sync cookies. The `access_token_lf` cookie stores the Clerk session token. |
+| <Link id="CLERK_PUBLISHABLE_KEY"/>CLERK_PUBLISHABLE_KEY | String | Not set | Publishable key required when `CLERK_AUTH_ENABLED` is `true`. |
 | <Link id="LANGFLOW_AUTO_SAVING"/><span class="env-prefix">LANGFLOW_</span>AUTO_SAVING | Boolean | `true` | Enable flow auto-saving.<br/>See [`--auto-saving` option](./configuration-cli.md#run-auto-saving). |
 | <Link id="LANGFLOW_AUTO_SAVING_INTERVAL"/><span class="env-prefix">LANGFLOW_</span>AUTO_SAVING_INTERVAL | Integer | `1000` | Set the interval for flow auto-saving in milliseconds.<br/>See [`--auto-saving-interval` option](./configuration-cli.md#run-auto-saving-interval). |
 | <Link id="LANGFLOW_BACKEND_ONLY"/><span class="env-prefix">LANGFLOW_</span>BACKEND_ONLY | Boolean | `false` | Only run Langflow's backend server (no frontend).<br/>See [`--backend-only` option](./configuration-cli.md#run-backend-only). |

src/frontend/src/clerk/clerk-auth-adapter.tsx

@@ -1,29 +1,44 @@
-import { useAuth } from "@clerk/clerk-react";
-import { useEffect } from "react";
+import { useAuth, useUser } from "@clerk/clerk-react";
+import { useEffect, useContext } from "react";
 import { Cookies } from "react-cookie";
 import useAuthStore from "@/stores/authStore";
 import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants";
+import { AuthContext } from "@/contexts/authContext";
+import { ensureLangflowUser, backendLogin } from "./langflow-sync";
 
 export default function ClerkAuthAdapter() {
   const { getToken, isSignedIn, sessionId } = useAuth();
+  const { user } = useUser();
+  const { login } = useContext(AuthContext);
 
   useEffect(() => {
     const cookies = new Cookies();
     async function syncToken() {
       if (isSignedIn) {
         const token = await getToken();
         if (token) {
-          cookies.set(LANGFLOW_ACCESS_TOKEN, token, { path: "/" });
-          useAuthStore.getState().setAccessToken(token);
-          useAuthStore.getState().setIsAuthenticated(true);
+          const username =
+            user?.username ||
+            user?.primaryEmailAddress?.emailAddress ||
+            user?.id ||
+            "clerk_user";
+          try {
+            await ensureLangflowUser(token, username);
+            const data = await backendLogin(username);
+            // use the Clerk token for frontend state but still
+            // rely on /login to set refresh and API key cookies
+            login(token, "login", data.refresh_token);
+          } catch {
+            // ignore errors and continue login
+          }
         }
       } else {
         cookies.remove(LANGFLOW_ACCESS_TOKEN, { path: "/" });
         useAuthStore.getState().logout();
       }
     }
     syncToken();
-  }, [isSignedIn, getToken, sessionId]);
+  }, [isSignedIn, getToken, sessionId, user, login]);
 
   return null;
 }

src/frontend/src/clerk/langflow-sync.ts

@@ -0,0 +1,37 @@
+import { api } from "@/controllers/API/api";
+import { getURL } from "@/controllers/API/helpers/constants";
+import { CLERK_DUMMY_PASSWORD } from "@/constants/clerk";
+
+export async function ensureLangflowUser(token: string, username: string) {
+  try {
+    await api.get(`${getURL("USERS")}/whoami`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  } catch (err: any) {
+    if (err?.response?.status === 404) {
+      await api.post(
+        `${getURL("USERS")}/`,
+        { username, password: CLERK_DUMMY_PASSWORD },
+        { headers: { Authorization: `Bearer ${token}` } },
+      );
+    } else {
+      throw err;
+    }
+  }
+}
+
+export async function backendLogin(username: string) {
+  const res = await api.post(
+    `${getURL("LOGIN")}`,
+    new URLSearchParams({
+      username,
+      password: CLERK_DUMMY_PASSWORD,
+    }).toString(),
+    {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    },
+  );
+  return res.data;
+}

src/frontend/src/constants/clerk.ts

@@ -1,3 +1,6 @@
 export const IS_CLERK_AUTH =
   String(process.env.CLERK_AUTH_ENABLED).toLowerCase() === "true";
 export const CLERK_PUBLISHABLE_KEY = process.env.CLERK_PUBLISHABLE_KEY || "";
+
+// Dummy password used when registering Clerk users in the backend
+export const CLERK_DUMMY_PASSWORD = "clerk_dummy_password";

src/frontend/src/pages/ClerkSignUpPage/index.tsx

@@ -1,4 +1,33 @@
-import { SignUp } from "@clerk/clerk-react";
+import { SignUp, useAuth, useUser, useClerk } from "@clerk/clerk-react";
+import { useEffect, useState } from "react";
+import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
+import { ensureLangflowUser } from "@/clerk/langflow-sync";
+
 export default function ClerkSignUpPage() {
+  const { isSignedIn, getToken } = useAuth();
+  const { user } = useUser();
+  const { signOut } = useClerk();
+  const navigate = useCustomNavigate();
+  const [processed, setProcessed] = useState(false);
+
+  useEffect(() => {
+    async function handleSignup() {
+      if (isSignedIn && user && !processed) {
+        setProcessed(true);
+        const token = await getToken();
+        if (token) {
+          const username =
+            user.username ||
+            user.primaryEmailAddress?.emailAddress ||
+            user.id;
+          await ensureLangflowUser(token, username);
+        }
+        await signOut();
+        navigate("/login");
+      }
+    }
+    handleSignup();
+  }, [isSignedIn, user, getToken, signOut, navigate, processed]);
+
   return <SignUp />;
 }