feat(passport): Redirect based login (#2543)

rodrigo-fournier-immutable · web-flow · commit c7069e270e9d · 2025-02-25T00:33:55.000Z
diff --git a/packages/passport/sdk-sample-app/.env.development b/packages/passport/sdk-sample-app/.env.development
@@ -1,5 +1,6 @@
 NEXT_PUBLIC_ENV=dev
-NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/login/callback
+NEXT_PUBLIC_POPUP_REDIRECT_URI=http://localhost:3000/login/callback
+NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/login/redirect-callback
 NEXT_PUBLIC_LOGOUT_REDIRECT_URI=http://localhost:3000
 # Logout modes: redirect, silent
 NEXT_PUBLIC_LOGOUT_MODE=silent
diff --git a/packages/passport/sdk-sample-app/.env.production b/packages/passport/sdk-sample-app/.env.production
@@ -1,5 +1,6 @@
 NEXT_PUBLIC_ENV=prod
-NEXT_PUBLIC_REDIRECT_URI=https://passport.immutable.com/sdk-sample-app/login/callback
+NEXT_PUBLIC_POPUP_REDIRECT_URI=https://passport.immutable.com/sdk-sample-app/login/callback
+NEXT_PUBLIC_REDIRECT_URI=http://passport.immutable.com/sdk-sample-app/login/redirect-callback
 NEXT_PUBLIC_LOGOUT_REDIRECT_URI=https://passport.immutable.com/sdk-sample-app
 # Logout modes: redirect, silent
 NEXT_PUBLIC_LOGOUT_MODE=silent
diff --git a/packages/passport/sdk-sample-app/src/components/PassportMethods.tsx b/packages/passport/sdk-sample-app/src/components/PassportMethods.tsx
@@ -12,6 +12,7 @@ function PassportMethods() {
   const {
     logout,
     login,
+    popupRedirect,
     getIdToken,
     getAccessToken,
     getUserInfo,
@@ -43,6 +44,12 @@ function PassportMethods() {
   return (
     <CardStack title="Passport Methods">
       <Stack direction="horizontal" style={{ flexWrap: 'wrap' }} gap={3}>
+        <WorkflowButton
+          disabled={isLoading}
+          onClick={popupRedirect}
+        >
+          Popup Login
+        </WorkflowButton>
         <WorkflowButton
           disabled={isLoading}
           onClick={login}
diff --git a/packages/passport/sdk-sample-app/src/config/index.ts b/packages/passport/sdk-sample-app/src/config/index.ts
@@ -1,5 +1,7 @@
 export const SCOPE = 'openid offline_access profile email transact';
 export const AUDIENCE = 'platform_api';
+export const POPUP_REDIRECT_URI = process.env.NEXT_PUBLIC_POPUP_REDIRECT_URI
+  || process.env.NEXT_PUBLIC_REDIRECT_URI || '';
 export const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI || '';
 export const LOGOUT_REDIRECT_URI = process.env.NEXT_PUBLIC_LOGOUT_REDIRECT_URI || '';
 export const LOGOUT_MODE = process.env.NEXT_PUBLIC_LOGOUT_MODE as 'redirect' | 'silent' | undefined;
diff --git a/packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx b/packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx
@@ -12,8 +12,9 @@ import { Passport, PassportModuleConfiguration } from '@imtbl/passport';
 import { Environment, ImmutableConfiguration, ModuleConfiguration } from '@imtbl/config';
 import {
   AUDIENCE,
-  LOGOUT_REDIRECT_URI,
+  POPUP_REDIRECT_URI,
   REDIRECT_URI,
+  LOGOUT_REDIRECT_URI,
   SILENT_LOGOUT_REDIRECT_URI,
   LOGOUT_MODE,
   SCOPE,
@@ -89,6 +90,7 @@ const getPassportConfig = (environment: EnvironmentNames): PassportModuleConfigu
   const sharedConfigurationValues = {
     scope: SCOPE,
     audience: AUDIENCE,
+    popupRedirectUri: POPUP_REDIRECT_URI,
     redirectUri: REDIRECT_URI,
     logoutMode: LOGOUT_MODE,
     logoutRedirectUri: LOGOUT_MODE === 'silent'
diff --git a/packages/passport/sdk-sample-app/src/context/PassportProvider.tsx b/packages/passport/sdk-sample-app/src/context/PassportProvider.tsx
@@ -15,6 +15,7 @@ const PassportContext = createContext<{
   connectZkEvm: () => void;
   logout: () => void;
   login: () => void;
+  popupRedirect: () => void;
   getIdToken: () => Promise<string | undefined>;
   getAccessToken: () => Promise<string | undefined>;
   getUserInfo: () => Promise<UserProfile | undefined>;
@@ -27,6 +28,7 @@ const PassportContext = createContext<{
       connectZkEvm: () => undefined,
       logout: () => undefined,
       login: () => Promise.resolve(undefined),
+      popupRedirect: () => Promise.resolve(undefined),
       getIdToken: () => Promise.resolve(undefined),
       getAccessToken: () => Promise.resolve(undefined),
       getUserInfo: () => Promise.resolve(undefined),
@@ -135,7 +137,7 @@ export function PassportProvider({
     }
   }, [addMessage, passportClient, setIsLoading]);
 
-  const login = useCallback(async () => {
+  const popupRedirect = useCallback(async () => {
     try {
       setIsLoading(true);
       const userProfile = await passportClient.login();
@@ -148,13 +150,27 @@ export function PassportProvider({
     }
   }, [addMessage, passportClient, setIsLoading]);
 
+  const login = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const userProfile = await passportClient.login({ useRedirectFlow: true });
+      addMessage('Login Redirect', userProfile);
+    } catch (err) {
+      addMessage('Login Redirect', err);
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addMessage, passportClient, setIsLoading]);
+
   const providerValues = useMemo(() => ({
     imxProvider,
     zkEvmProvider,
     connectImx,
     connectZkEvm,
     logout,
     login,
+    popupRedirect,
     getIdToken,
     getAccessToken,
     getUserInfo,
@@ -167,6 +183,7 @@ export function PassportProvider({
     connectZkEvm,
     logout,
     login,
+    popupRedirect,
     getIdToken,
     getAccessToken,
     getUserInfo,
@@ -188,6 +205,7 @@ export function usePassportProvider() {
     connectImx,
     connectZkEvm,
     login,
+    popupRedirect,
     logout,
     getIdToken,
     getAccessToken,
@@ -201,6 +219,7 @@ export function usePassportProvider() {
     connectImx,
     connectZkEvm,
     login,
+    popupRedirect,
     logout,
     getIdToken,
     getAccessToken,
diff --git a/packages/passport/sdk-sample-app/src/pages/login/callback.ts b/packages/passport/sdk-sample-app/src/pages/login/callback.ts
@@ -5,6 +5,6 @@ export default function HandleCallback() {
   const { passportClient } = useImmutableProvider();
 
   useEffect(() => {
-    passportClient.loginCallback();
+    passportClient.loginCallback().catch(console.error);
   }, [passportClient]);
 }
diff --git a/packages/passport/sdk-sample-app/src/pages/login/redirect-callback.ts b/packages/passport/sdk-sample-app/src/pages/login/redirect-callback.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useImmutableProvider } from '@/context/ImmutableProvider';
+
+export default function HandleCallback() {
+  const { passportClient } = useImmutableProvider();
+  const [shouldCallCallback, setShouldCallCallback] = useState(false);
+
+  useEffect(() => {
+    if (!passportClient || !shouldCallCallback) {
+      setTimeout(() => {
+        setShouldCallCallback(true);
+      }, 1000);
+      return;
+    }
+
+    const handleCallback = async () => {
+      await passportClient.loginCallback();
+      window.location.href = window.location.origin;
+    };
+
+    handleCallback().catch(console.error);
+  }, [passportClient, shouldCallCallback]);
+
+  return null;
+}
diff --git a/packages/passport/sdk/src/Passport.int.test.ts b/packages/passport/sdk/src/Passport.int.test.ts
@@ -26,6 +26,7 @@ jest.mock('@imtbl/x-client');
 
 const authenticationDomain = 'example.com';
 const redirectUri = 'example.com';
+const popupRedirectUri = 'example.com';
 const logoutRedirectUri = 'example.com';
 const clientId = 'clientId123';
 const mockOidcUser = {
@@ -53,6 +54,7 @@ const mockOidcUserZkevm = {
 const oidcConfiguration: OidcConfiguration = {
   clientId,
   redirectUri,
+  popupRedirectUri,
   logoutRedirectUri,
 };
 
@@ -64,6 +66,7 @@ const getZkEvmProvider = async () => {
     audience: 'platform_api',
     clientId,
     redirectUri,
+    popupRedirectUri,
     logoutRedirectUri,
     scope: 'openid offline_access profile email transact',
   });
@@ -325,6 +328,7 @@ describe('Passport', () => {
           audience: 'platform_api',
           clientId,
           redirectUri,
+          popupRedirectUri,
           logoutRedirectUri,
           scope: 'openid offline_access profile email transact',
         });
diff --git a/packages/passport/sdk/src/Passport.test.ts b/packages/passport/sdk/src/Passport.test.ts
@@ -32,6 +32,7 @@ jest.mock('@imtbl/metrics');
 const oidcConfiguration: OidcConfiguration = {
   clientId: '11111',
   redirectUri: 'https://test.com',
+  popupRedirectUri: 'https://test.com',
   logoutRedirectUri: 'https://test.com',
 };
 
@@ -71,6 +72,7 @@ describe('Passport', () => {
     forceUserRefreshMock = jest.fn();
     (AuthManager as unknown as jest.Mock).mockReturnValue({
       login: authLoginMock,
+      loginWithRedirect: authLoginMock,
       loginCallback: loginCallbackMock,
       logout: logoutMock,
       removeUser: removeUserMock,
@@ -573,6 +575,14 @@ describe('Passport', () => {
       expect(forceUserRefreshMock).toBeCalledTimes(1);
       expect(authLoginMock).toBeCalledTimes(0);
     });
+
+    it('should call loginWithRedirect', async () => {
+      getUserMock.mockReturnValue(null);
+      await passport.login({ useRedirectFlow: true });
+
+      expect(getUserMock).toBeCalledTimes(1);
+      expect(authLoginMock).toBeCalledTimes(1);
+    });
   });
 
   describe('linkExternalWallet', () => {
diff --git a/packages/passport/sdk/src/Passport.ts b/packages/passport/sdk/src/Passport.ts
@@ -198,6 +198,7 @@ export class Passport {
     useCachedSession?: boolean;
     anonymousId?: string;
     useSilentLogin?: boolean;
+    useRedirectFlow?: boolean;
   }): Promise<UserProfile | null> {
     return withMetricsAsync(async () => {
       const { useCachedSession = false, useSilentLogin } = options || {};
@@ -218,7 +219,11 @@ export class Passport {
       if (!user && useSilentLogin) {
         user = await this.authManager.forceUserRefresh();
       } else if (!user && !useCachedSession) {
-        user = await this.authManager.login(options?.anonymousId);
+        if (options?.useRedirectFlow) {
+          await this.authManager.loginWithRedirect(options?.anonymousId);
+        } else {
+          user = await this.authManager.login(options?.anonymousId);
+        }
       }
 
       if (user) {
@@ -237,7 +242,15 @@ export class Passport {
    * @returns {Promise<void>} A promise that resolves when the callback is processed
    */
   public async loginCallback(): Promise<void> {
-    return withMetricsAsync(() => this.authManager.loginCallback(), 'loginCallback');
+    await withMetricsAsync(() => this.authManager.loginCallback(), 'loginCallback')
+      .then((user) => {
+        if (user) {
+          identify({
+            passportId: user.profile.sub,
+          });
+          this.passportEventEmitter.emit(PassportEvents.LOGGED_IN, user);
+        }
+      });
   }
 
   /**
diff --git a/packages/passport/sdk/src/authManager.test.ts b/packages/passport/sdk/src/authManager.test.ts
@@ -22,6 +22,7 @@ jest.mock('./overlay');
 const authenticationDomain = 'auth.immutable.com';
 const clientId = '11111';
 const redirectUri = 'https://test.com';
+const popupRedirectUri = `${redirectUri}-popup`;
 const logoutEndpoint = '/v2/logout';
 const logoutRedirectUri = `${redirectUri}logout/callback`;
 
@@ -31,6 +32,7 @@ const getConfig = (values?: Partial<PassportModuleConfiguration>) => new Passpor
   }),
   clientId,
   redirectUri,
+  popupRedirectUri,
   scope: 'email profile',
   ...values,
 });
@@ -84,6 +86,7 @@ describe('AuthManager', () => {
   let authManager: AuthManager;
   let mockSigninPopup: jest.Mock;
   let mockSigninCallback: jest.Mock;
+  let mockSigninRedirectCallback: jest.Mock;
   let mockSignoutRedirect: jest.Mock;
   let mockGetUser: jest.Mock;
   let mockSigninSilent: jest.Mock;
@@ -95,6 +98,7 @@ describe('AuthManager', () => {
   beforeEach(() => {
     mockSigninPopup = jest.fn();
     mockSigninCallback = jest.fn();
+    mockSigninRedirectCallback = jest.fn();
     mockSignoutRedirect = jest.fn();
     mockGetUser = jest.fn();
     mockSigninSilent = jest.fn();
@@ -105,6 +109,7 @@ describe('AuthManager', () => {
     (UserManager as jest.Mock).mockReturnValue({
       signinPopup: mockSigninPopup,
       signinCallback: mockSigninCallback,
+      signinRedirectCallback: mockSigninRedirectCallback,
       signoutRedirect: mockSignoutRedirect,
       signoutSilent: mockSignoutSilent,
       getUser: mockGetUser,
@@ -135,7 +140,7 @@ describe('AuthManager', () => {
           end_session_endpoint: `${config.authenticationDomain}${logoutEndpoint}`
             + `?client_id=${config.oidcConfiguration.clientId}`,
         },
-        popup_redirect_uri: config.oidcConfiguration.redirectUri,
+        popup_redirect_uri: config.oidcConfiguration.popupRedirectUri,
         redirect_uri: config.oidcConfiguration.redirectUri,
         scope: config.oidcConfiguration.scope,
         userStore: expect.any(WebStorageStateStore),
@@ -367,6 +372,13 @@ describe('AuthManager', () => {
 
       expect(mockSigninCallback).toBeCalled();
     });
+
+    it('should call login redirect callback and map to domain model', async () => {
+      mockSigninCallback.mockReturnValue(mockOidcUser);
+      const user = await authManager.loginCallback();
+      expect(mockSigninCallback).toBeCalled();
+      expect(user).toEqual(mockUser);
+    });
   });
 
   describe('logout', () => {
diff --git a/packages/passport/sdk/src/authManager.ts b/packages/passport/sdk/src/authManager.ts
@@ -64,7 +64,7 @@ const getAuthConfiguration = (config: PassportConfiguration): UserManagerSetting
   const baseConfiguration: UserManagerSettings = {
     authority: authenticationDomain,
     redirect_uri: oidcConfiguration.redirectUri,
-    popup_redirect_uri: oidcConfiguration.redirectUri,
+    popup_redirect_uri: oidcConfiguration.popupRedirectUri || oidcConfiguration.redirectUri,
     client_id: oidcConfiguration.clientId,
     metadata: {
       authorization_endpoint: `${authenticationDomain}/authorize`,
@@ -180,6 +180,19 @@ export default class AuthManager {
     });
   };
 
+  public async loginWithRedirect(anonymousId?: string): Promise<void> {
+    await this.userManager.clearStaleState();
+    return withPassportError<void>(async () => {
+      await this.userManager.signinRedirect({
+        extraQueryParams: {
+          ...(this.userManager.settings?.extraQueryParams ?? {}),
+          rid: getDetail(Detail.RUNTIME_ID) || '',
+          third_party_a_id: anonymousId || '',
+        },
+      });
+    }, PassportErrorType.AUTHENTICATION_ERROR);
+  }
+
   /**
    * login
    * @param anonymousId Caller can pass an anonymousId if they want to associate their user's identity with immutable's internal instrumentation.
@@ -263,11 +276,15 @@ export default class AuthManager {
     return user || this.login();
   }
 
-  public async loginCallback(): Promise<void> {
-    return withPassportError<void>(
-      async () => { await this.userManager.signinCallback(); },
-      PassportErrorType.AUTHENTICATION_ERROR,
-    );
+  public async loginCallback(): Promise<undefined | User> {
+    return withPassportError<undefined | User>(async () => {
+      const oidcUser = await this.userManager.signinCallback();
+      if (!oidcUser) {
+        return undefined;
+      }
+
+      return AuthManager.mapOidcUserToDomainModel(oidcUser);
+    }, PassportErrorType.AUTHENTICATION_ERROR);
   }
 
   /**
diff --git a/packages/passport/sdk/src/config/config.test.ts b/packages/passport/sdk/src/config/config.test.ts
@@ -12,6 +12,7 @@ describe('Config', () => {
   const oidcConfiguration = {
     clientId: 'client123',
     redirectUri: 'redirect123',
+    popupRedirectUri: 'popupRedirect123',
     logoutRedirectUri: 'logout123',
     scope: 'email profile',
     audience: 'xxx_api',
diff --git a/packages/passport/sdk/src/confirmation/confirmation.test.ts b/packages/passport/sdk/src/confirmation/confirmation.test.ts
diff --git a/packages/passport/sdk/src/guardian/index.test.ts b/packages/passport/sdk/src/guardian/index.test.ts
diff --git a/packages/passport/sdk/src/test/mocks.ts b/packages/passport/sdk/src/test/mocks.ts
diff --git a/packages/passport/sdk/src/types.ts b/packages/passport/sdk/src/types.ts

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,6 @@ export default function HandleCallback() {`
`5`	`5`	`const { passportClient } = useImmutableProvider();`
`6`	`6`
`7`	`7`	`useEffect(() => {`
`8`		`- passportClient.loginCallback();`
	`8`	`+ passportClient.loginCallback().catch(console.error);`
`9`	`9`	`}, [passportClient]);`
`10`	`10`	`}`