You are logged in!
; + } + + return ( +{error}
} +Please log in first
; + } + + return ; +} +``` + +## Components + +### `CallbackPage` + +Handles the OAuth callback after Immutable authentication. This component processes the authorization code from the URL and establishes the session. + +```tsx +// app/callback/page.tsx +"use client"; + +import { CallbackPage } from "@imtbl/auth-next-client"; + +export default function Callback() { + return ( +You are logged in!
; + } + + return ( +Signing in...
} + {error &&{error}
} +Your session has expired. Please sign in again.
+ +Please sign in to continue.
+ +{error}
+ +Completing authentication...
+Please log in
; + * } + * + * return ; + * } + * ``` + */ +export function useImmutableSession(): UseImmutableSessionReturn { + const { data: sessionData, status, update } = useSession(); + + // Cast session to our extended type + const session = sessionData as ImmutableSession | null; + + const isLoading = status === 'loading'; + const isAuthenticated = status === 'authenticated' && !!session; + + // Use a ref to always have access to the latest session. + // This avoids stale closure issues when the wallet stores the getUser function + // and calls it later - the ref always points to the current session. + const sessionRef = useRefYou are logged in!
; + * } + * + * return ( + * <> + * + * {error &&{error}
} + * + * ); + * } + * ``` + */ +export function useLogin(): UseLoginReturn { + const [isLoggingIn, setIsLoggingIn] = useState(false); + const [error, setError] = useState- Default auth connect is only available in the Sandbox environment. -
- )} )} diff --git a/packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx b/packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx index 6e4a3099d4..d909df01f0 100644 --- a/packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx +++ b/packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx @@ -1,3 +1,5 @@ +'use client'; + import React, { createContext, useContext, useEffect, useMemo, useState, } from 'react'; @@ -10,6 +12,9 @@ import { import { Orderbook, OrderbookOverrides } from '@imtbl/orderbook'; import { Passport, PassportModuleConfiguration } from '@imtbl/passport'; import { Environment, ImmutableConfiguration, ModuleConfiguration } from '@imtbl/config'; +import { SessionProvider } from 'next-auth/react'; +import type { Session } from 'next-auth'; +// Note: Session type is augmented in @imtbl/auth-next-client/types import { AUDIENCE, POPUP_REDIRECT_URI, @@ -200,7 +205,8 @@ const ImmutableContext = createContext<{ export function ImmutableProvider({ children, -}: { children: JSX.Element | JSX.Element[] }) { + session, +}: { children: JSX.Element | JSX.Element[]; session?: Session }) { const [environment, setEnvironment] = useLocalStorage( 'IMX_PASSPORT_SAMPLE_ENVIRONMENT', useContext(ImmutableContext).environment, @@ -240,9 +246,23 @@ export function ImmutableProvider({ setEnvironment, }), [sdkClient, orderbookClient, passportClient, blockchainData, environment, setEnvironment]); + // Get the NextAuth base path for the current environment + const authBasePath = useMemo(() => { + switch (environment) { + case EnvironmentNames.DEV: + return '/api/auth/dev'; + case EnvironmentNames.PRODUCTION: + return '/api/auth/prod'; + default: + return '/api/auth/sandbox'; + } + }, [environment]); + return (Loading...
+Completing authentication...
+ + } + /> + ); +} diff --git a/packages/passport/sdk-sample-app/src/pages/index.tsx b/packages/passport/sdk-sample-app/src/pages/index.page.tsx similarity index 78% rename from packages/passport/sdk-sample-app/src/pages/index.tsx rename to packages/passport/sdk-sample-app/src/pages/index.page.tsx index ac20f5886f..68c3aa363c 100644 --- a/packages/passport/sdk-sample-app/src/pages/index.tsx +++ b/packages/passport/sdk-sample-app/src/pages/index.page.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Head from 'next/head'; import { Container, Row } from 'react-bootstrap'; +import { useImmutableSession } from '@imtbl/auth-next-client'; import Status from '@/components/Status'; import ImxWorkflow from '@/components/imx/ImxWorkflow'; import Message from '@/components/Message'; @@ -10,10 +11,12 @@ import { useStatusProvider } from '@/context/StatusProvider'; import { BASE_PATH } from '@/config'; import PassportMethods from '@/components/PassportMethods'; import ZkEvmWorkflow from '@/components/zkevm/ZkEvmWorkflow'; +import AuthNextJS from '@/components/AuthNextJS'; export default function Home() { const { isLoading } = useStatusProvider(); const { imxProvider, zkEvmProvider, defaultWalletProvider } = usePassportProvider(); + const { isAuthenticated: isAuthNextJSAuthenticated } = useImmutableSession(); return ( <> @@ -26,7 +29,12 @@ export default function Home() {