[Playground] Feature: Adds smart account auth (#5979)

---
title: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
---

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.

## How to test
Unit tests, playground, etc.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new smart account authentication feature in the `playground-web` application, allowing users to sign in using Ethereum. It adds a new component for the authentication button and integrates it into the main application page.

### Detailed summary
- Added `SmartAccountAuthButton` component for Ethereum authentication.
- Implemented `SmartAccountAuthPreview` to display JWT cookies.
- Updated `page.tsx` to include `SmartAccountAuth` section.
- Added a code example demonstrating the authentication button usage.

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

<!-- end pr-codex -->

Author: gregfromstl

apps/playground-web/src/app/connect/auth/page.tsx

@@ -1,5 +1,6 @@
 import { BasicAuthPreview } from "@/components/auth/basic-auth";
 import { GatedContentPreview } from "@/components/auth/gated-content";
+import { SmartAccountAuthPreview } from "@/components/auth/smart-account-auth";
 import { CodeExample } from "@/components/code/code-example";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { metadataBase } from "@/lib/constants";
@@ -39,6 +40,12 @@ export default function Page() {
         <section className="space-y-8">
           <GatedContent />
         </section>
+
+        <div className="h-14" />
+
+        <section className="space-y-8">
+          <SmartAccountAuth />
+        </section>
       </main>
     </ThirdwebProvider>
   );
@@ -148,3 +155,58 @@ export async function GatedContentPreview() {
     </>
   );
 }
+
+function SmartAccountAuth() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+          Smart Account Auth
+        </h2>
+        <p className="max-w-[600px]">
+          Use smart accounts with Sign in with Ethereum (SIWE)
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<SmartAccountAuthPreview />}
+        code={`"use client";
+
+import {
+  generatePayload,
+  isLoggedIn,
+  login,
+  logout,
+} from "@/app/connect/auth/server/actions/auth";
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { ConnectButton } from "thirdweb/react";
+import { defineChain } from "thirdweb";
+
+export function AuthButton() {
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      accountAbstraction={{
+        chain: defineChain(17000),
+        sponsorGas: true
+      }}
+      auth={{
+        // The following methods run on the server (not client)!
+        isLoggedIn: async () => {
+          const authResult = await isLoggedIn();
+          if (!authResult) return false;
+          return true;
+        },
+        doLogin: async (params) => await login(params),
+        getLoginPayload: async ({ address }) => generatePayload({ address }),
+        doLogout: async () => await logout(),
+      }}
+    />
+  );
+}
+`}
+        lang="tsx"
+      />
+    </>
+  );
+}

apps/playground-web/src/components/auth/smart-account-auth-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+import {
+  generatePayload,
+  isLoggedIn,
+  login,
+  logout,
+} from "@/app/connect/auth/server/actions/auth";
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { defineChain } from "thirdweb";
+import { ConnectButton } from "thirdweb/react";
+
+export function SmartAccountAuthButton() {
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      accountAbstraction={{
+        chain: defineChain(17000),
+        sponsorGas: true,
+      }}
+      auth={{
+        isLoggedIn: (address) => isLoggedIn(address),
+        doLogin: (params) => login(params),
+        getLoginPayload: ({ address }) =>
+          generatePayload({ address, chainId: 17000 }),
+        doLogout: () => logout(),
+      }}
+    />
+  );
+}

apps/playground-web/src/components/auth/smart-account-auth.tsx

@@ -0,0 +1,36 @@
+import type { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
+import { cookies } from "next/headers";
+import { cn } from "../../lib/utils";
+import { SmartAccountAuthButton } from "./smart-account-auth-button";
+
+export async function SmartAccountAuthPreview() {
+  const jwt = (await cookies()).get("jwt");
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="mx-auto">
+        <SmartAccountAuthButton />
+      </div>
+      {jwt && !!jwt.value && (
+        <table className="table-auto border-collapse rounded-lg backdrop-blur">
+          <tbody>
+            {Object.keys(jwt).map((key) => (
+              <tr key={key} className="">
+                <td className="rounded border p-2">{key}</td>
+                <td
+                  className={cn(
+                    "max-h-[200px] max-w-[250px] overflow-y-auto whitespace-normal break-words border p-2",
+                    {
+                      "text-xs": key === "value",
+                    },
+                  )}
+                >
+                  {jwt[key as keyof RequestCookie]}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}