feat(auth-next,wallet): add default auth with auto-detection

.syncpackrc

@@ -13,6 +13,13 @@
       "dependencyTypes": ["peer"],
       "packages": ["@imtbl/auth-next-server", "@imtbl/auth-next-client", "@imtbl/sdk"],
       "isIgnored": true
+    },
+    {
+      "label": "Allow Next.js version flexibility in auth-next devDependencies",
+      "dependencies": ["next"],
+      "dependencyTypes": ["dev"],
+      "packages": ["@imtbl/auth-next-server", "@imtbl/auth-next-client"],
+      "isIgnored": true
     }
   ]
 }

examples/passport/wallets-connect-with-nextjs/.env

@@ -1,2 +1,5 @@
 NEXT_PUBLIC_PUBLISHABLE_KEY="pk_imapik-test-5ss4GpFy-n@$$Ye3LSox"
-NEXT_PUBLIC_CLIENT_ID="K846H940Uxokhz1aDb034QwBclYnAH24"
+NEXT_PUBLIC_CLIENT_ID="K846H940Uxokhz1aDb034QwBclYnAH24"
+
+# Required for Auth-Next example (NextAuth.js)
+AUTH_SECRET="test-secret-key-for-development-minimum-32-characters-long-change-in-prod"

examples/passport/wallets-connect-with-nextjs/.env.example

@@ -1,2 +1,7 @@
 NEXT_PUBLIC_PUBLISHABLE_KEY=
-NEXT_PUBLIC_CLIENT_ID=
+NEXT_PUBLIC_CLIENT_ID=
+
+# Required for Auth-Next example (NextAuth.js)
+# Generate with: openssl rand -base64 32
+# See: https://next-auth.js.org/configuration/options#nextauth_secret
+AUTH_SECRET=your-secret-key-min-32-characters-long-change-this

examples/passport/wallets-connect-with-nextjs/README.md

@@ -10,7 +10,29 @@ pnpm dev
 
 browse to `http://localhost:3000` to see the full list of examples.
 
+## Examples
+
+1. **Connect with EIP-1193** - Standard Ethereum provider
+2. **Connect with EtherJS** - Using ethers.js library
+3. **Connect with Wagmi** - Using wagmi library
+4. **🆕 Connect with Auth-Next (Default Auth)** - Zero-config auth with `@imtbl/auth-next-client` + `@imtbl/wallet`
+
 ## Required Environment Variables
 
+### For Passport SDK Examples (EIP-1193, EtherJS, Wagmi)
 - NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
-- NEXT_PUBLIC_CLIENT_ID // replace with your client ID from Hub
+- NEXT_PUBLIC_CLIENT_ID // replace with your client ID from Hub
+
+### For Auth-Next Example (Default Auth)
+- `AUTH_SECRET` - Required for NextAuth.js (min 32 characters). Generate one with:
+  `openssl rand -base64 32`, or see [NextAuth.js configuration](https://next-auth.js.org/configuration/options#nextauth_secret)
+- No other variables needed! ClientId and redirectUri are auto-detected.
+
+## Auth-Next Default Auth
+
+The `/connect-with-auth-next` route demonstrates:
+- Zero-config authentication using `@imtbl/auth-next-client` and `@imtbl/auth-next-server`
+- Integration with `@imtbl/wallet` using the `getUser` function from `useImmutableSession()`
+- Auto-detection of clientId (sandbox vs production based on hostname)
+- Auto-derivation of redirectUri (from `window.location.origin`)
+- Full wallet connection flow without manual configuration

examples/passport/wallets-connect-with-nextjs/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/lib/auth-next";
+
+export const { GET, POST } = handlers;

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { CallbackPage } from "@imtbl/auth-next-client";
+import {
+  DEFAULT_PRODUCTION_CLIENT_ID,
+  DEFAULT_SANDBOX_CLIENT_ID,
+} from "@imtbl/auth-next-client";
+
+export default function AuthNextCallback() {
+  // Auto-detect environment and derive config
+  const isSandbox = typeof window !== 'undefined' && 
+    (window.location.hostname.includes('sandbox') || window.location.hostname.includes('localhost'));
+
+  const config = {
+    clientId: isSandbox ? DEFAULT_SANDBOX_CLIENT_ID : DEFAULT_PRODUCTION_CLIENT_ID,
+    redirectUri: typeof window !== 'undefined' ? `${window.location.origin}/callback-auth-next` : '/callback-auth-next',
+  };
+
+  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/connect-with-auth-next/page.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { Button, Heading, Body } from '@biom3/react';
+import { useImmutableSession, useLogin, useLogout } from '@imtbl/auth-next-client';
+import { connectWallet } from '@imtbl/wallet';
+import { useState } from 'react';
+import { SessionProvider } from 'next-auth/react';
+
+function ConnectWithAuthNextContent() {
+  const { isAuthenticated, session, getUser } = useImmutableSession();
+  const { loginWithPopup, isLoggingIn, error: loginError } = useLogin();
+  const { logout, isLoggingOut, error: logoutError } = useLogout();
+  const [walletAddress, setWalletAddress] = useState<string>('');
+  const [walletError, setWalletError] = useState<string>('');
+
+  const handleLogin = async () => {
+    try {
+      await loginWithPopup(); // Zero config!
+    } catch (err) {
+      console.error('Login failed:', err);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await logout(); // Zero config!
+    } catch (err) {
+      console.error('Logout failed:', err);
+    }
+  };
+
+  const handleConnectWallet = async () => {
+    try {
+      setWalletError('');
+
+      // Connect wallet using getUser from useImmutableSession
+      const provider = await connectWallet({
+        getUser, // Uses default auth from NextAuth session!
+      });
+
+      // Get the wallet address
+      const accounts = await provider.request({ 
+        method: 'eth_requestAccounts' 
+      }) as string[];
+
+      setWalletAddress(accounts[0]);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Failed to connect wallet';
+      setWalletError(errorMsg);
+      console.error('Wallet connection failed:', err);
+    }
+  };
+
+  return (
+    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+      <Heading size="medium" className="mb-1">
+        Connect Wallet with Auth-Next (Default Auth)
+      </Heading>
+
+      <Body size="medium" className="mb-1">
+        This example demonstrates using <code>@imtbl/auth-next-client</code> and <code>@imtbl/wallet</code>
+        together with zero-config default auth.
+      </Body>
+
+      <div style={{ 
+        background: '#f5f5f5', 
+        padding: '1rem', 
+        borderRadius: '0.5rem',
+        marginBottom: '1rem'
+      }}>
+        <strong>Status:</strong> {isAuthenticated ? '✅ Authenticated' : '❌ Not Authenticated'}
+        {session?.user?.email && (
+          <div style={{ marginTop: '0.5rem' }}>
+            <strong>Email:</strong> {session.user.email}
+          </div>
+        )}
+        {walletAddress && (
+          <div style={{ marginTop: '0.5rem' }}>
+            <strong>Wallet:</strong> <code>{walletAddress}</code>
+          </div>
+        )}
+      </div>
+
+      {!isAuthenticated ? (
+        <>
+          <Button 
+            size="medium" 
+            className="mb-1"
+            onClick={handleLogin}
+            disabled={isLoggingIn}
+          >
+            {isLoggingIn ? 'Signing in...' : '🔐 Sign In (Zero Config)'}
+          </Button>
+          {loginError && (
+            <div style={{ color: 'red', marginTop: '0.5rem' }}>
+              Error: {loginError}
+            </div>
+          )}
+          <Body size="small" className="mb-1" style={{ color: '#666' }}>
+            Uses <code>loginWithPopup()</code> with no configuration.
+            ClientId and redirectUri are auto-detected!
+          </Body>
+        </>
+      ) : (
+        <>
+          <Button 
+            size="medium" 
+            className="mb-1"
+            onClick={handleConnectWallet}
+            disabled={!!walletAddress}
+          >
+            {walletAddress ? '✅ Wallet Connected' : '💼 Connect Wallet'}
+          </Button>
+
+          <Button 
+            size="medium" 
+            className="mb-1"
+            onClick={handleLogout}
+            disabled={isLoggingOut}
+          >
+            {isLoggingOut ? 'Signing out...' : '🚪 Sign Out'}
+          </Button>
+
+          {walletError && (
+            <div style={{ color: 'red', marginTop: '0.5rem' }}>
+              Wallet Error: {walletError}
+            </div>
+          )}
+          {logoutError && (
+            <div style={{ color: 'red', marginTop: '0.5rem' }}>
+              Logout Error: {logoutError}
+            </div>
+          )}
+
+          <div style={{ 
+            background: '#e8f5e9', 
+            padding: '1rem', 
+            borderRadius: '0.5rem',
+            marginTop: '1rem'
+          }}>
+            <strong>✅ Integration Test:</strong>
+            <ul style={{ marginTop: '0.5rem', paddingLeft: '1.5rem' }}>
+              <li>Auth via <code>useImmutableSession()</code></li>
+              <li>Wallet via <code>connectWallet(&#123; getUser &#125;)</code></li>
+              <li>Zero configuration required!</li>
+            </ul>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function ConnectWithAuthNext() {
+  return (
+    <SessionProvider>
+      <ConnectWithAuthNextContent />
+    </SessionProvider>
+  );
+}

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

@@ -26,6 +26,12 @@ export default function Home() {
       size="medium" 
       rc={<NextLink href="/connect-with-wagmi" />}>
         Connect with Wagmi
-      </Button> 
+      </Button>
+      <Button       
+      className="mb-1"
+      size="medium" 
+      rc={<NextLink href="/connect-with-auth-next" />}>
+        🆕 Connect with Auth-Next (Default Auth)
+      </Button>
   </>);
 }

examples/passport/wallets-connect-with-nextjs/lib/auth-next.ts

@@ -0,0 +1,8 @@
+import NextAuth from "next-auth";
+import { createDefaultAuthConfig } from "@imtbl/auth-next-server";
+
+/**
+ * Default auth configuration for testing.
+ * This uses zero-config setup to demonstrate default auth functionality.
+ */
+export const { handlers, auth, signIn, signOut } = NextAuth(createDefaultAuthConfig());

examples/passport/wallets-connect-with-nextjs/package.json

@@ -4,9 +4,13 @@
   "dependencies": {
     "@biom3/react": "^0.27.12",
     "@imtbl/sdk": "workspace:*",
+    "@imtbl/auth-next-client": "workspace:*",
+    "@imtbl/auth-next-server": "workspace:*",
+    "@imtbl/wallet": "workspace:*",
     "@tanstack/react-query": "^5.51.11",
     "ethers": "^6.13.4",
-    "next": "14.2.25",
+    "next": "15.2.6",
+    "next-auth": "^5.0.0-beta.30",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "wagmi": "^2.11.3"
@@ -17,7 +21,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "eslint": "^8",
-    "eslint-config-next": "14.2.5",
+    "eslint-config-next": "15.2.6",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.6.2"

examples/passport/wallets-connect-with-nextjs/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/auth-next-client/README.md

@@ -100,6 +100,42 @@ export default function Callback() {
 }
 ```
 
+### Default Auth (Zero Config)
+
+When using `createDefaultAuthConfig()` on the server, you can call login/logout with no config—clientId and redirectUri are auto-detected:
+
+```tsx
+// With default auth - no config needed
+function LoginButton() {
+  const { isAuthenticated } = useImmutableSession();
+  const { loginWithPopup, isLoggingIn, error } = useLogin();
+
+  if (isAuthenticated) return <p>You are logged in!</p>;
+
+  return (
+    <button onClick={() => loginWithPopup()} disabled={isLoggingIn}>
+      {isLoggingIn ? "Signing in..." : "Sign In"}
+    </button>
+  );
+}
+```
+
+Or with custom config (pass full LoginConfig/LogoutConfig when overriding):
+
+```tsx
+// With custom config - pass complete config
+loginWithPopup({
+  clientId: process.env.NEXT_PUBLIC_IMMUTABLE_CLIENT_ID!,
+  redirectUri: `${window.location.origin}/callback`,
+});
+logout({
+  clientId: process.env.NEXT_PUBLIC_IMMUTABLE_CLIENT_ID!,
+  logoutRedirectUri: process.env.NEXT_PUBLIC_BASE_URL!,
+});
+```
+
+See the [wallets-connect-with-nextjs](../../examples/passport/wallets-connect-with-nextjs) example for a full integration with `@imtbl/wallet`.
+
 ### 5. Add Login Button
 
 Use the `useLogin` hook for login flows with built-in state management: