[C-1003] Native Account Sagas (#1890)

* Split account sagas into mobile specific logic

* Fix type error

* Put back reachability code

* Address pr comments

packages/common/src/store/account/slice.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { keyBy } from 'lodash'
 
+import { User } from 'models'
 import { Nullable } from 'utils/typeUtils'
 
 import { ID } from '../../models/Identifiers'
@@ -138,7 +139,11 @@ const slice = createSlice({
     showPushNotificationConfirmation: () => {},
     resetAccount: () => {
       return initialState
-    }
+    },
+    signedIn: (
+      _state,
+      _action: PayloadAction<{ account: User; isSignUp: boolean }>
+    ) => {}
   }
 })
 
@@ -165,7 +170,8 @@ export const {
   instagramLogin,
   twitterLogin,
   showPushNotificationConfirmation,
-  resetAccount
+  resetAccount,
+  signedIn
 } = slice.actions
 
 export const reducer = slice.reducer

packages/mobile/src/store/account/sagas.ts

@@ -0,0 +1,79 @@
+import { accountActions, getContext } from '@audius/common'
+import accountSagas from 'common/store/account/sagas'
+import { updateProfileAsync } from 'common/store/profile/sagas'
+import { takeEvery, call } from 'typed-redux-saga'
+const { signedIn } = accountActions
+
+export const RESET_REQUIRED_KEY = 'password-reset-required'
+export const ENTROPY_KEY = 'hedgehog-entropy-key'
+export const IS_MOBILE_USER_KEY = 'is-mobile-user'
+
+// TODO
+// Account recovery coming in following pr
+// function* watchAccountRecovery() {
+//   yield takeEvery(
+//     MessageType.ACCOUNT_RECOVERY,
+//     function* ({ login, warning, email }: any) {
+//       let entropy: Nullable<string> = null
+//       let isSameAccount = false
+
+//       if (login) {
+//         entropy = atob(login)
+//         const oldEntropy = window.localStorage.getItem(ENTROPY_KEY)
+//         window.localStorage.setItem(ENTROPY_KEY, entropy ?? '')
+//         isSameAccount = oldEntropy === entropy
+//       }
+
+//       if (warning === 'RECOVERY_DO_NOT_SHARE' && email) {
+//         window.localStorage.setItem(RESET_REQUIRED_KEY, email)
+//       }
+
+//       // If it's not the same account,
+//       // reload webview to reload libs
+//       // with the new entropy
+//       if (!isSameAccount) {
+//         new ReloadMessage().send()
+//       } else {
+//         yield put(setNeedsAccountRecovery())
+//       }
+//     }
+//   )
+// }
+
+// When successfully signed in
+function* onSignedIn({
+  payload: { account, isSignUp }
+}: ReturnType<typeof signedIn>) {
+  const audiusBackendInstance = yield* getContext('audiusBackendInstance')
+  const localStorage = yield* getContext('localStorage')
+  const isMobileUser = yield* call(localStorage.getItem, IS_MOBILE_USER_KEY)
+  if (!isMobileUser || isMobileUser !== 'true') {
+    try {
+      // Legacy method to update whether a user has signed in on
+      // native mobile. Used in identity service for notification indexing
+      yield call(audiusBackendInstance.updateUserEvent, {
+        hasSignedInNativeMobile: true
+      })
+      // Updates the user metadata with an event `is_mobile_user` set to true
+      // if the account is being fetched from a mobile context
+      yield call(updateProfileAsync, {
+        metadata: { ...account, events: { is_mobile_user: true } }
+      })
+
+      yield call(localStorage.setItem, IS_MOBILE_USER_KEY, 'true')
+    } catch (e) {
+      console.error(e)
+      // Do nothing. A retry on the next session will suffice.
+    }
+  }
+}
+
+function* watchSignedIn() {
+  yield* takeEvery(signedIn.type, onSignedIn)
+}
+
+const sagas = () => {
+  return [...accountSagas(), watchSignedIn]
+}
+
+export default sagas

packages/mobile/src/store/sagas.ts

@@ -7,7 +7,6 @@ import {
   vipDiscordModalSagas
 } from '@audius/common'
 import analyticsSagas from 'audius-client/src/common/store/analytics/sagas'
-import accountSagas from 'common/store/account/sagas'
 import addToPlaylistSagas from 'common/store/add-to-playlist/sagas'
 import backendSagas, { setupBackend } from 'common/store/backend/sagas'
 import collectionsSagas from 'common/store/cache/collections/sagas'
@@ -52,6 +51,7 @@ import topSupportersPageSagas from 'common/store/user-list/top-supporters/sagas'
 import walletSagas from 'common/store/wallet/sagas'
 import { all, fork } from 'typed-redux-saga'
 
+import accountSagas from './account/sagas'
 import initKeyboardEvents from './keyboard/sagas'
 import notificationsSagas from './notifications/sagas'
 import oauthSagas from './oauth/sagas'

packages/web/src/common/store/account/sagas.js

@@ -23,10 +23,8 @@ import { waitForBackendSetup } from 'common/store/backend/sagas'
 import { retrieveCollections } from 'common/store/cache/collections/utils'
 import { addPlaylistsNotInLibrary } from 'common/store/playlist-library/sagas'
 import { updateProfileAsync } from 'common/store/profile/sagas'
-import { SignedIn } from 'services/native-mobile-interface/lifecycle'
 
 import disconnectedWallets from './disconnected_wallet_fix.json'
-import mobileSagas, { setHasSignedInOnMobile } from './mobileSagas'
 
 const { getFeePayer } = solanaSelectors
 const { fetchProfile } = profilePageActions
@@ -42,6 +40,7 @@ const {
 } = accountSelectors
 
 const {
+  signedIn,
   unsubscribeBrowserPushNotifications,
   showPushNotificationConfirmation,
   fetchAccountSucceeded,
@@ -54,8 +53,6 @@ const {
   addAccountPlaylist
 } = accountActions
 
-const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
-
 const IP_STORAGE_KEY = 'user-ip-timestamp'
 
 /**
@@ -98,7 +95,7 @@ function* recordIPIfNotRecent(handle) {
 
 // Tasks to be run on account successfully fetched, e.g.
 // recording metrics, setting user data
-function* onFetchAccount(account, isSignUp = false) {
+function* onSignedIn({ payload: { account, isSignUp = false } }) {
   const audiusBackendInstance = yield getContext('audiusBackendInstance')
   const analytics = yield getContext('analytics')
   const sentry = yield getContext('sentry')
@@ -115,10 +112,6 @@ function* onFetchAccount(account, isSignUp = false) {
   yield put(showPushNotificationConfirmation())
 
   yield fork(audiusBackendInstance.updateUserLocationTimezone)
-  if (NATIVE_MOBILE) {
-    yield fork(setHasSignedInOnMobile, account)
-    new SignedIn(account).send()
-  }
 
   // Fetch the profile so we get everything we need to populate
   // the left nav / other site-wide metadata.
@@ -249,9 +242,9 @@ export function* fetchAccountAsync({ fromSource = false, isSignUp = false }) {
 
   yield call(recordIPIfNotRecent, account.handle)
 
-  // Cache the account and fire the onFetch callback. We're done.
+  // Cache the account and put the signedIn action. We're done.
   yield call(cacheAccount, account)
-  yield call(onFetchAccount, account, isSignUp)
+  yield put(signedIn({ account, isSignUp }))
 }
 
 function* cacheAccount(account) {
@@ -379,6 +372,10 @@ function* watchFetchAccount() {
   yield takeEvery(fetchAccount.type, fetchAccountAsync)
 }
 
+function* watchSignedIn() {
+  yield takeEvery(signedIn.type, onSignedIn)
+}
+
 function* watchTwitterLogin() {
   yield takeEvery(twitterLogin.type, associateTwitterAccount)
 }
@@ -400,13 +397,13 @@ function* watchAddAccountPlaylist() {
 }
 
 export default function sagas() {
-  const sagas = [
+  return [
     watchFetchAccount,
+    watchSignedIn,
     watchTwitterLogin,
     watchInstagramLogin,
     watchFetchSavedAlbums,
     watchFetchSavedPlaylists,
     watchAddAccountPlaylist
   ]
-  return NATIVE_MOBILE ? sagas.concat(mobileSagas()) : sagas
 }

packages/web/src/components/password-reset/PasswordResetModal.tsx

@@ -5,7 +5,6 @@ import { Modal } from '@audius/stems'
 import { connect } from 'react-redux'
 import { Dispatch } from 'redux'
 
-import { RESET_REQUIRED_KEY } from 'common/store/account/mobileSagas'
 import EnterPassword from 'components/sign-on/EnterPassword'
 import { AppState } from 'store/types'
 import { isMobile } from 'utils/clientUtil'
@@ -15,6 +14,8 @@ import { changePassword } from './store/actions'
 import { getStatus } from './store/selectors'
 const { getNeedsAccountRecovery } = accountSelectors
 
+const RESET_REQUIRED_KEY = 'password-reset-required'
+
 const messages = {
   title: 'Reset Your Password',
   continueLabel: 'Submit',

packages/web/src/services/native-mobile-interface/lifecycle.ts

@@ -1,5 +1,3 @@
-import { User } from '@audius/common'
-
 import { NativeMobileMessage } from './helpers'
 import { MessageType } from './types'
 
@@ -8,15 +6,3 @@ export class RequestNetworkConnected extends NativeMobileMessage {
     super(MessageType.REQUEST_NETWORK_CONNECTED, {})
   }
 }
-
-export class SignedIn extends NativeMobileMessage {
-  constructor(account: User) {
-    super(MessageType.SIGNED_IN, { account })
-  }
-}
-
-export class FetchAccountFailed extends NativeMobileMessage {
-  constructor() {
-    super(MessageType.FETCH_ACCOUNT_FAILED)
-  }
-}

packages/web/src/store/sign-out/signOut.ts

@@ -1,6 +1,5 @@
 import { AudiusBackend, LocalStorage } from '@audius/common'
 
-import { IS_MOBILE_USER_KEY } from 'common/store/account/mobileSagas'
 import { removeHasRequestedBrowserPermission } from 'utils/browserNotifications'
 
 import { clearTheme } from '../../utils/theme/theme'
@@ -10,12 +9,7 @@ const AUDIUS_USE_METAMASK = 'useMetaMask'
 const BADGE_LOCAL_STORAGE_KEY = 'last_badge_tier'
 
 const removeLocalStorageItems = async (localStorage: LocalStorage) => {
-  const items = [
-    AUDIUS_EVENTS,
-    AUDIUS_USE_METAMASK,
-    BADGE_LOCAL_STORAGE_KEY,
-    IS_MOBILE_USER_KEY
-  ]
+  const items = [AUDIUS_EVENTS, AUDIUS_USE_METAMASK, BADGE_LOCAL_STORAGE_KEY]
   return await Promise.all(items.map((k) => localStorage.removeItem(k)))
 }