From e958e75df5d87e08f7938d421b0d670ab0cfd0da Mon Sep 17 00:00:00 2001
From: ElasticBottle <winstonyeo99@yahoo.com>
Date: Thu, 14 Nov 2024 20:50:09 +0000
Subject: [PATCH] feat: add custom auth demo in playground (#5418)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://linear.app/thirdweb/issue/CNCT-2364/custom-auth-demo-in-playground

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `CustomLoginForm` component for handling user authentication via email in the `in-app-wallet` feature. It allows users to log in with a custom authentication endpoint while integrating with existing wallet functionalities.

### Detailed summary
- Added `CustomLoginForm` component in `custom-login-form.tsx`.
- Utilized `useMutation` for handling login requests with an email.
- Implemented email input and submission handling in the `CustomLoginForm`.
- Updated `page.tsx` to include `CustomLoginForm` with a new section for custom authentication UI.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../src/app/connect/in-app-wallet/page.tsx    | 93 +++++++++++++++++--
 .../in-app-wallet/custom-login-form.tsx       | 67 +++++++++++++
 2 files changed, 153 insertions(+), 7 deletions(-)
 create mode 100644 apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx

diff --git a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx b/apps/playground-web/src/app/connect/in-app-wallet/page.tsx
index 263ebb02778..64c94b3064a 100644
--- a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx
+++ b/apps/playground-web/src/app/connect/in-app-wallet/page.tsx
@@ -1,4 +1,5 @@
 import { CodeExample } from "@/components/code/code-example";
+import { CustomLoginForm } from "@/components/in-app-wallet/custom-login-form";
 import { InAppConnectEmbed } from "../../../components/in-app-wallet/connect-button";
 import { Profiles } from "../../../components/in-app-wallet/profile-sections";
 import ThirdwebProvider from "../../../components/thirdweb-provider";
@@ -30,13 +31,16 @@ function AnyAuth() {
           base.
         </p>
       </div>
-
-      <CodeExample
-        preview={<InAppConnectEmbed />}
-        code={`import { inAppWallet } from "thirdweb/wallets";
+      <div className="space-y-2">
+        <h3 className="mb-3 font-medium text-lg">Prebuilt UI</h3>
+        <p className="max-w-[600px]">
+          Instant out of the box authentication with a prebuilt UI.
+        </p>
+        <CodeExample
+          preview={<InAppConnectEmbed />}
+          code={`import { inAppWallet } from "thirdweb/wallets";
         import { ConnectEmbed } from "thirdweb/react";
 
-
         const wallets = [
           inAppWallet(
             // built-in auth methods
@@ -66,8 +70,83 @@ function AnyAuth() {
           return (
 <ConnectEmbed client={client} wallets={wallets} />);
 };`}
-        lang="tsx"
-      />
+          lang="tsx"
+        />
+      </div>
+      <div className="space-y-2">
+        <h3 className="mb-3 font-medium text-lg">Custom Auth and UI</h3>
+        <p className="max-w-[600px]">
+          Customize the login UI and integrate with your existing user base. No
+          limits on customizations and auth methods.
+        </p>
+        <CodeExample
+          preview={
+            <div className="w-1/2">
+              <CustomLoginForm />
+            </div>
+          }
+          code={`import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useConnect } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets";
+
+export function CustomLoginForm() {
+  const [email, setEmail] = useState("");
+  const { connect, isConnecting, error } = useConnect();
+
+  const { mutate: loginWithCustomAuth } = useMutation({
+    mutationFn: async (email: string) => {
+      const wallet = await connect(async () => {
+        const wallet = inAppWallet();
+        await wallet.connect({
+          strategy: "auth_endpoint",
+          client,
+          // your own custom auth payload here
+          payload: JSON.stringify({
+            userId: email,
+            email,
+          }),
+        });
+        return wallet;
+      });
+      return wallet;
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    loginWithCustomAuth(email);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="email">
+          Email Address
+        </label>
+        <input
+          type="email"
+          id="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Enter your email"
+          required
+        />
+        <button
+          type="submit"
+          disabled={isConnecting || !email}
+        >
+          {isConnecting ? "Submitting..." : "Submit"}
+        </button>
+        {error && <p>{error.message}</p>}
+      </div>
+    </form>
+  );
+}
+`}
+          lang="tsx"
+        />
+      </div>
     </>
   );
 }
diff --git a/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx b/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx
new file mode 100644
index 00000000000..636e16b012b
--- /dev/null
+++ b/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useActiveAccount, useConnect } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets";
+import { InAppConnectEmbed } from "./connect-button";
+
+export function CustomLoginForm() {
+  const [email, setEmail] = useState("");
+  const { connect, isConnecting, error } = useConnect();
+  const account = useActiveAccount();
+
+  const { mutate: loginWithCustomAuthEndpoint } = useMutation({
+    mutationFn: async (email: string) => {
+      const wallet = await connect(async () => {
+        const wallet = inAppWallet();
+        await wallet.connect({
+          strategy: "auth_endpoint",
+          client: THIRDWEB_CLIENT,
+          payload: JSON.stringify({
+            userId: email,
+            email,
+          }),
+        });
+        return wallet;
+      });
+      return wallet;
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    loginWithCustomAuthEndpoint(email);
+  };
+  if (account) {
+    return <InAppConnectEmbed />;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="mt-4">
+      <div className="flex flex-col space-y-2">
+        <label htmlFor="email" className="font-medium text-sm">
+          Email Address
+        </label>
+        <input
+          type="email"
+          id="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="rounded-lg border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Enter your email"
+          required
+        />
+        <button
+          type="submit"
+          className="rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors enabled:hover:bg-blue-600"
+          disabled={isConnecting || !email}
+        >
+          {isConnecting ? "Submitting..." : "Submit"}
+        </button>
+        {error && <p className="max-w-[300px] text-red-500">{error.message}</p>}
+      </div>
+    </form>
+  );
+}