feat(passport): ID-3844 Magic TEE Signer (#2663)

Co-authored-by: Hayden Fowler <haydenfowler@MacBook-Pro.local>
Co-authored-by: Natalie <nf1993@gmail.com>

Author: 3 people

packages/game-bridge/src/index.ts

@@ -248,7 +248,7 @@ window.callFunction = async (jsonData: string) => {
               overrides: {
                 authenticationDomain: 'https://auth.dev.immutable.com',
                 magicPublishableApiKey: 'pk_live_4058236363130CA9', // Public key
-                magicProviderId: 'C9odf7hU4EQ5EufcfgYfcBaT5V6LhocXyiPRhIjw2EY=', // Public key
+                magicProviderId: 'd196052b-8175-4a45-ba13-838a715d370f', // Public key
                 passportDomain: 'https://passport.dev.immutable.com',
                 imxPublicApiDomain: 'https://api.dev.immutable.com',
                 immutableXClient: new xClient.IMXClient({

packages/passport/sdk-sample-app/src/context/ImmutableProvider.tsx

@@ -128,7 +128,7 @@ const getPassportConfig = (environment: EnvironmentNames): PassportModuleConfigu
         overrides: {
           authenticationDomain: 'https://auth.dev.immutable.com',
           magicPublishableApiKey: 'pk_live_4058236363130CA9',
-          magicProviderId: 'C9odf7hU4EQ5EufcfgYfcBaT5V6LhocXyiPRhIjw2EY=',
+          magicProviderId: 'd196052b-8175-4a45-ba13-838a715d370f',
           passportDomain: 'https://passport.dev.immutable.com',
           imxPublicApiDomain: 'https://api.dev.immutable.com',
           imxApiClients: new ImxApiClients(createConfig({

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

@@ -248,12 +248,16 @@ describe('Passport', () => {
         });
 
         it('registers the user and returns the ether key', async () => {
+          mockGetUser.mockResolvedValueOnce(null);
           mockSigninPopup.mockResolvedValue(mockOidcUser);
+          mockGetUser.mockResolvedValueOnce(mockOidcUser);
           mockSigninSilent.mockResolvedValueOnce(mockOidcUserZkevm);
+          mockGetUser.mockResolvedValue(mockOidcUserZkevm);
           useMswHandlers([
             mswHandlers.rpcProvider.success,
             mswHandlers.counterfactualAddress.success,
             mswHandlers.api.chains.success,
+            mswHandlers.magicTEE.createWallet.success,
           ]);
 
           const zkEvmProvider = await getZkEvmProvider();
@@ -268,13 +272,15 @@ describe('Passport', () => {
 
         describe('when the registration request fails', () => {
           it('throws an error', async () => {
-            mockSigninPopup.mockResolvedValue(mockOidcUser);
             mockGetUser.mockResolvedValueOnce(null);
+            mockSigninPopup.mockResolvedValue(mockOidcUser);
             mockGetUser.mockResolvedValueOnce(mockOidcUser);
             mockSigninSilent.mockResolvedValue(mockOidcUser);
+            mockGetUser.mockResolvedValue(mockOidcUser);
             useMswHandlers([
               mswHandlers.counterfactualAddress.internalServerError,
               mswHandlers.api.chains.success,
+              mswHandlers.magicTEE.createWallet.success,
             ]);
 
             const zkEvmProvider = await getZkEvmProvider();
@@ -292,10 +298,11 @@ describe('Passport', () => {
         const transferToAddress = '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC';
 
         useMswHandlers([
-          mswHandlers.counterfactualAddress.success,
           mswHandlers.rpcProvider.success,
           mswHandlers.relayer.success,
           mswHandlers.guardian.evaluateTransaction.success,
+          mswHandlers.magicTEE.createWallet.success,
+          mswHandlers.magicTEE.personalSign.success,
         ]);
         mockMagicRequest.mockImplementation(({ method }: RequestArguments) => {
           switch (method) {
@@ -331,7 +338,7 @@ describe('Passport', () => {
         });
 
         expect(result).toEqual(transactionHash);
-        expect(mockGetUser).toHaveBeenCalledTimes(6);
+        expect(mockGetUser).toHaveBeenCalledTimes(9);
       });
 
       it('ethSigner is initialised if user logs in after connectEvm', async () => {
@@ -342,6 +349,8 @@ describe('Passport', () => {
           mswHandlers.rpcProvider.success,
           mswHandlers.relayer.success,
           mswHandlers.guardian.evaluateTransaction.success,
+          mswHandlers.magicTEE.createWallet.success,
+          mswHandlers.magicTEE.personalSign.success,
         ]);
         mockMagicRequest.mockImplementation(({ method }: RequestArguments) => {
           switch (method) {
@@ -359,7 +368,7 @@ describe('Passport', () => {
             }
           }
         });
-        mockGetUser.mockResolvedValueOnce(Promise.resolve(null));
+        mockGetUser.mockResolvedValueOnce(null);
         mockSigninPopup.mockResolvedValue(mockOidcUserZkevm);
         mockSigninSilent.mockResolvedValueOnce(mockOidcUserZkevm);
 
@@ -376,7 +385,7 @@ describe('Passport', () => {
         // user logs in, ethSigner is initialised
         await passport.login();
 
-        mockGetUser.mockResolvedValue(Promise.resolve(mockOidcUserZkevm));
+        mockGetUser.mockResolvedValue(mockOidcUserZkevm);
 
         expect(accounts).toEqual([mockUserZkEvm.zkEvm.ethAddress]);
 

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

@@ -3,7 +3,7 @@ import { IMXClient } from '@imtbl/x-client';
 import { ImxApiClients, imxApiConfig, MultiRollupApiClients } from '@imtbl/generated-clients';
 import { trackError, trackFlow } from '@imtbl/metrics';
 import AuthManager from './authManager';
-import MagicAdapter from './magic/magicAdapter';
+import MagicTEESigner from './magic/magicTEESigner';
 import { Passport } from './Passport';
 import { PassportImxProvider, PassportImxProviderFactory } from './starkEx';
 import { OidcConfiguration, UserProfile } from './types';
@@ -21,7 +21,7 @@ import { ZkEvmProvider } from './zkEvm';
 import { PassportError, PassportErrorType } from './errors/passportError';
 
 jest.mock('./authManager');
-jest.mock('./magic/magicAdapter');
+jest.mock('./magic/magicTEESigner');
 jest.mock('./starkEx');
 jest.mock('./confirmation');
 jest.mock('./zkEvm');
@@ -44,8 +44,6 @@ describe('Passport', () => {
   let loginCallbackMock: jest.Mock;
   let logoutMock: jest.Mock;
   let removeUserMock: jest.Mock;
-  let magicLoginMock: jest.Mock;
-  let magicLogoutMock: jest.Mock;
   let getUserMock: jest.Mock;
   let requestRefreshTokenMock: jest.Mock;
   let getProviderMock: jest.Mock;
@@ -57,8 +55,6 @@ describe('Passport', () => {
   beforeEach(() => {
     authLoginMock = jest.fn().mockReturnValue(mockUser);
     loginCallbackMock = jest.fn();
-    magicLoginMock = jest.fn();
-    magicLogoutMock = jest.fn();
     logoutMock = jest.fn();
     removeUserMock = jest.fn();
     getUserMock = jest.fn();
@@ -78,9 +74,9 @@ describe('Passport', () => {
       requestRefreshTokenAfterRegistration: requestRefreshTokenMock,
       forceUserRefresh: forceUserRefreshMock,
     });
-    (MagicAdapter as jest.Mock).mockReturnValue({
-      login: magicLoginMock,
-      logout: magicLogoutMock,
+    (MagicTEESigner as unknown as jest.Mock).mockReturnValue({
+      getAddress: jest.fn().mockResolvedValue('0x123'),
+      signMessage: jest.fn().mockResolvedValue('signature'),
     });
     (PassportImxProviderFactory as jest.Mock).mockReturnValue({
       getProvider: getProviderMock,
@@ -289,26 +285,12 @@ describe('Passport', () => {
         await passport.logout();
 
         expect(logoutMock).toBeCalledTimes(1);
-        expect(magicLogoutMock).toBeCalledTimes(1);
-      });
-    });
-
-    describe('when the logout mode is redirect', () => {
-      it('should execute logout without error in the correct order', async () => {
-        await passport.logout();
-
-        const logoutMockOrder = logoutMock.mock.invocationCallOrder[0];
-        const magicLogoutMockOrder = magicLogoutMock.mock.invocationCallOrder[0];
-
-        expect(logoutMock).toBeCalledTimes(1);
-        expect(magicLogoutMock).toBeCalledTimes(1);
-        expect(magicLogoutMockOrder).toBeLessThan(logoutMockOrder);
       });
     });
 
     it('should call track error function if an error occurs', async () => {
       const error = new Error('error');
-      magicLogoutMock.mockRejectedValue(error);
+      logoutMock.mockRejectedValue(error);
 
       try {
         await passport.logout();

packages/passport/sdk/src/Passport.ts

@@ -1,6 +1,6 @@
 import { IMXProvider } from '@imtbl/x-provider';
 import {
-  createConfig, ImxApiClients, imxApiConfig, MultiRollupApiClients,
+  createConfig, ImxApiClients, imxApiConfig, MagicTeeApiClients, MultiRollupApiClients,
 } from '@imtbl/generated-clients';
 import { IMXClient } from '@imtbl/x-client';
 import { Environment } from '@imtbl/config';
@@ -11,7 +11,7 @@ import {
 } from '@imtbl/metrics';
 import { isAxiosError } from 'axios';
 import AuthManager from './authManager';
-import MagicAdapter from './magic/magicAdapter';
+import MagicTEESigner from './magic/magicTEESigner';
 import { PassportImxProviderFactory } from './starkEx';
 import { PassportConfiguration } from './config';
 import {
@@ -38,7 +38,6 @@ import logger from './utils/logger';
 import { announceProvider, passportProviderInfo } from './zkEvm/provider/eip6963';
 import { isAPIError, PassportError, PassportErrorType } from './errors/passportError';
 import { withMetricsAsync } from './utils/metrics';
-import { MagicProviderProxyFactory } from './magic/magicProviderProxyFactory';
 
 const buildImxClientConfig = (passportModuleConfiguration: PassportModuleConfiguration) => {
   if (passportModuleConfiguration.overrides) {
@@ -61,9 +60,14 @@ export const buildPrivateVars = (passportModuleConfiguration: PassportModuleConf
   const config = new PassportConfiguration(passportModuleConfiguration);
   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);
+  const magicTeeApiClients = new MagicTeeApiClients({
+    basePath: config.magicTeeBasePath,
+    timeout: config.magicTeeTimeout,
+    magicPublishableApiKey: config.magicPublishableApiKey,
+    magicProviderId: config.magicProviderId,
+  });
+  const magicTEESigner = new MagicTEESigner(authManager, magicTeeApiClients);
   const multiRollupApiClients = new MultiRollupApiClients(config.multiRollupConfig);
   const passportEventEmitter = new TypedEventEmitter<PassportEventMap>();
 
@@ -83,7 +87,7 @@ export const buildPrivateVars = (passportModuleConfiguration: PassportModuleConf
   const passportImxProviderFactory = new PassportImxProviderFactory({
     authManager,
     immutableXClient,
-    magicAdapter,
+    magicTEESigner,
     passportEventEmitter,
     imxApiClients,
     guardianClient,
@@ -92,7 +96,7 @@ export const buildPrivateVars = (passportModuleConfiguration: PassportModuleConf
   return {
     config,
     authManager,
-    magicAdapter,
+    magicTEESigner,
     confirmationScreen,
     embeddedLoginPrompt,
     immutableXClient,
@@ -114,7 +118,7 @@ export class Passport {
 
   private readonly immutableXClient: IMXClient;
 
-  private readonly magicAdapter: MagicAdapter;
+  private readonly magicTEESigner: MagicTEESigner;
 
   private readonly multiRollupApiClients: MultiRollupApiClients;
 
@@ -129,7 +133,7 @@ export class Passport {
 
     this.config = privateVars.config;
     this.authManager = privateVars.authManager;
-    this.magicAdapter = privateVars.magicAdapter;
+    this.magicTEESigner = privateVars.magicTEESigner;
     this.confirmationScreen = privateVars.confirmationScreen;
     this.embeddedLoginPrompt = privateVars.embeddedLoginPrompt;
     this.immutableXClient = privateVars.immutableXClient;
@@ -163,17 +167,25 @@ export class Passport {
    * Connects to EVM and optionally announces the provider.
    * @param {Object} options - Configuration options
    * @param {boolean} options.announceProvider - Whether to announce the provider via EIP-6963 for wallet discovery (defaults to true)
-   * @returns {Provider} The EVM provider instance
+   * @returns {Promise<Provider>} The EVM provider instance
    */
-  public connectEvm(options: ConnectEvmArguments = { announceProvider: true }): Promise<Provider> {
+  public async connectEvm(options: ConnectEvmArguments = { announceProvider: true }): Promise<Provider> {
     return withMetricsAsync(async () => {
+      let user: User | null = null;
+      try {
+        user = await this.authManager.getUser();
+      } catch (error) {
+        // Initialise the zkEvmProvider without a user
+      }
+
       const provider = new ZkEvmProvider({
         passportEventEmitter: this.passportEventEmitter,
         authManager: this.authManager,
-        magicAdapter: this.magicAdapter,
         config: this.config,
         multiRollupApiClients: this.multiRollupApiClients,
         guardianClient: this.guardianClient,
+        ethSigner: this.magicTEESigner,
+        user,
       });
 
       if (options?.announceProvider) {
@@ -304,16 +316,7 @@ export class Passport {
    */
   public async logout(): Promise<void> {
     return withMetricsAsync(async () => {
-      if (this.config.oidcConfiguration.logoutMode === 'silent') {
-        await Promise.allSettled([
-          this.authManager.logout(),
-          this.magicAdapter.logout(),
-        ]);
-      } else {
-        // We need to ensure that the Magic wallet is logged out BEFORE redirecting
-        await this.magicAdapter.logout();
-        await this.authManager.logout();
-      }
+      await this.authManager.logout();
       this.passportEventEmitter.emit(PassportEvents.LOGGED_OUT);
     }, 'logout');
   }
@@ -325,7 +328,6 @@ export class Passport {
   public async getLogoutUrl(): Promise<string | null> {
     return withMetricsAsync(async () => {
       await this.authManager.removeUser();
-      await this.magicAdapter.logout();
       this.passportEventEmitter.emit(PassportEvents.LOGGED_OUT);
       return await this.authManager.getLogoutUrl();
     }, 'getLogoutUrl');

packages/passport/sdk/src/config/config.test.ts

@@ -48,7 +48,7 @@ describe('Config', () => {
         expect.objectContaining({
           authenticationDomain: 'https://auth.immutable.com',
           magicPublishableApiKey: 'pk_live_10F423798A540ED7',
-          magicProviderId: 'fSMzaRQ4O7p4fttl7pCyGVtJS_G70P8SNsLXtPPGHo0=',
+          magicProviderId: 'aa80b860-8869-4f13-9000-6a6ad3d20017',
           passportDomain: 'https://passport.sandbox.immutable.com',
           oidcConfiguration,
         }),
@@ -70,7 +70,7 @@ describe('Config', () => {
         expect.objectContaining({
           authenticationDomain: 'https://auth.immutable.com',
           magicPublishableApiKey: 'pk_live_10F423798A540ED7',
-          magicProviderId: 'fSMzaRQ4O7p4fttl7pCyGVtJS_G70P8SNsLXtPPGHo0=',
+          magicProviderId: 'aa80b860-8869-4f13-9000-6a6ad3d20017',
           passportDomain: 'https://passport.immutable.com',
           oidcConfiguration,
         }),

packages/passport/sdk/src/config/config.ts

@@ -38,6 +38,10 @@ export class PassportConfiguration {
 
   readonly magicProviderId: string;
 
+  readonly magicTeeBasePath: string = 'https://tee.express.magiclabs.com';
+
+  readonly magicTeeTimeout: number = 6000;
+
   readonly oidcConfiguration: OidcConfiguration;
 
   readonly baseConfig: ImmutableConfiguration;
@@ -116,7 +120,7 @@ export class PassportConfiguration {
         case Environment.PRODUCTION: {
           this.authenticationDomain = 'https://auth.immutable.com';
           this.magicPublishableApiKey = 'pk_live_10F423798A540ED7';
-          this.magicProviderId = 'fSMzaRQ4O7p4fttl7pCyGVtJS_G70P8SNsLXtPPGHo0=';
+          this.magicProviderId = 'aa80b860-8869-4f13-9000-6a6ad3d20017';
           this.passportDomain = 'https://passport.immutable.com';
           this.imxPublicApiDomain = 'https://api.immutable.com';
           this.zkEvmRpcUrl = 'https://rpc.immutable.com';
@@ -128,7 +132,7 @@ export class PassportConfiguration {
         default: {
           this.authenticationDomain = 'https://auth.immutable.com';
           this.magicPublishableApiKey = 'pk_live_10F423798A540ED7';
-          this.magicProviderId = 'fSMzaRQ4O7p4fttl7pCyGVtJS_G70P8SNsLXtPPGHo0=';
+          this.magicProviderId = 'aa80b860-8869-4f13-9000-6a6ad3d20017';
           this.passportDomain = 'https://passport.sandbox.immutable.com';
           this.imxPublicApiDomain = 'https://api.sandbox.immutable.com';
           this.zkEvmRpcUrl = 'https://rpc.testnet.immutable.com';

packages/passport/sdk/src/magic/index.ts

@@ -1,3 +1 @@
-import MagicAdapter from './magicAdapter';
-
-export default { MagicAdapter };
+export { default as MagicTEESigner } from './magicTEESigner';