[TECH]: auth integration part 1 (#563)

* refactor(auth): add auth session and preload scripts

* refactor(auth): add auth modal component

* refactor(auth): show extension modal when there are already requests

* refactor(auth): show onboarding modal if no provider is installed

* refactor(auth): update explanation

* refactor(auth): remove log

* refactor(auth): handle account connected

* refactor(auth): update yarn lock

* refactor(auth): guard modal by qa mode

* refactor(auth): add alert

* refactor(auth): restore preview url

* refactor(auth): rename state class name and use private fields

* refactor(auth): use getConnectedProvider instead of getCurrentWeb3Provider

* refactor(providers): make return type of getConnectedProvider enum

* refactor(providers): make return type of getConnectedProvider enum

* refactor(auth-state): use private modifier instead of private fields

* refactor(auth): open modal when qa mode is activated

* refactor(auth): track pending signature requests and resume after wallet is connected

* refactor(proxy-server): update commit

* handle destroyed wc sender

* fix mm reload after import

* update mm

* reopen auth modal on app reload after import (#607)

* refactor(auth): update webview dimension and padding

* feat(auth): support email verified

* fix(auth): add back transparent background

* test: add prependListener mock

* chore: prettier fix

* add manage hp accounts dropdown option

* prevent auth modal reopen on every launch

* rm launch auth modal on qa mode, rm alert

* fix imports

* revert mm changes

* fix onboarding on first app load

* fix email verify stuck

* rm log

* mv authStore to authState

* close sign in modal on email confirm

* change account dropdown zIndex to be > mm ext

* add email-confirmation protocol handler

* update email confirmation protocol

* prettier

* add try catch to reload

* rm debug logs

* fix: Fixed submodules not updated, which fails pipelines

* point to submodule auth branches

* add test, fix mac deeplink

* chore(auth): use extension api to show popup instead of state

* chore(auth): use extension api to show popup instead of state

* chore: run lint

* feat(auth): add is launcher query parameter

* refactor(auth): remove unused import

* refactor(auth): use fix branch for provider helper

* refactor(auth): use fix branch for provider helper

* refactor(auth): use main branch in submodules

---------

Co-authored-by: Brett <27568879+BrettCleary@users.noreply.github.com>
Co-authored-by: Red <red.pace.dev@gmail.com>

Author: 3 people

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperplay",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": true,
   "main": "build/electron/main.js",
   "homepage": "./",
@@ -35,6 +35,7 @@
       "build/trayIconDark24x24.png",
       "build/extensions",
       "build/hyperplay_store_preload.js",
+      "build/transparent_body_preload.js",
       "build/webviewPreload.js"
     ],
     "protocols": [

src/backend/__mocks__/electron.ts

@@ -157,7 +157,8 @@ const ipcMain = {
   on: jest.fn().mockReturnThis(),
   handle: jest.fn().mockReturnThis(),
   once: jest.fn().mockReturnThis(),
-  emit: jest.fn().mockReturnThis()
+  emit: jest.fn().mockReturnThis(),
+  prependListener: jest.fn().mockReturnThis()
 }
 
 export {

src/backend/__tests__/protocol.test.ts

@@ -0,0 +1,38 @@
+import { parseUrl } from '../../backend/protocol'
+
+jest.mock('electron')
+jest.mock('../logger/logger')
+jest.mock('../logger/logfile')
+jest.mock('../dialog/dialog')
+
+describe('backend/protocol.ts', () => {
+  test('email confirmation url is parsed', () => {
+    const emailConfirmationUrl = 'https://www.npmjs.com/'
+    const url =
+      'hyperplay://email-confirmation?url=' +
+      encodeURIComponent(emailConfirmationUrl)
+
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars*/
+    const [command, runner, arg = ''] = parseUrl(url)
+
+    const decodedEmailConfirmationUrl = decodeURIComponent(arg)
+    expect(decodedEmailConfirmationUrl).toEqual(emailConfirmationUrl)
+
+    expect(command).toEqual('email-confirmation')
+  })
+
+  test('email confirmation url with trailing / is parsed', () => {
+    const emailConfirmationUrl = 'https://www.npmjs.com/'
+    const url =
+      'hyperplay://email-confirmation/?url=' +
+      encodeURIComponent(emailConfirmationUrl)
+
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars*/
+    const [command, runner, arg = ''] = parseUrl(url)
+
+    const decodedEmailConfirmationUrl = decodeURIComponent(arg)
+    expect(decodedEmailConfirmationUrl).toEqual(emailConfirmationUrl)
+
+    expect(command).toEqual('email-confirmation')
+  })
+})

src/backend/api/misc.ts

@@ -5,7 +5,8 @@ import {
   Tools,
   DialogType,
   ButtonOptions,
-  GamepadActionArgs
+  GamepadActionArgs,
+  WrapRendererCallback
 } from 'common/types'
 import { NileRegisterData } from 'common/types/nile'
 
@@ -128,6 +129,7 @@ import Store from 'electron-store'
 interface StoreMap {
   [key: string]: Store
 }
+
 const stores: StoreMap = {}
 
 export const storeNew = function (
@@ -188,3 +190,43 @@ export const fetchPlaytimeFromServer = async (
   runner: Runner,
   appName: string
 ) => ipcRenderer.invoke('getPlaytimeFromRunner', runner, appName)
+
+export const handleQaModeActivated = (
+  onChange: (e: Electron.IpcRendererEvent) => void
+) => {
+  ipcRenderer.on('qaModeActive', onChange)
+  return () => {
+    ipcRenderer.removeListener('qaModeActive', onChange)
+  }
+}
+
+export const handleOAuthCompleted = (
+  onMessage: (e: Electron.IpcRendererEvent) => void
+): (() => void) => {
+  ipcRenderer.on('oauthCompleted', onMessage)
+  return () => {
+    ipcRenderer.removeListener('oauthCompleted', onMessage)
+  }
+}
+
+export const handleEmailConfirmed = (
+  onMessage: (e: Electron.IpcRendererEvent) => void
+): (() => void) => {
+  ipcRenderer.on('emailVerified', onMessage)
+  return () => {
+    ipcRenderer.removeListener('emailVerified', onMessage)
+  }
+}
+
+export const openAuthModalIfAppReloads = () => {
+  ipcRenderer.send('openAuthModalIfAppReloads')
+}
+
+export const handleEmailConfirmationNavigation = (
+  cb: WrapRendererCallback<(url: string) => void>
+): (() => void) => {
+  ipcRenderer.on('emailConfirmation', cb)
+  return () => {
+    ipcRenderer.removeListener('emailConfirmation', cb)
+  }
+}

src/backend/auth_provider_preload.ts

@@ -0,0 +1,21 @@
+import { contextBridge, ipcRenderer } from 'electron'
+import { DEV_PORTAL_URL } from '../common/constants'
+
+contextBridge.exposeInMainWorld('authApi', {
+  closeAuthModal: () => {
+    ipcRenderer.sendToHost('closeAuthModal')
+  },
+  reportAccountNotConnected: () => {
+    ipcRenderer.sendToHost('auth:accountNotConnected')
+  },
+  reportAccountConnected: () => {
+    ipcRenderer.sendToHost('auth:accountConnected')
+  },
+  openProviderOAuthLink: (provider: string) => {
+    ipcRenderer.send('openExternalUrl', `${DEV_PORTAL_URL}/oauth/${provider}`)
+  }
+})
+
+ipcRenderer.on('auth:retryWalletConnection', () => {
+  window.dispatchEvent(new CustomEvent('auth:retryWalletConnection'))
+})

src/backend/constants.ts

@@ -237,7 +237,8 @@ export function createNecessaryFolders() {
 }
 
 const onboardLocalStore = new TypeCheckedStoreBackend('onboardingStore', {
-  cwd: 'store'
+  cwd: 'store',
+  name: 'onboarding-store'
 })
 
 export {

src/backend/hyperplay-extension-helper

@@ -106,7 +106,8 @@ import {
   fixAsarPath,
   twitterLink,
   eventsToCloseMetaMaskPopupOn,
-  setQaToken
+  setQaToken,
+  onboardLocalStore
 } from './constants'
 import { handleProtocol } from './protocol'
 import {
@@ -167,6 +168,7 @@ import * as Sentry from '@sentry/electron'
 import { prodSentryDsn, devSentryDsn } from 'common/constants'
 
 let sentryInitialized = false
+
 function initSentry() {
   if (sentryInitialized) return
   Sentry.init({
@@ -360,6 +362,13 @@ if (!gotTheLock) {
     )
     ses.setPreloads([path.join(__dirname, 'providerPreload.js')])
 
+    const authSession = session.fromPartition('persist:auth')
+    authSession.setPreloads([
+      path.join(__dirname, 'providerPreload.js'),
+      path.join(__dirname, 'transparent_body_preload.js'),
+      path.join(__dirname, 'auth_provider_preload.js')
+    ])
+
     const hpStoreSession = session.fromPartition('persist:hyperplaystore')
     hpStoreSession.setPreloads([
       path.join(__dirname, 'hyperplay_store_preload.js'),
@@ -1943,6 +1952,11 @@ ipcMain.on('openGameInEpicStore', async (_e, url) => {
 
 ipcMain.on('setQaToken', (_e, qaToken) => {
   setQaToken(qaToken)
+  if (qaToken.length > 0) sendFrontendMessage('qaModeActive')
+})
+
+ipcMain.on('openAuthModalIfAppReloads', () => {
+  onboardLocalStore.set('openAuthModalIfAppReloads', true)
 })
 
 ipcMain.on('killOverlay', () => {

src/backend/hyperplay-overlay

@@ -8,7 +8,12 @@ import { icon } from './constants'
 import { getGameInfo } from 'backend/storeManagers/hyperplay/games'
 import { addGameToLibrary } from 'backend/storeManagers/hyperplay/library'
 
-type Command = 'ping' | 'launch'
+type Command =
+  | 'ping'
+  | 'launch'
+  | 'oauth-completed'
+  | 'email-verified'
+  | 'email-confirmation'
 
 const RUNNERS = ['hyperplay', 'legendary', 'gog', 'nile', 'sideload']
 
@@ -31,14 +36,25 @@ export async function handleProtocol(args: string[]) {
 
   const [command, runner, arg = ''] = parseUrl(url)
 
-  logInfo(`received '${url}'`, LogPrefix.ProtocolHandler)
+  logInfo(`received ${url}`, LogPrefix.ProtocolHandler)
+
+  const emailConfirmationUrl = decodeURIComponent(arg)
 
   switch (command) {
     case 'ping':
       return handlePing(arg)
     case 'launch':
       await handleLaunch(runner, arg, mainWindow)
       break
+    case 'oauth-completed':
+      sendFrontendMessage('oauthCompleted')
+      break
+    case 'email-verified':
+      sendFrontendMessage('emailVerified')
+      break
+    case 'email-confirmation':
+      sendFrontendMessage('emailConfirmation', emailConfirmationUrl)
+      break
     default:
       return
   }
@@ -72,9 +88,11 @@ function getUrl(args: string[]): string | undefined {
  * parseUrl('hyperplay://launch/legendary/123')
  * // => ['launch', 'legendary', '123']
  **/
-function parseUrl(url: string): [Command, Runner?, string?, string?] {
+export function parseUrl(url: string): [Command, Runner?, string?, string?] {
   const [, fullCommand] = url.split('://')
 
+  const urlObject = new URL(url)
+
   //check if the second param is a runner or not and adjust parts accordingly
   const splitCommand = fullCommand.split('/')
   const hasRunner = RUNNERS.includes(splitCommand[1] as Runner)
@@ -87,6 +105,9 @@ function parseUrl(url: string): [Command, Runner?, string?, string?] {
       const [command, runner, accountId, appId] = splitCommand
       return [command as Command, runner as Runner, accountId, appId]
     }
+  } else if (splitCommand[0].startsWith('email-confirmation')) {
+    const emailConfirmUrl = urlObject.searchParams.get('url')
+    return ['email-confirmation', undefined, emailConfirmUrl ?? undefined]
   } else {
     const [command, appId] = splitCommand
     return [command as Command, undefined, appId]

src/backend/hyperplay-proxy-server

@@ -0,0 +1,15 @@
+import { webFrame } from 'electron'
+
+const removeBackground = `
+document.onreadystatechange = function(e)
+{
+  if (document.readyState === 'interactive')
+  {
+    const styles = 'body { background: transparent !important } div.root { padding: 0px !important; padding-top: 5px !important; }'
+    const styleSheet = document.createElement('style')
+    styleSheet.innerText = styles
+    document.head.appendChild(styleSheet)
+  }
+};
+`
+webFrame.executeJavaScript(removeBackground)

src/backend/main.ts

@@ -7,3 +7,6 @@ export const devSentryDsn =
 export const METAMASK_SNAPS_URL = 'https://snaps.metamask.io/'
 export const METAMASK_SNAPS_EXTERNAL_URL = 'https://metamask.io/snaps/'
 export const METAMASK_PORTFOLIO_URL = 'https://portfolio.metamask.io/'
+
+export const DEV_PORTAL_URL =
+  'https://hyperplay-dev-git-feature-unified-auth-ui-valist.vercel.app/'

src/backend/protocol.ts

@@ -71,9 +71,11 @@ interface HyperPlaySyncIPCFunctions {
   ignoreExitToTray: () => void
   setQaToken: (qaToken: string) => void
   removeFromLibrary: (appName: string) => void
+  openAuthModalIfAppReloads: () => void
   overlayReady: () => void
   updateOverlayWindow: (state: OverlayWindowState) => void
   toggleIsPopupOpen: () => void
+  showPopup: () => void
   toastCloseOnClick: (key: ToastKey) => void
   lockPopup: (lock: boolean) => void
   killOverlay: () => void
@@ -134,6 +136,9 @@ interface SyncIPCFunctions extends HyperPlaySyncIPCFunctions {
   cancelDownload: (removeDownloaded: boolean) => void
   cancelExtraction: (appName: string) => void
   copyWalletConnectBaseURIToClipboard: () => void
+  closeAuthModal: () => void
+  'auth:accountConnected': () => void
+  'auth:accountNotConnected': () => void
   focusMainWindow: () => void
 }
 
@@ -428,6 +433,14 @@ declare namespace Electron {
       ...args: Parameters<Definition>
     ) => void
 
+    public sendToHost: <
+      Name extends keyof SyncIPCFunctions,
+      Definition extends SyncIPCFunctions[Name]
+    >(
+      name: Name,
+      ...args: Parameters<Definition>
+    ) => void
+
     public invoke: <
       Name extends keyof AsyncIPCFunctions,
       Definition extends AsyncIPCFunctions[Name],

src/backend/transparent_body_preload.ts

@@ -97,6 +97,7 @@ export interface StoreStructure {
   onboardingStore: {
     completedEarlyAccess: boolean
     completedDataPrivacy: boolean
+    openAuthModalIfAppReloads: boolean
   }
   hpLibraryStore: {
     [key: string]: GameInfo[]

src/common/constants.ts

@@ -29,6 +29,8 @@ import DownloadToastManager from './components/UI/DownloadToastManager'
 import TopNavBar from './components/UI/TopNavBar'
 import StoreNavHandler from './StoreNavHandler'
 import QaAuthHandler from './QaAuthHandler'
+import AuthModal from './components/UI/AuthModal'
+import EmailVerifiedModal from './components/UI/EmailVerifiedModal'
 import { WalletOnboardCloseReason } from 'common/types'
 import { DeviceStateController } from './state/DeviceState'
 import { ENABLE_AMAZON_STORE } from './constants'
@@ -48,6 +50,8 @@ function App() {
           <ExtensionManager />
           <DialogHandler />
           <ExternalLinkDialog />
+          <AuthModal />
+          <EmailVerifiedModal />
           <StoreNavHandler />
           {isSettingsModalOpen.gameInfo && (
             <SettingsModal