Add Login component with Google authentication support

jnsdls · jnsdls · commit b65c5077a483 · 2025-05-21T01:51:27.000-07:00
diff --git a/apps/playground-web/src/app/connect/login/api/[...all]/route.ts b/apps/playground-web/src/app/connect/login/api/[...all]/route.ts
@@ -0,0 +1,13 @@
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { getDomain } from "@/lib/constants";
+import { SERVER_WALLET } from "@/lib/server-wallet";
+
+import { Login } from "thirdweb";
+
+export const { GET, POST } = Login.Server.toNextJsHandler(
+  Login.Server.createAuthHandler({
+    client: THIRDWEB_CLIENT,
+    domain: getDomain() ?? "",
+    serverWallet: SERVER_WALLET,
+  }),
+);
diff --git a/apps/playground-web/src/app/connect/login/page.tsx b/apps/playground-web/src/app/connect/login/page.tsx
@@ -0,0 +1,34 @@
+import { CodeExample } from "@/components/code/code-example";
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import { PageLayout } from "../../../components/blocks/APIHeader";
+import { BasicLoginExample } from "../../../components/login/basic-example";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Login | thirdweb Connect",
+  description: "TODO",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <PageLayout
+        title="Login"
+        description={
+          <>Let users login to your app using any authentication provider.</>
+        }
+        docsLink="https://portal.thirdweb.com/typescript/v5/auth?utm_source=playground"
+      >
+        <div className="flex flex-col gap-14">
+          <CodeExample
+            lang="ts"
+            code={"TODO"}
+            preview={<BasicLoginExample />}
+          />
+        </div>
+      </PageLayout>
+    </ThirdwebProvider>
+  );
+}
diff --git a/apps/playground-web/src/app/engine/actions.ts b/apps/playground-web/src/app/engine/actions.ts
@@ -1,19 +1,11 @@
 "use server";
 
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { SERVER_WALLET } from "@/lib/server-wallet";
 import { Engine, defineChain, encode, getContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import * as ERC20 from "thirdweb/extensions/erc20";
 import * as ERC1155 from "thirdweb/extensions/erc1155";
-import { THIRDWEB_CLIENT } from "../../lib/client";
-const BACKEND_WALLET_ADDRESS = process.env.ENGINE_BACKEND_WALLET as string;
-const ENGINE_VAULT_ACCESS_TOKEN = process.env
-  .ENGINE_VAULT_ACCESS_TOKEN as string;
-
-const serverWallet = Engine.serverWallet({
-  address: BACKEND_WALLET_ADDRESS,
-  client: THIRDWEB_CLIENT,
-  vaultAccessToken: ENGINE_VAULT_ACCESS_TOKEN,
-});
 
 export async function airdrop_tokens_with_engine(params: {
   contractAddress: string;
@@ -44,7 +36,7 @@ export async function airdrop_tokens_with_engine(params: {
     data,
   });
 
-  const res = await serverWallet.enqueueTransaction({ transaction: tx });
+  const res = await SERVER_WALLET.enqueueTransaction({ transaction: tx });
 
   return res.transactionId;
 }
@@ -82,7 +74,7 @@ export async function mint_erc1155_nft_with_engine(params: MintNFTParams) {
     to: params.toAddress,
     supply: BigInt(params.metadataWithSupply.supply),
   });
-  const res = await serverWallet.enqueueTransaction({ transaction: tx });
+  const res = await SERVER_WALLET.enqueueTransaction({ transaction: tx });
 
   return res.transactionId;
 }
@@ -106,7 +98,7 @@ export async function claim_erc1155_nft_with_engine(params: ClaimNFTParams) {
     tokenId: BigInt(params.tokenId),
     quantity: BigInt(params.quantity),
   });
-  const res = await serverWallet.enqueueTransaction({ transaction: tx });
+  const res = await SERVER_WALLET.enqueueTransaction({ transaction: tx });
 
   return res.transactionId;
 }
diff --git a/apps/playground-web/src/components/login/basic-example.tsx b/apps/playground-web/src/components/login/basic-example.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useRef, useState } from "react";
+import { Login } from "thirdweb";
+import { sepolia } from "thirdweb/chains";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+
+export function BasicLoginExample() {
+  const [account, setAccount] = useState<Login.Client.LoginResult>();
+  const otpRef = useRef<HTMLInputElement>(null);
+
+  if (!account) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Button
+          onClick={async () => {
+            const account = await Login.Client.login({
+              type: "google",
+              client: THIRDWEB_CLIENT,
+              baseURL: "http://localhost:3000/connect/login/api/auth",
+              chain: sepolia,
+            });
+            setAccount(account);
+          }}
+        >
+          Login with Google
+        </Button>
+      </div>
+    );
+  }
+
+  if (account.status === "requires_otp") {
+    return (
+      <div className="flex flex-col gap-4">
+        <Input ref={otpRef} placeholder="OTP" />
+        <Button
+          onClick={async () => {
+            if (!otpRef.current?.value) {
+              return;
+            }
+            setAccount(await account.verifyOtp(otpRef.current?.value));
+          }}
+        >
+          Verify OTP
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p>Logged in as: {account.id}</p>
+      <Button
+        onClick={async () => {
+          const jwt = await account.getJWT();
+          alert(`JWT: ${jwt}`);
+        }}
+      >
+        Get JWT
+      </Button>
+      <Button
+        onClick={async () => {
+          await account.logout();
+          setAccount(undefined);
+        }}
+      >
+        Logout
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/playground-web/src/lib/constants.ts b/apps/playground-web/src/lib/constants.ts
@@ -4,7 +4,7 @@ export const metadataBase = process.env.VERCEL_ENV
   ? new URL("https://playground.thirdweb.com")
   : undefined;
 
-const getDomain = () => {
+export const getDomain = () => {
   if (process.env.VERCEL_ENV === "production") {
     return "thirdweb.com";
   }
diff --git a/apps/playground-web/src/lib/server-wallet.ts b/apps/playground-web/src/lib/server-wallet.ts
@@ -0,0 +1,15 @@
+import "server-only";
+import { Engine } from "thirdweb";
+import { sepolia } from "thirdweb/chains";
+import { THIRDWEB_CLIENT } from "./client";
+
+const BACKEND_WALLET_ADDRESS = process.env.ENGINE_BACKEND_WALLET as string;
+const ENGINE_VAULT_ACCESS_TOKEN = process.env
+  .ENGINE_VAULT_ACCESS_TOKEN as string;
+
+export const SERVER_WALLET = Engine.serverWallet({
+  address: BACKEND_WALLET_ADDRESS,
+  client: THIRDWEB_CLIENT,
+  vaultAccessToken: ENGINE_VAULT_ACCESS_TOKEN,
+  chain: sepolia,
+});
diff --git a/packages/thirdweb/src/login/client/index.ts b/packages/thirdweb/src/login/client/index.ts
@@ -1 +1 @@
-export { login, type LoginOptions as LoginParams } from "./login.js";
+export { login, type LoginOptions, type LoginResult } from "./login.js";
diff --git a/packages/thirdweb/src/login/client/login.ts b/packages/thirdweb/src/login/client/login.ts
@@ -30,6 +30,7 @@ export type LoginOptions = (
     }
 ) & {
   client: ThirdwebClient;
+  chain: Chain;
   options?: {
     sponsorGas?: boolean;
     redirectUrl?: string;
@@ -39,10 +40,12 @@ export type LoginOptions = (
   baseURL?: string;
 };
 
+export type LoginResult = Awaited<ReturnType<typeof login>>;
+
 export async function login(loginOptions: LoginOptions) {
   const IAW = inAppWallet({
     auth: {
-      mode: "redirect",
+      mode: "popup",
       options: [],
       redirectUrl: loginOptions.options?.redirectUrl,
       passkeyDomain: loginOptions.options?.passkeyDomain,
@@ -61,6 +64,7 @@ export async function login(loginOptions: LoginOptions) {
         client: loginOptions.client,
         strategy: "jwt",
         jwt: loginOptions.jwt,
+        chain: loginOptions.chain,
       });
 
       return mapAccount(account, IAW, loginOptions.baseURL);
@@ -86,6 +90,7 @@ export async function login(loginOptions: LoginOptions) {
             phoneNumber: loginOptions.phoneNumber,
             verificationCode,
             client: loginOptions.client,
+            chain: loginOptions.chain,
           });
 
           return mapAccount(account, IAW, loginOptions.baseURL);
@@ -114,6 +119,7 @@ export async function login(loginOptions: LoginOptions) {
             email: loginOptions.email,
             verificationCode,
             client: loginOptions.client,
+            chain: loginOptions.chain,
           });
 
           return mapAccount(account, IAW, loginOptions.baseURL);
@@ -142,6 +148,7 @@ export async function login(loginOptions: LoginOptions) {
         const account = await IAW.connect({
           client: loginOptions.client,
           strategy: loginOptions.type,
+          chain: loginOptions.chain,
         });
 
         return mapAccount(account, IAW, loginOptions.baseURL);
@@ -229,7 +236,7 @@ function mapAccount(
       const payloadResponse = await authClient("/payload", {
         query: {
           address: account.address,
-          chainId: IAW.getChain()?.id,
+          chainId: IAW.getChain()?.id?.toString(),
         },
       });
       if (payloadResponse.error) {
diff --git a/packages/thirdweb/src/login/index.ts b/packages/thirdweb/src/login/index.ts
@@ -2,7 +2,7 @@ export * as Client from "./client/index.js";
 export * as Server from "./server/index.js";
 
 // client
-export { login, type LoginOptions as LoginParams } from "./client/login.js";
+export { login, type LoginOptions, type LoginResult } from "./client/login.js";
 
 // server
 export {
diff --git a/packages/thirdweb/src/login/server/auth-handler.ts b/packages/thirdweb/src/login/server/auth-handler.ts
@@ -80,14 +80,14 @@ export function createAuthHandler({
       method: "GET",
       query: z.object({
         address: z.string().refine(isAddress, "Invalid address"),
-        chainId: z.number().optional(),
+        chainId: z.string().optional(),
       }),
     },
     (ctx) => {
       const { address, chainId } = ctx.query;
       return twAuth.generatePayload({
         address,
-        chainId: chainId ? Number(chainId) : undefined,
+        chainId: chainId ? Number.parseInt(chainId) : undefined,
       });
     },
   );

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ export const metadataBase = process.env.VERCEL_ENV`
`4`	`4`	`? new URL("https://playground.thirdweb.com")`
`5`	`5`	`: undefined;`
`6`	`6`
`7`		`-const getDomain = () => {`
	`7`	`+export const getDomain = () => {`
`8`	`8`	`if (process.env.VERCEL_ENV === "production") {`
`9`	`9`	`return "thirdweb.com";`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export { login, type LoginOptions as LoginParams } from "./login.js";`
	`1`	`+export { login, type LoginOptions, type LoginResult } from "./login.js";`