feat(passport): ID-3934: Render the headless login / embedded login prompt (#2705)

Author: haydenfowler

packages/passport/sdk/src/Passport.int.test.ts

@@ -76,8 +76,8 @@ const oidcConfiguration: OidcConfiguration = {
   logoutRedirectUri,
 };
 
-const getZkEvmProvider = async () => {
-  const passport = new Passport({
+const getPassport = () => (
+  new Passport({
     baseConfig: new ImmutableConfiguration({
       environment: Environment.SANDBOX,
     }),
@@ -87,8 +87,14 @@ const getZkEvmProvider = async () => {
     popupRedirectUri,
     logoutRedirectUri,
     scope: 'openid offline_access profile email transact',
-  });
+    popupOverlayOptions: {
+      disableHeadlessLoginPromptOverlay: true,
+    },
+  })
+);
 
+const getZkEvmProvider = async () => {
+  const passport = getPassport();
   return await passport.connectEvm();
 };
 
@@ -357,17 +363,7 @@ describe('Passport', () => {
         mockSigninPopup.mockResolvedValue(mockOidcUserZkevm);
         mockSigninSilent.mockResolvedValueOnce(mockOidcUserZkevm);
 
-        const passport = new Passport({
-          baseConfig: new ImmutableConfiguration({
-            environment: Environment.SANDBOX,
-          }),
-          audience: 'platform_api',
-          clientId,
-          redirectUri,
-          popupRedirectUri,
-          logoutRedirectUri,
-          scope: 'openid offline_access profile email transact',
-        });
+        const passport = getPassport();
 
         // user isn't logged in, so wont set signer when provider is instantiated
         // #doc request-accounts

packages/passport/sdk/src/Passport.ts

@@ -27,7 +27,7 @@ import {
   User,
   UserProfile,
 } from './types';
-import { ConfirmationScreen } from './confirmation';
+import { ConfirmationScreen, EmbeddedLoginPrompt } from './confirmation';
 import { ZkEvmProvider } from './zkEvm';
 import { Provider } from './zkEvm/types';
 import TypedEventEmitter from './utils/typedEventEmitter';
@@ -57,7 +57,8 @@ const buildImxApiClients = (passportModuleConfiguration: PassportModuleConfigura
 
 export const buildPrivateVars = (passportModuleConfiguration: PassportModuleConfiguration) => {
   const config = new PassportConfiguration(passportModuleConfiguration);
-  const authManager = new AuthManager(config);
+  const embeddedLoginPrompt = new EmbeddedLoginPrompt(config);
+  const authManager = new AuthManager(config, embeddedLoginPrompt);
   const magicProviderProxyFactory = new MagicProviderProxyFactory(authManager, config);
   const magicAdapter = new MagicAdapter(config, magicProviderProxyFactory);
   const confirmationScreen = new ConfirmationScreen(config);
@@ -91,6 +92,7 @@ export const buildPrivateVars = (passportModuleConfiguration: PassportModuleConf
     authManager,
     magicAdapter,
     confirmationScreen,
+    embeddedLoginPrompt,
     immutableXClient,
     multiRollupApiClients,
     passportEventEmitter,
@@ -106,6 +108,8 @@ export class Passport {
 
   private readonly confirmationScreen: ConfirmationScreen;
 
+  private readonly embeddedLoginPrompt: EmbeddedLoginPrompt;
+
   private readonly immutableXClient: IMXClient;
 
   private readonly magicAdapter: MagicAdapter;
@@ -125,6 +129,7 @@ export class Passport {
     this.authManager = privateVars.authManager;
     this.magicAdapter = privateVars.magicAdapter;
     this.confirmationScreen = privateVars.confirmationScreen;
+    this.embeddedLoginPrompt = privateVars.embeddedLoginPrompt;
     this.immutableXClient = privateVars.immutableXClient;
     this.multiRollupApiClients = privateVars.multiRollupApiClients;
     this.passportEventEmitter = privateVars.passportEventEmitter;