feat: social login with UI

app/scripts/controller-init/controller-list.ts

@@ -41,6 +41,7 @@ import { Controller as NotificationServicesPushController } from '@metamask/noti
 import { DelegationController } from '@metamask/delegation-controller';
 
 import { RemoteFeatureFlagController } from '@metamask/remote-feature-flag-controller';
+import { SeedlessOnboardingController } from '@metamask/seedless-onboarding-controller';
 import OnboardingController from '../controllers/onboarding';
 import { PreferencesController } from '../controllers/preferences-controller';
 import SwapsController from '../controllers/swaps';
@@ -74,6 +75,7 @@ export type Controller =
   | PPOMController
   | PreferencesController
   | RateLimitController<RateLimitedApiMap>
+  | SeedlessOnboardingController
   | SmartTransactionsController
   | SnapController
   | SnapInterfaceController
@@ -111,6 +113,7 @@ export type ControllerFlatState = AccountsController['state'] &
   >['state'] &
   PPOMController['state'] &
   PreferencesController['state'] &
+  SeedlessOnboardingController['state'] &
   SmartTransactionsController['state'] &
   SnapController['state'] &
   SnapInsightsController['state'] &

app/scripts/controller-init/messengers/index.ts

@@ -46,6 +46,7 @@ import {
   getDelegationControllerInitMessenger,
   getDelegationControllerMessenger,
 } from './delegation/delegation-controller-messenger';
+import { getSeedlessOnboardingControllerMessenger } from './seedless-onboarding';
 
 export const CONTROLLER_MESSENGERS = {
   AuthenticationController: {
@@ -104,6 +105,10 @@ export const CONTROLLER_MESSENGERS = {
     getMessenger: getRateLimitControllerMessenger,
     getInitMessenger: getRateLimitControllerInitMessenger,
   },
+  SeedlessOnboardingController: {
+    getMessenger: getSeedlessOnboardingControllerMessenger,
+    getInitMessenger: noop,
+  },
   SnapsRegistry: {
     getMessenger: getSnapsRegistryMessenger,
     getInitMessenger: noop,

app/scripts/controller-init/messengers/seedless-onboarding/index.ts

@@ -0,0 +1,2 @@
+export { getSeedlessOnboardingControllerMessenger } from './seedless-onboarding-controller-messenger';
+export type { SeedlessOnboardingControllerMessenger } from './seedless-onboarding-controller-messenger';

app/scripts/controller-init/messengers/seedless-onboarding/seedless-onboarding-controller-messenger.test.ts

@@ -0,0 +1,15 @@
+import { Messenger, RestrictedMessenger } from '@metamask/base-controller';
+
+import { getSeedlessOnboardingControllerMessenger } from './seedless-onboarding-controller-messenger';
+
+describe('getSeedlessOnboardingControllerMessenger', () => {
+  it('returns a restricted messenger', () => {
+    const messenger = new Messenger<never, never>();
+    const seedlessOnboardingControllerMessenger =
+      getSeedlessOnboardingControllerMessenger(messenger);
+
+    expect(seedlessOnboardingControllerMessenger).toBeInstanceOf(
+      RestrictedMessenger,
+    );
+  });
+});

app/scripts/controller-init/messengers/seedless-onboarding/seedless-onboarding-controller-messenger.ts

@@ -0,0 +1,29 @@
+import { Messenger } from '@metamask/base-controller';
+import {
+  SeedlessOnboardingControllerGetStateAction,
+  SeedlessOnboardingControllerStateChangeEvent,
+} from '@metamask/seedless-onboarding-controller';
+
+export type SeedlessOnboardingControllerMessenger = ReturnType<
+  typeof getSeedlessOnboardingControllerMessenger
+>;
+
+/**
+ * Get a restricted messenger for the Seedless Onboarding controller. This is scoped to the
+ * actions and events that the Seedless Onboarding controller is allowed to handle.
+ *
+ * @param messenger - The messenger to restrict.
+ * @returns The restricted messenger.
+ */
+export function getSeedlessOnboardingControllerMessenger(
+  messenger: Messenger<
+    SeedlessOnboardingControllerGetStateAction,
+    SeedlessOnboardingControllerStateChangeEvent
+  >,
+) {
+  return messenger.getRestricted({
+    name: 'SeedlessOnboardingController',
+    allowedActions: [],
+    allowedEvents: [],
+  });
+}

app/scripts/controller-init/seedless-onboarding/seedless-onboarding-controller-init.test.ts

@@ -0,0 +1,58 @@
+import {
+  SeedlessOnboardingController,
+  Web3AuthNetwork,
+} from '@metamask/seedless-onboarding-controller';
+import { Messenger } from '@metamask/base-controller';
+import { ControllerInitRequest } from '../types';
+import {
+  getSeedlessOnboardingControllerMessenger,
+  SeedlessOnboardingControllerMessenger,
+} from '../messengers/seedless-onboarding';
+import { buildControllerInitRequestMock } from '../test/utils';
+import { SeedlessOnboardingControllerInit } from './seedless-onboarding-controller-init';
+
+jest.mock('@metamask/seedless-onboarding-controller');
+
+function buildInitRequestMock(): jest.Mocked<
+  ControllerInitRequest<SeedlessOnboardingControllerMessenger>
+> {
+  const baseControllerMessenger = new Messenger();
+
+  return {
+    ...buildControllerInitRequestMock(),
+    controllerMessenger: getSeedlessOnboardingControllerMessenger(
+      baseControllerMessenger,
+    ),
+    initMessenger: undefined,
+  };
+}
+
+describe('SeedlessOnboardingControllerInit', () => {
+  const SeedlessOnboardingControllerClassMock = jest.mocked(
+    SeedlessOnboardingController,
+  );
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should return controller instance', () => {
+    const requestMock = buildInitRequestMock();
+    expect(
+      SeedlessOnboardingControllerInit(requestMock).controller,
+    ).toBeInstanceOf(SeedlessOnboardingController);
+  });
+
+  it('initializes with correct messenger and state', () => {
+    const requestMock = buildInitRequestMock();
+    SeedlessOnboardingControllerInit(requestMock);
+
+    const network = process.env.WEB3AUTH_NETWORK as Web3AuthNetwork;
+
+    expect(SeedlessOnboardingControllerClassMock).toHaveBeenCalledWith({
+      messenger: requestMock.controllerMessenger,
+      state: requestMock.persistedState.SeedlessOnboardingController,
+      network,
+    });
+  });
+});

app/scripts/controller-init/seedless-onboarding/seedless-onboarding-controller-init.ts

@@ -0,0 +1,26 @@
+import {
+  SeedlessOnboardingController,
+  SeedlessOnboardingControllerMessenger,
+  Web3AuthNetwork,
+} from '@metamask/seedless-onboarding-controller';
+import { ControllerInitFunction } from '../types';
+
+export const SeedlessOnboardingControllerInit: ControllerInitFunction<
+  SeedlessOnboardingController,
+  SeedlessOnboardingControllerMessenger
+> = ({ controllerMessenger, persistedState }) => {
+  const network = process.env.WEB3AUTH_NETWORK as Web3AuthNetwork;
+  if (!network) {
+    throw new Error('WEB3AUTH_NETWORK is not set in the environment');
+  }
+
+  const controller = new SeedlessOnboardingController({
+    messenger: controllerMessenger,
+    state: persistedState.SeedlessOnboardingController,
+    network,
+  });
+
+  return {
+    controller,
+  };
+};

app/scripts/metamask-controller.js

@@ -399,6 +399,7 @@ import {
 import { getIsQuicknodeEndpointUrl } from './lib/network-controller/utils';
 import { isRelaySupported } from './lib/transaction/transaction-relay';
 import OAuthService from './services/oauth/oauth-service';
+import { SeedlessOnboardingControllerInit } from './controller-init/seedless-onboarding/seedless-onboarding-controller-init';
 
 export const METAMASK_CONTROLLER_EVENTS = {
   // Fired after state changes that impact the extension badge (unapproved msg count)
@@ -1888,6 +1889,7 @@ export default class MetamaskController extends EventEmitter {
         NotificationServicesPushControllerInit,
       DeFiPositionsController: DeFiPositionsControllerInit,
       DelegationController: DelegationControllerInit,
+      SeedlessOnboardingController: SeedlessOnboardingControllerInit,
     };
 
     const {
@@ -1939,6 +1941,8 @@ export default class MetamaskController extends EventEmitter {
     this.notificationServicesPushController =
       controllersByName.NotificationServicesPushController;
     this.deFiPositionsController = controllersByName.DeFiPositionsController;
+    this.seedlessOnboardingController =
+      controllersByName.SeedlessOnboardingController;
 
     this.notificationServicesController.init();
 
@@ -2113,6 +2117,7 @@ export default class MetamaskController extends EventEmitter {
       NetworkController: this.networkController,
       AlertController: this.alertController,
       OnboardingController: this.onboardingController,
+      SeedlessOnboardingController: this.seedlessOnboardingController,
       PermissionController: this.permissionController,
       PermissionLogController: this.permissionLogController,
       SubjectMetadataController: this.subjectMetadataController,
@@ -2166,6 +2171,7 @@ export default class MetamaskController extends EventEmitter {
         CurrencyController: this.currencyRateController,
         AlertController: this.alertController,
         OnboardingController: this.onboardingController,
+        SeedlessOnboardingController: this.seedlessOnboardingController,
         PermissionController: this.permissionController,
         PermissionLogController: this.permissionLogController,
         SubjectMetadataController: this.subjectMetadataController,
@@ -3494,6 +3500,9 @@ export default class MetamaskController extends EventEmitter {
         getAccountsBySnapId(this.getSnapKeyring.bind(this), snapId),
       ///: END:ONLY_INCLUDE_IF
 
+      // seedless onboarding
+      startOAuthLogin: this.startOAuthLogin.bind(this),
+
       // hardware wallets
       connectHardware: this.connectHardware.bind(this),
       forgetDevice: this.forgetDevice.bind(this),
@@ -4572,6 +4581,31 @@ export default class MetamaskController extends EventEmitter {
     }
   }
 
+  /**
+   * Login with social login provider and get User Onboarding details.
+   *
+   * AuthenticationResult is an object that contains the temporary Auth token for next step of onboarding flow
+   * and user's onboarding status to indicate whether the user has already completed the seedless onboarding flow.
+   *
+   * @param {AuthConnection} provider - social login provider, `google` | `apple`
+   * @returns {Promise<boolean>} true if user has not completed the seedless onboarding flow, false otherwise
+   */
+  async startOAuthLogin(provider) {
+    try {
+      const oAuthLoginResult = await this.oauthService.startOAuthLogin(
+        provider,
+      );
+
+      const { isNewUser } =
+        await this.seedlessOnboardingController.authenticate(oAuthLoginResult);
+
+      return isNewUser;
+    } catch (error) {
+      log.error('Error while starting social login', error);
+      throw error;
+    }
+  }
+
   //=============================================================================
   // VAULT / KEYRING RELATED METHODS
   //=============================================================================

app/scripts/metamask-controller.test.js

@@ -38,6 +38,7 @@ import {
 } from '@metamask/chain-agnostic-permission';
 import { PermissionDoesNotExistError } from '@metamask/permission-controller';
 import { KeyringInternalSnapClient } from '@metamask/keyring-internal-snap-client';
+import { AuthConnection } from '@metamask/seedless-onboarding-controller';
 import { createTestProviderTools } from '../../test/stub/provider';
 import {
   HardwareDeviceNames,
@@ -434,6 +435,10 @@ describe('MetaMaskController', () => {
         metamaskController.keyringController,
         'createNewVaultAndRestore',
       );
+      jest.spyOn(
+        metamaskController.seedlessOnboardingController,
+        'authenticate',
+      );
     });
 
     describe('should reset states on first time profile load', () => {
@@ -674,6 +679,41 @@ describe('MetaMaskController', () => {
       });
     });
 
+    describe('#startOAuthLogin', () => {
+      it('should start the OAuth login flow', async () => {
+        const startOAuthLoginSpy = jest
+          .spyOn(metamaskController.oauthController, 'startOAuthLogin')
+          .mockResolvedValueOnce({
+            idTokens: ['mocked-id-token'],
+            authConnection: AuthConnection.Google,
+            authConnectionId: 'mocked-auth-connection-id',
+            groupedAuthConnectionId: 'mocked-grouped-auth-connection-id',
+            userId: 'mocked-user-id',
+            socialLoginEmail: '[email protected]',
+          });
+        const authenticateSpy = jest
+          .spyOn(
+            metamaskController.seedlessOnboardingController,
+            'authenticate',
+          )
+          .mockResolvedValueOnce({
+            isNewUser: true,
+          });
+
+        await metamaskController.startOAuthLogin(AuthConnection.Google);
+
+        expect(startOAuthLoginSpy).toHaveBeenCalledWith(AuthConnection.Google);
+        expect(authenticateSpy).toHaveBeenCalledWith({
+          idTokens: ['mocked-id-token'],
+          authConnection: AuthConnection.Google,
+          authConnectionId: 'mocked-auth-connection-id',
+          groupedAuthConnectionId: 'mocked-grouped-auth-connection-id',
+          userId: 'mocked-user-id',
+          socialLoginEmail: '[email protected]',
+        });
+      });
+    });
+
     describe('#createNewVaultAndKeychain', () => {
       it('can only create new vault on keyringController once', async () => {
         const password = 'a-fake-password';

shared/constants/onboarding.ts

@@ -17,8 +17,13 @@ export enum FirstTimeFlowType {
    */
   restore = 'restore',
   /**
-   * When a user logins with Social Login and goes through the Seedless Onboarding flow,
-   * they will have the 'seedless' firstTimeFlowType.
+   * When a user logins with Social Login and creates a new wallet,
+   * they will have the 'socialCreate' firstTimeFlowType.
    */
-  seedless = 'seedless',
+  socialCreate = 'socialCreate',
+  /**
+   * When a user logins with Social Login and imports their wallet,
+   * they will have the 'socialImport' firstTimeFlowType.
+   */
+  socialImport = 'socialImport',
 }

ui/pages/onboarding-flow/account-exist/account-exist.test.tsx

@@ -4,7 +4,7 @@ import thunk from 'redux-thunk';
 import { fireEvent, renderWithProvider } from '../../../../test/jest';
 import initializedMockState from '../../../../test/data/mock-state.json';
 import { FirstTimeFlowType } from '../../../../shared/constants/onboarding';
-import { UNLOCK_ROUTE } from '../../../helpers/constants/routes';
+import { ONBOARDING_UNLOCK_ROUTE } from '../../../helpers/constants/routes';
 import CreationSuccessful from './account-exist';
 
 const mockHistoryPush = jest.fn();
@@ -26,7 +26,7 @@ describe('Account Exist Seedless Onboarding View', () => {
       ...initializedMockState,
       metamask: {
         ...initializedMockState.metamask,
-        firstTimeFlowType: FirstTimeFlowType.seedless,
+        firstTimeFlowType: FirstTimeFlowType.socialCreate,
       },
     };
     const customMockStore = configureMockStore([thunk])(
@@ -46,9 +46,24 @@ describe('Account Exist Seedless Onboarding View', () => {
   });
 
   it('should navigate to the unlock page when the button is clicked', () => {
-    const { getByText } = renderWithProvider(<CreationSuccessful />);
+    const importFirstTimeFlowState = {
+      ...initializedMockState,
+      metamask: {
+        ...initializedMockState.metamask,
+        firstTimeFlowType: FirstTimeFlowType.socialCreate,
+      },
+    };
+    const customMockStore = configureMockStore([thunk])(
+      importFirstTimeFlowState,
+    );
+
+    const { getByText } = renderWithProvider(
+      <CreationSuccessful />,
+      customMockStore,
+    );
+
     const loginButton = getByText('Log in');
     fireEvent.click(loginButton);
-    expect(mockHistoryPush).toHaveBeenCalledWith(UNLOCK_ROUTE);
+    expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_UNLOCK_ROUTE);
   });
 });