@imtbl/auth-next-client and @imtbl/wallet
+ together with zero-config default auth.
+
+
+ {walletAddress}
+ loginWithPopup() with no configuration.
+ ClientId and redirectUri are auto-detected!
+
+
+ ) : (
+ <>
+
+
+
+
+ {walletError && (
+ useImmutableSession()connectWallet({ getUser })You are logged in!
; + + return ( + + ); +} +``` + +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: diff --git a/packages/auth-next-client/package.json b/packages/auth-next-client/package.json index d1bad50656..100b793813 100644 --- a/packages/auth-next-client/package.json +++ b/packages/auth-next-client/package.json @@ -40,7 +40,7 @@ "@imtbl/auth-next-server": "workspace:*" }, "peerDependencies": { - "next": "^15.0.0", + "next": "^14.0.0 || ^15.0.0", "next-auth": "^5.0.0-beta.25", "react": "^18.2.0 || ^19.0.0" }, @@ -65,7 +65,7 @@ "@types/react": "^18.3.5", "eslint": "^8.56.0", "jest": "^29.7.0", - "next": "^15.1.6", + "next": "^15.2.6", "next-auth": "^5.0.0-beta.30", "react": "^18.2.0", "tsup": "^8.3.0", diff --git a/packages/auth-next-client/src/constants.ts b/packages/auth-next-client/src/constants.ts index 83a42e0522..c2d8c53f1d 100644 --- a/packages/auth-next-client/src/constants.ts +++ b/packages/auth-next-client/src/constants.ts @@ -1,45 +1,16 @@ /** - * Shared constants for @imtbl/auth-next-client + * Client-side constants for @imtbl/auth-next-client. + * Defined locally to avoid importing from auth-next-server (which uses next/server). + * Values must stay in sync with auth-next-server constants. */ -/** - * Default Immutable authentication domain - */ export const DEFAULT_AUTH_DOMAIN = 'https://auth.immutable.com'; - -/** - * Default OAuth audience - */ export const DEFAULT_AUDIENCE = 'platform_api'; - -/** - * Default OAuth scopes - */ export const DEFAULT_SCOPE = 'openid profile email offline_access transact'; - -/** - * NextAuth credentials provider ID for Immutable - */ export const IMMUTABLE_PROVIDER_ID = 'immutable'; - -/** - * Default NextAuth API base path - */ export const DEFAULT_NEXTAUTH_BASE_PATH = '/api/auth'; - -/** - * Default token expiry in seconds (15 minutes) - * Used as fallback when exp claim cannot be extracted from JWT - */ -export const DEFAULT_TOKEN_EXPIRY_SECONDS = 900; - -/** - * Default token expiry in milliseconds - */ -export const DEFAULT_TOKEN_EXPIRY_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1000; - -/** - * Buffer time in milliseconds before token expiry to trigger refresh. - * Matches TOKEN_EXPIRY_BUFFER_SECONDS (60s) in @imtbl/auth-next-server. - */ -export const TOKEN_EXPIRY_BUFFER_MS = 60 * 1000; +export const DEFAULT_SANDBOX_CLIENT_ID = 'mjtCL8mt06BtbxSkp2vbrYStKWnXVZfo'; +export const DEFAULT_REDIRECT_URI_PATH = '/callback'; +export const DEFAULT_LOGOUT_REDIRECT_URI_PATH = '/'; +export const DEFAULT_TOKEN_EXPIRY_MS = 900_000; +export const TOKEN_EXPIRY_BUFFER_MS = 60_000; diff --git a/packages/auth-next-client/src/defaultConfig.ts b/packages/auth-next-client/src/defaultConfig.ts new file mode 100644 index 0000000000..bc8916f8a6 --- /dev/null +++ b/packages/auth-next-client/src/defaultConfig.ts @@ -0,0 +1,19 @@ +/** + * Sandbox default redirect URI for zero-config mode. + * Defined locally to avoid importing from auth-next-server (which uses next/server). + * OAuth requires an absolute URL; this runs in the browser when login is invoked. + * + * @internal + */ + +import { DEFAULT_REDIRECT_URI_PATH } from './constants'; + +export function deriveDefaultRedirectUri(): string { + if (typeof window === 'undefined') { + throw new Error( + '[auth-next-client] deriveDefaultRedirectUri requires window. ' + + 'Login hooks run in the browser when the user triggers login.', + ); + } + return `${window.location.origin}${DEFAULT_REDIRECT_URI_PATH}`; +} diff --git a/packages/auth-next-client/src/hooks.test.tsx b/packages/auth-next-client/src/hooks.test.tsx index 957dfe7381..2d3f4420c7 100644 --- a/packages/auth-next-client/src/hooks.test.tsx +++ b/packages/auth-next-client/src/hooks.test.tsx @@ -23,6 +23,10 @@ jest.mock('@imtbl/auth', () => ({ logoutWithRedirect: jest.fn(), })); +jest.mock('./defaultConfig', () => ({ + deriveDefaultRedirectUri: jest.fn(() => 'http://localhost:3000/callback'), +})); + import { useImmutableSession } from './hooks'; // --------------------------------------------------------------------------- diff --git a/packages/auth-next-client/src/hooks.tsx b/packages/auth-next-client/src/hooks.tsx index 2aa038b79f..5677219f13 100644 --- a/packages/auth-next-client/src/hooks.tsx +++ b/packages/auth-next-client/src/hooks.tsx @@ -18,7 +18,16 @@ import { loginWithRedirect as rawLoginWithRedirect, logoutWithRedirect as rawLogoutWithRedirect, } from '@imtbl/auth'; -import { IMMUTABLE_PROVIDER_ID, TOKEN_EXPIRY_BUFFER_MS } from './constants'; +import { deriveDefaultRedirectUri } from './defaultConfig'; +import { + IMMUTABLE_PROVIDER_ID, + TOKEN_EXPIRY_BUFFER_MS, + DEFAULT_SANDBOX_CLIENT_ID, + DEFAULT_LOGOUT_REDIRECT_URI_PATH, + DEFAULT_AUTH_DOMAIN, + DEFAULT_SCOPE, + DEFAULT_AUDIENCE, +} from './constants'; import { storeIdToken, getStoredIdToken, clearStoredIdToken } from './idTokenStorage'; // --------------------------------------------------------------------------- @@ -42,6 +51,37 @@ function deduplicatedUpdate( return pendingRefresh; } +// --------------------------------------------------------------------------- +// Sandbox defaults for zero-config (no config or full config - no merge) +// --------------------------------------------------------------------------- + +function getSandboxLoginConfig(): LoginConfig { + const redirectUri = deriveDefaultRedirectUri(); + return { + clientId: DEFAULT_SANDBOX_CLIENT_ID, + redirectUri, + popupRedirectUri: redirectUri, + scope: DEFAULT_SCOPE, + audience: DEFAULT_AUDIENCE, + authenticationDomain: DEFAULT_AUTH_DOMAIN, + }; +} + +function getSandboxLogoutConfig(): LogoutConfig { + if (typeof window === 'undefined') { + throw new Error( + '[auth-next-client] getSandboxLogoutConfig requires window. ' + + 'Logout runs in the browser when the user triggers it.', + ); + } + const logoutRedirectUri = window.location.origin + DEFAULT_LOGOUT_REDIRECT_URI_PATH; + return { + clientId: DEFAULT_SANDBOX_CLIENT_ID, + logoutRedirectUri, + authenticationDomain: DEFAULT_AUTH_DOMAIN, + }; +} + /** * Internal session type with full token data (not exported). * Used internally by the hook for token validation, refresh logic, and getUser/getAccessToken. @@ -341,14 +381,17 @@ export function useImmutableSession(): UseImmutableSessionReturn { /** * Return type for useLogin hook + * + * Config is optional - when omitted, defaults are auto-derived (clientId, redirectUri, etc.). + * When provided, must be a complete LoginConfig. */ export interface UseLoginReturn { /** Start login with popup flow */ - loginWithPopup: (config: LoginConfig, options?: StandaloneLoginOptions) => PromiseYou are logged in!
; + * } + * + * return ( + * <> + * + * {error &&{error}
} + * + * ); + * } + * ``` + * + * @example With custom configuration + * ```tsx + * import { useLogin, useImmutableSession } from '@imtbl/auth-next-client'; * * function LoginButton() { * const { isAuthenticated } = useImmutableSession(); * const { loginWithPopup, isLoggingIn, error } = useLogin(); * + * const handleLogin = () => { + * loginWithPopup({ + * clientId: process.env.NEXT_PUBLIC_IMMUTABLE_CLIENT_ID, + * redirectUri: `${window.location.origin}/callback`, + * }); + * }; + * * if (isAuthenticated) { * returnYou are logged in!
; * } * * return ( * <> - *