[TOOl-3587] Dashboard: Add in-app-wallet login mode

thirdweb-dev · Mar 3, 2025 · e129ab5 · e129ab5
1 parent 0d82fc0
commit e129ab5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -24,7 +24,7 @@ const LazyOnboardingUI = lazy(
   () => import("./onboarding/on-boarding-ui.client"),
 );
 
-const wallets = [
+const loginOptions = [
   inAppWallet({
     auth: {
       options: [
@@ -45,9 +45,27 @@ const wallets = [
   createWallet("io.zerion.wallet"),
 ];
 
+const inAppWalletLoginOptions = [
+  inAppWallet({
+    auth: {
+      options: [
+        "google",
+        "apple",
+        "facebook",
+        "github",
+        "email",
+        "phone",
+        "passkey",
+        "wallet",
+      ],
+    },
+  }),
+];
+
 export function LoginAndOnboardingPage(props: {
   account: Account | undefined;
   redirectPath: string;
+  loginWithInAppWallet: boolean;
 }) {
   return (
     <div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
@@ -91,6 +109,7 @@ export function LoginAndOnboardingPage(props: {
       <LoginAndOnboardingPageContent
         account={props.account}
         redirectPath={props.redirectPath}
+        loginWithInAppWallet={props.loginWithInAppWallet}
       />
     </div>
   );
@@ -99,6 +118,7 @@ export function LoginAndOnboardingPage(props: {
 export function LoginAndOnboardingPageContent(props: {
   account: Account | undefined;
   redirectPath: string;
+  loginWithInAppWallet: boolean;
 }) {
   return (
     <div className="relative flex grow flex-col">
@@ -114,6 +134,7 @@ export function LoginAndOnboardingPageContent(props: {
           <PageContent
             redirectPath={props.redirectPath}
             account={props.account}
+            loginWithInAppWallet={props.loginWithInAppWallet}
           />
         </ClientOnly>
       </main>
@@ -139,6 +160,7 @@ function LoadingCard() {
 function PageContent(props: {
   redirectPath: string;
   account: Account | undefined;
+  loginWithInAppWallet: boolean;
 }) {
   const [screen, setScreen] = useState<
     | { id: "login" }
@@ -190,7 +212,12 @@ function PageContent(props: {
   }
 
   if (connectionStatus !== "connected" || screen.id === "login") {
-    return <CustomConnectEmbed onLogin={onLogin} />;
+    return (
+      <CustomConnectEmbed
+        onLogin={onLogin}
+        loginWithInAppWallet={props.loginWithInAppWallet}
+      />
+    );
   }
 
   if (screen.id === "onboarding") {
@@ -215,6 +242,7 @@ function PageContent(props: {
 
 function CustomConnectEmbed(props: {
   onLogin: () => void;
+  loginWithInAppWallet: boolean;
 }) {
   const { theme } = useTheme();
   const client = useThirdwebClient();
@@ -257,7 +285,9 @@ function CustomConnectEmbed(props: {
             return isLoggedInResult;
           },
         }}
-        wallets={wallets}
+        wallets={
+          props.loginWithInAppWallet ? inAppWalletLoginOptions : loginOptions
+        }
         client={client}
         modalSize="wide"
         theme={getSDKTheme(theme === "light" ? "light" : "dark")}

diff --git a/apps/dashboard/src/app/login/page.tsx b/apps/dashboard/src/app/login/page.tsx
@@ -4,10 +4,13 @@ import { isValidEncodedRedirectPath } from "./isValidEncodedRedirectPath";
 
 export default async function Page(props: {
   searchParams: Promise<{
-    next?: string;
+    next: string | string[] | undefined;
+    "in-app-wallet": string | string[] | undefined;
   }>;
 }) {
-  const nextPath = (await props.searchParams).next;
+  const searchParams = await props.searchParams;
+  const nextPath =
+    typeof searchParams.next === "string" ? searchParams.next : undefined;
   const account = await getRawAccount();
 
   // don't redirect away from login page if authToken is already present and onboarding is done
@@ -20,6 +23,10 @@ export default async function Page(props: {
     nextPath && isValidEncodedRedirectPath(nextPath) ? nextPath : "/team";
 
   return (
-    <LoginAndOnboardingPage account={account} redirectPath={redirectPath} />
+    <LoginAndOnboardingPage
+      account={account}
+      redirectPath={redirectPath}
+      loginWithInAppWallet={searchParams["in-app-wallet"] === "true"}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
@@ -53,6 +53,7 @@ export function NebulaLoginPage(props: {
 
       {showPage === "connect" && (
         <LoginAndOnboardingPageContent
+          loginWithInAppWallet={false}
           account={props.account}
           redirectPath={
             message ? `/?prompt=${encodeURIComponent(message)}` : "/"