first commit

calcom/example-apps/credential-sync/pages/index.tsx

@@ -0,0 +1,57 @@
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export default function Index() {
+  const [data, setData] = useState("");
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const appSlug = searchParams.get("appSlug");
+  const userId = searchParams.get("userId");
+
+  useEffect(() => {
+    let isRedirectNeeded = false;
+    const newSearchParams = new URLSearchParams(new URL(document.URL).searchParams);
+    if (!userId) {
+      newSearchParams.set("userId", "1");
+      isRedirectNeeded = true;
+    }
+
+    if (!appSlug) {
+      newSearchParams.set("appSlug", "google-calendar");
+      isRedirectNeeded = true;
+    }
+
+    if (isRedirectNeeded) {
+      router.push(`${pathname}?${newSearchParams.toString()}`);
+    }
+  }, [router, pathname, userId, appSlug]);
+
+  async function updateToken({ invalid } = { invalid: false }) {
+    const res = await fetch(
+      `/api/setTokenInCalCom?invalid=${invalid ? 1 : 0}&userId=${userId}&appSlug=${appSlug}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    const data = await res.json();
+    setData(JSON.stringify(data));
+  }
+
+  return (
+    <div>
+      <h1>Welcome to Credential Sync Playground</h1>
+      <p>
+        You are managing credentials for cal.com <strong>userId={userId}</strong> for{" "}
+        <strong>appSlug={appSlug}</strong>. Update query params to manage a different user or app{" "}
+      </p>
+      <button onClick={() => updateToken({ invalid: true })}>Give an invalid token to Cal.com</button>
+      <button onClick={() => updateToken()}>Give a valid token to Cal.com</button>
+      <div>{data}</div>
+    </div>
+  );
+}