dashboard: add UI for linking and unlinking identities (#37537)

- Adds UI on the profile page for listing, linking, and unlinking identities
- Adds `/link_identity` page that orchestrates all identity linking flows
-

GitOrigin-RevId: 0bd84e878e97ea73a028ebb8104bcadff7468daf

Author: atrakh

npm-packages/dashboard/next.config.js

@@ -22,6 +22,11 @@ const allowedImageDomains = [
     hostname: "**.convex.cloud",
     pathname: "/api/storage/**",
   },
+  {
+    protocol: "https",
+    hostname: "lh3.googleusercontent.com",
+    pathname: "**",
+  },
 ];
 
 const securityHeaders = [
@@ -118,7 +123,12 @@ const nextConfig = {
     domains:
       process.env.VERCEL_ENV === "production"
         ? undefined
-        : ["127.0.0.1", "s.gravatar.com", "avatars.githubusercontent.com"],
+        : [
+            "127.0.0.1",
+            "s.gravatar.com",
+            "avatars.githubusercontent.com",
+            "lh3.googleusercontent.com",
+          ],
     remotePatterns: allowedImageDomains,
   },
   experimental: {

npm-packages/dashboard/src/api/api.ts

@@ -133,6 +133,7 @@ export function useBBMutation<
   toastOnError = true,
   googleAnalyticsEvent,
   redirectTo,
+  includeCredentials = false,
   method = "post" as Method,
   ...rest
 }: {
@@ -145,6 +146,7 @@ export function useBBMutation<
   toastOnError?: boolean;
   redirectTo?: string;
   googleAnalyticsEvent?: string;
+  includeCredentials?: boolean;
 } & (
   | {
       mutateKey: M;
@@ -194,6 +196,7 @@ export function useBBMutation<
           params: { path: pathParams },
           body: body[0],
           headers,
+          credentials: includeCredentials ? "include" : "omit",
         });
 
       if (!response.ok && error) {
@@ -227,6 +230,7 @@ export function useBBMutation<
       authHeader,
       googleAnalyticsEvent,
       googleAnalyticsId,
+      includeCredentials,
       method,
       mutate,
       path,

npm-packages/dashboard/src/api/profile.ts

@@ -83,3 +83,38 @@ export function useDeleteAccount() {
     toastOnError: false,
   });
 }
+
+export function useListIdentities() {
+  const { data: identities } = useBBQuery({
+    path: "/list_identities",
+    pathParams: undefined,
+  });
+  return identities;
+}
+
+export function useSetLinkIdentityCookie() {
+  return useBBMutation({
+    path: "/set_jwt_cookie",
+    pathParams: undefined,
+    includeCredentials: true,
+  });
+}
+
+export function useLinkIdentity() {
+  return useBBMutation({
+    path: "/link_identity",
+    pathParams: undefined,
+    mutateKey: "/list_identities",
+    includeCredentials: true,
+  });
+}
+
+export function useUnlinkIdentity() {
+  return useBBMutation({
+    path: "/unlink_identity",
+    pathParams: undefined,
+    mutateKey: "/list_identities",
+    successToast: "Identity removed.",
+    redirectTo: "/api/auth/logout",
+  });
+}

npm-packages/dashboard/src/components/login/LoginPage.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { Spinner } from "@ui/Spinner";
 import { buttonClasses } from "@ui/Button";
 
-import GithubLogo from "./logos/github-logo.svg";
+import GithubLogo from "logos/github-logo.svg";
 
 export function LoginPage({ returnTo }: { returnTo?: string }) {
   const [isLoggingIn, setIsLoggingIn] = useState(false);

npm-packages/dashboard/src/components/login/VHSLoginPage.tsx

@@ -3,9 +3,9 @@ import classNames from "classnames";
 import { useState } from "react";
 import Logo from "images/convex-light.svg";
 import { GoogleAnalytics } from "elements/GoogleAnalytics";
+import GithubLogo from "logos/github-logo.svg";
 import loginBackground from "../../../public/vhs-bg.png";
 import loading from "../../../public/vhs-loading.gif";
-import GithubLogo from "./logos/github-logo.svg";
 
 export function VHSLoginPage({ returnTo }: { returnTo?: string }) {
   const [isLoggingIn, setIsLoggingIn] = useState(false);