fix(sample-app): align default auth flow, callback path, and login visibility

- Move example callback from /callback-auth-next to /callback for zero-config
- Handle DEFAULT enum in NFT/ERC20 switch statements (use sandbox values)
- Add mutual exclusivity: Auth NextJS vs Passport Methods by login type
- Defer conditional rendering until mount to fix hydration mismatch

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: rodrigo-fournier-immutable

examples/passport/wallets-connect-with-nextjs/app/callback-auth-next/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { CallbackPage, DEFAULT_SANDBOX_CLIENT_ID, deriveDefaultRedirectUri } from "@imtbl/auth-next-client";
+
+export default function AuthCallback() {
+  // Use default sandbox config to match zero-config login flow (getSandboxLoginConfig)
+  const config = {
+    clientId: DEFAULT_SANDBOX_CLIENT_ID,
+    redirectUri: deriveDefaultRedirectUri(),
+  };
+
+  return (
+    <div style={{ padding: '2rem', textAlign: 'center' }}>
+      <h1>Processing authentication...</h1>
+      <CallbackPage config={config} redirectTo="/connect-with-auth-next" />
+    </div>
+  );
+}

examples/passport/wallets-connect-with-nextjs/app/callback/page.tsx

@@ -16,6 +16,7 @@ enum ApproveType {
 const getErc721DefaultContractAddress = (environment: EnvironmentNames) => {
   switch (environment) {
     case EnvironmentNames.SANDBOX:
+    case EnvironmentNames.DEFAULT:
       return '0xbe499b1eaa5c9992486be90ad3a3a4c15dcdfcda';
     case EnvironmentNames.PRODUCTION:
       return '0xb7d76448b0e887ce731e8d17c97ad605df412fb0';

packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/NFTApproval.tsx

@@ -29,6 +29,7 @@ type NFTCandidate = BlockchainData.NFTWithBalance & {
 const chainNameMapping = (environment: EnvironmentNames) => {
   switch (environment) {
     case EnvironmentNames.SANDBOX:
+    case EnvironmentNames.DEFAULT:
       return 'imtbl-zkevm-testnet';
     case EnvironmentNames.PRODUCTION:
       return 'imtbl-zkevm-mainnet';

packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/NFTTransfer.tsx

@@ -11,6 +11,7 @@ import { Interface } from 'ethers';
 const getErc20DefaultContractAddress = (environment: EnvironmentNames) => {
   switch (environment) {
     case EnvironmentNames.SANDBOX:
+    case EnvironmentNames.DEFAULT:
       return '0x7bbe61ba86dc1b128b7c6228a4834bf2c1394240';
     case EnvironmentNames.PRODUCTION:
       return '0x52a6c53869ce09a731cd772f245b97a4401d3348';

packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/SpendingCapApproval.tsx

@@ -15,6 +15,7 @@ import { Interface } from 'ethers';
 const getErc20DefaultContractAddress = (environment: EnvironmentNames) => {
   switch (environment) {
     case EnvironmentNames.SANDBOX:
+    case EnvironmentNames.DEFAULT:
       return '0x7bbe61ba86dc1b128b7c6228a4834bf2c1394240';
     case EnvironmentNames.PRODUCTION:
       return '0x52a6c53869ce09a731cd772f245b97a4401d3348';

packages/passport/sdk-sample-app/src/components/zkevm/EthSendTransactionExamples/TransferERC20.tsx

@@ -33,6 +33,7 @@ const getChainConfig = (environment: EnvironmentNames): ChainConfig[] | undefine
         magicProviderId: 'd196052b-8175-4a45-ba13-838a715d370f',
       }];
     case EnvironmentNames.SANDBOX:
+    case EnvironmentNames.DEFAULT:
       // Use testnet (default chain in wallet package)
       return undefined;
     case EnvironmentNames.PRODUCTION:

packages/passport/sdk-sample-app/src/components/zkevm/ZkEvmWorkflow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { Container, Row } from 'react-bootstrap';
 import { useImmutableSession } from '@imtbl/auth-next-client';
@@ -8,18 +8,42 @@ import Message from '@/components/Message';
 import Environment from '@/components/Environment';
 import { usePassportProvider } from '@/context/PassportProvider';
 import { useStatusProvider } from '@/context/StatusProvider';
+import { useImmutableProvider } from '@/context/ImmutableProvider';
 import { BASE_PATH } from '@/config';
 import PassportMethods from '@/components/PassportMethods';
 import ZkEvmWorkflow from '@/components/zkevm/ZkEvmWorkflow';
 import AuthNextJS from '@/components/AuthNextJS';
+import { EnvironmentNames } from '@/types';
 
+/**
+ * Login flow visibility rules:
+ * - DEFAULT env: only Auth NextJS (SSR) makes sense; Passport Methods hidden
+ * - Logged in via SSR: Passport Methods hidden (mutually exclusive)
+ * - Logged in via Passport (imx/zkEvm): Auth NextJS hidden (mutually exclusive)
+ *
+ * Conditional rendering is deferred until after mount to avoid hydration mismatch:
+ * environment (localStorage), session, and providers differ between server and client.
+ */
 export default function Home() {
+  const [hasMounted, setHasMounted] = useState(false);
   const { isLoading } = useStatusProvider();
+  const { environment } = useImmutableProvider();
   const {
     imxProvider, zkEvmProvider, defaultWalletProvider,
   } = usePassportProvider();
   const { isAuthenticated: isAuthNextJSAuthenticated } = useImmutableSession();
 
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  const isDefaultEnv = environment === EnvironmentNames.DEFAULT;
+  const isPassportConnected = !!imxProvider || !!zkEvmProvider;
+
+  // Before mount: show both for consistent server/client HTML (avoids hydration mismatch)
+  const showAuthNextJS = !hasMounted || isDefaultEnv || !isPassportConnected;
+  const showPassportMethods = !hasMounted || (!isDefaultEnv && !isAuthNextJSAuthenticated);
+
   return (
     <>
       <Head>
@@ -36,12 +60,16 @@ export default function Home() {
                 || !!defaultWalletProvider || isAuthNextJSAuthenticated}
             />
           </Row>
-          <Row className="my-3">
-            <AuthNextJS />
-          </Row>
-          <Row className="my-3">
-            <PassportMethods />
-          </Row>
+          {showAuthNextJS && (
+            <Row className="my-3">
+              <AuthNextJS />
+            </Row>
+          )}
+          {showPassportMethods && (
+            <Row className="my-3">
+              <PassportMethods />
+            </Row>
+          )}
           <Row className="my-3">
             <ImxWorkflow />
           </Row>