From c740dd3f5edf2178827865cec43664701da00729 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Mon, 20 Mar 2023 16:40:54 -0700
Subject: [PATCH] [C-2316] Add remote config for all oauth verification (#3052)

---
 .../src/services/remote-config/defaults.ts    |  4 ++
 .../services/remote-config/feature-flags.ts   |  2 -
 .../src/services/remote-config/types.ts       | 16 +++++++
 .../AccountVerificationScreen.tsx             | 48 +++++++++++--------
 .../mobile/src/screens/signon/ProfileAuto.tsx | 46 ++++++++++--------
 .../components/social-proof/SocialProof.tsx   | 31 ++++++------
 .../components/desktop/VerificationModal.tsx  | 34 +++++++------
 .../components/mobile/VerificationPage.tsx    | 35 +++++++-------
 .../components/CompleteProfileWithSocial.tsx  | 32 +++++++------
 .../pages/sign-on/components/ProfilePage.tsx  |  9 +---
 .../sign-on/components/mobile/SignOnPage.tsx  |  6 +--
 11 files changed, 152 insertions(+), 111 deletions(-)

diff --git a/apps/audius-client/packages/common/src/services/remote-config/defaults.ts b/apps/audius-client/packages/common/src/services/remote-config/defaults.ts
index e7e96cf0495..f4a1f371c3e 100644
--- a/apps/audius-client/packages/common/src/services/remote-config/defaults.ts
+++ b/apps/audius-client/packages/common/src/services/remote-config/defaults.ts
@@ -87,6 +87,10 @@ export const remoteConfigBooleanDefaults: {
 } = {
   [BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION]: true,
   [BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP]: true,
+  [BooleanKeys.DISPLAY_TWITTER_VERIFICATION]: true,
+  [BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP]: true,
+  [BooleanKeys.DISPLAY_TIKTOK_VERIFICATION]: true,
+  [BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP]: true,
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_WALLET_CONNECT]: true,
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_BITSKI]: true,
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_WALLET_LINK]: true,
diff --git a/apps/audius-client/packages/common/src/services/remote-config/feature-flags.ts b/apps/audius-client/packages/common/src/services/remote-config/feature-flags.ts
index 9bdafeccdb2..9c81994f652 100644
--- a/apps/audius-client/packages/common/src/services/remote-config/feature-flags.ts
+++ b/apps/audius-client/packages/common/src/services/remote-config/feature-flags.ts
@@ -29,7 +29,6 @@ export enum FeatureFlags {
   SHARE_TO_STORY = 'share_to_story_2',
   READ_SUBSCRIBERS_FROM_DISCOVERY_ENABLED = 'read_subscribers_from_discovery_enabled',
   MOBILE_WALLET_CONNECT = 'mobile_wallet_connect_final',
-  COMPLETE_PROFILE_WITH_TIKTOK = 'complete_profile_with_tiktok_2',
   VERIFY_HANDLE_WITH_TIKTOK = 'verify_handle_with_tiktok',
   AUDIO_TRANSACTIONS_HISTORY = 'audio_transactions_history',
   RATE_CTA_ENABLED = 'rate_cta_enabled_v2',
@@ -90,7 +89,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.SHARE_TO_STORY]: false,
   [FeatureFlags.READ_SUBSCRIBERS_FROM_DISCOVERY_ENABLED]: false,
   [FeatureFlags.MOBILE_WALLET_CONNECT]: false,
-  [FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK]: false,
   [FeatureFlags.VERIFY_HANDLE_WITH_TIKTOK]: false,
   [FeatureFlags.AUDIO_TRANSACTIONS_HISTORY]: false,
   [FeatureFlags.RATE_CTA_ENABLED]: false,
diff --git a/apps/audius-client/packages/common/src/services/remote-config/types.ts b/apps/audius-client/packages/common/src/services/remote-config/types.ts
index 33c33f22ceb..390027feaaf 100644
--- a/apps/audius-client/packages/common/src/services/remote-config/types.ts
+++ b/apps/audius-client/packages/common/src/services/remote-config/types.ts
@@ -181,6 +181,22 @@ export enum BooleanKeys {
    * Boolean to show instagram verification on web + desktop.
    */
   DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP = 'DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP',
+  /**
+   * Boolean to show twitter verification on mobile.
+   */
+  DISPLAY_TWITTER_VERIFICATION = 'DISPLAY_TWITTER_VERIFICATION',
+  /**
+   * Boolean to show twitter verification on web + desktop.
+   */
+  DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP = 'DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP',
+  /**
+   * Boolean to show twitter verification on mobile.
+   */
+  DISPLAY_TIKTOK_VERIFICATION = 'DISPLAY_TIKTOK_VERIFICATION',
+  /**
+   * Boolean to show twitter verification on web + desktop.
+   */
+  DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP = 'DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP',
 
   /**
    * Boolean to skip the rollover nodes sanity check.
diff --git a/apps/audius-client/packages/mobile/src/screens/settings-screen/AccountVerificationScreen.tsx b/apps/audius-client/packages/mobile/src/screens/settings-screen/AccountVerificationScreen.tsx
index 99f46cd329b..62b8f76e659 100644
--- a/apps/audius-client/packages/mobile/src/screens/settings-screen/AccountVerificationScreen.tsx
+++ b/apps/audius-client/packages/mobile/src/screens/settings-screen/AccountVerificationScreen.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { Status, accountSelectors, FeatureFlags } from '@audius/common'
+import { Status, accountSelectors, BooleanKeys } from '@audius/common'
 import * as signOnActions from 'common/store/pages/signon/actions'
 import { getHandleField } from 'common/store/pages/signon/selectors'
 import type { EditableField } from 'common/store/pages/signon/types'
@@ -20,7 +20,7 @@ import { TikTokAuthButton } from 'app/components/tiktok-auth'
 import { ProfilePicture } from 'app/components/user'
 import UserBadges from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
+import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { track, make } from 'app/services/analytics'
 import * as oauthActions from 'app/store/oauth/actions'
 import {
@@ -126,9 +126,13 @@ export const AccountVerificationScreen = () => {
   const tikTokError = useSelector(getTikTokError)
   const abandoned = useSelector(getAbandoned)
 
-  const { isEnabled: isTikTokEnabled } = useFeatureFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION
   )
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
+  )
+  const isTikTokEnabled = useRemoteVar(BooleanKeys.DISPLAY_TIKTOK_VERIFICATION)
 
   const handleField: EditableField = useSelector(getHandleField)
 
@@ -297,21 +301,27 @@ export const AccountVerificationScreen = () => {
     <View style={styles.contentContainer}>
       <Text style={styles.text}>{messages.gettingVerified}</Text>
       <Text style={styles.text}>{messages.handleMatch}</Text>
-      <SocialButton
-        color={'#1BA1F1'}
-        fullWidth
-        icon={IconTwitter}
-        onPress={handleTwitterPress}
-        styles={{ root: styles.socialButtonContainer }}
-        title={messages.verifyTwitter}
-      />
-      <SocialButton
-        fullWidth
-        icon={IconInstagram}
-        onPress={handleInstagramPress}
-        styles={{ root: styles.socialButtonContainer }}
-        title={messages.verifyInstagram}
-      />
+
+      {isTwitterEnabled ? (
+        <SocialButton
+          color={'#1BA1F1'}
+          fullWidth
+          icon={IconTwitter}
+          onPress={handleTwitterPress}
+          styles={{ root: styles.socialButtonContainer }}
+          title={messages.verifyTwitter}
+        />
+      ) : null}
+
+      {isInstagramEnabled ? (
+        <SocialButton
+          fullWidth
+          icon={IconInstagram}
+          onPress={handleInstagramPress}
+          styles={{ root: styles.socialButtonContainer }}
+          title={messages.verifyInstagram}
+        />
+      ) : null}
 
       {isTikTokEnabled ? (
         <TikTokAuthButton
diff --git a/apps/audius-client/packages/mobile/src/screens/signon/ProfileAuto.tsx b/apps/audius-client/packages/mobile/src/screens/signon/ProfileAuto.tsx
index aea7a728d1d..7774f900511 100644
--- a/apps/audius-client/packages/mobile/src/screens/signon/ProfileAuto.tsx
+++ b/apps/audius-client/packages/mobile/src/screens/signon/ProfileAuto.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import type { Name } from '@audius/common'
-import { FeatureFlags } from '@audius/common'
+import { BooleanKeys } from '@audius/common'
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
 import * as signOnActions from 'common/store/pages/signon/actions'
 import {
@@ -23,7 +23,7 @@ import { Text } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { SocialButton } from 'app/components/social-button'
 import { TikTokAuthButton } from 'app/components/tiktok-auth'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
+import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
 import { track, make } from 'app/services/analytics'
 import * as oauthActions from 'app/store/oauth/actions'
@@ -164,9 +164,13 @@ const ProfileAuto = ({ navigation }: ProfileAutoProps) => {
   const abandoned = useSelector(getAbandoned)
   const handleField: EditableField = useSelector(getHandleField)
   const emailField: EditableField = useSelector(getEmailField)
-  const { isEnabled: isTikTokEnabled } = useFeatureFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION
   )
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
+  )
+  const isTikTokEnabled = useRemoteVar(BooleanKeys.DISPLAY_TIKTOK_VERIFICATION)
   const [isLoading, setIsLoading] = useState(false)
   const [hasNavigatedAway, setHasNavigatedAway] = useState(false)
   const [didValidateHandle, setDidValidateHandle] = useState(false)
@@ -435,21 +439,25 @@ const ProfileAuto = ({ navigation }: ProfileAutoProps) => {
               </View>
             </View>
 
-            <SocialButton
-              color={'#1BA1F1'}
-              fullWidth
-              icon={IconTwitter}
-              onPress={handleTwitterPress}
-              styles={{ root: styles.socialButtonContainer }}
-              title={messages.twitterButton}
-            />
-            <SocialButton
-              fullWidth
-              icon={IconInstagram}
-              onPress={handleInstagramPress}
-              styles={{ root: styles.socialButtonContainer }}
-              title={messages.instagramButton}
-            />
+            {isTwitterEnabled ? (
+              <SocialButton
+                color={'#1BA1F1'}
+                fullWidth
+                icon={IconTwitter}
+                onPress={handleTwitterPress}
+                styles={{ root: styles.socialButtonContainer }}
+                title={messages.twitterButton}
+              />
+            ) : null}
+            {isInstagramEnabled ? (
+              <SocialButton
+                fullWidth
+                icon={IconInstagram}
+                onPress={handleInstagramPress}
+                styles={{ root: styles.socialButtonContainer }}
+                title={messages.instagramButton}
+              />
+            ) : null}
             {isTikTokEnabled ? (
               <TikTokAuthButton
                 onPress={handleTikTokPress}
diff --git a/apps/audius-client/packages/web/src/components/social-proof/SocialProof.tsx b/apps/audius-client/packages/web/src/components/social-proof/SocialProof.tsx
index ba2b70d7327..723a4d40778 100644
--- a/apps/audius-client/packages/web/src/components/social-proof/SocialProof.tsx
+++ b/apps/audius-client/packages/web/src/components/social-proof/SocialProof.tsx
@@ -8,8 +8,7 @@ import {
   TwitterProfile,
   InstagramProfile,
   accountActions,
-  TikTokProfile,
-  FeatureFlags
+  TikTokProfile
 } from '@audius/common'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -20,7 +19,7 @@ import { InstagramAuthButton } from 'components/instagram-auth/InstagramAuthButt
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 import ModalDrawer from 'pages/audio-rewards-page/components/modals/ModalDrawer'
 
 import styles from './SocialProof.module.css'
@@ -63,12 +62,14 @@ const VerifyBody = ({
   onTikTokLogin,
   onFailure
 }: VerifyBodyProps) => {
-  const displayInstagram = useRemoteVar(
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isInstagramEnabled = useRemoteVar(
     BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
   )
-
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
 
   const record = useRecord()
@@ -103,13 +104,15 @@ const VerifyBody = ({
     <div className={styles.container}>
       <p>{messages.description}</p>
       <div className={styles.btnContainer}>
-        <TwitterAuthButton
-          onSuccess={onTwitterLogin}
-          onFailure={(error: Error) => onFailure('twitter', error)}
-          onClick={handleClickTwitter}
-          text={messages.twitterConfirm}
-        />
-        {displayInstagram && (
+        {isTwitterEnabled ? (
+          <TwitterAuthButton
+            onSuccess={onTwitterLogin}
+            onFailure={(error: Error) => onFailure('twitter', error)}
+            onClick={handleClickTwitter}
+            text={messages.twitterConfirm}
+          />
+        ) : null}
+        {isInstagramEnabled && (
           <InstagramAuthButton
             onClick={handleClickInstagram}
             onSuccess={onInstagramLogin}
diff --git a/apps/audius-client/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx b/apps/audius-client/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx
index c3283c9f778..563e60a99a3 100644
--- a/apps/audius-client/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx
+++ b/apps/audius-client/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx
@@ -10,7 +10,6 @@ import {
   TwitterProfile,
   InstagramProfile,
   musicConfettiActions,
-  FeatureFlags,
   TikTokProfile
 } from '@audius/common'
 import { Modal, Button, ButtonType, IconNote, ButtonSize } from '@audius/stems'
@@ -25,7 +24,7 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
 import UserBadges from 'components/user-badges/UserBadges'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 import { useUserProfilePicture } from 'hooks/useUserProfilePicture'
 import { profilePage } from 'utils/route'
 
@@ -67,12 +66,14 @@ type VerifyBodyProps = {
 }
 
 const VerifyBody = (props: VerifyBodyProps) => {
-  const displayInstagram = useRemoteVar(
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isInstagramEnabled = useRemoteVar(
     BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
   )
-
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
   const record = useRecord()
   const { handle, onClick } = props
@@ -106,15 +107,18 @@ const VerifyBody = (props: VerifyBodyProps) => {
       <p className={styles.text}>{messages.description}</p>
       <div className={cn(styles.text, styles.warning)}>{messages.warning}</div>
       <div className={styles.btnContainer}>
-        <TwitterAuthButton
-          onClick={handleClickTwitter}
-          onFailure={props.onFailure}
-          onSuccess={props.onTwitterLogin}
-          text={messages.twitterVerify}
-          className={styles.socialButton}
-          containerClassName={styles.socialButton}
-        />
-        {displayInstagram ? (
+        {isTwitterEnabled ? (
+          <TwitterAuthButton
+            onClick={handleClickTwitter}
+            onFailure={props.onFailure}
+            onSuccess={props.onTwitterLogin}
+            text={messages.twitterVerify}
+            className={styles.socialButton}
+            containerClassName={styles.socialButton}
+          />
+        ) : null}
+
+        {isInstagramEnabled ? (
           <InstagramAuthButton
             onClick={handleClickInstagram}
             onFailure={props.onFailure}
diff --git a/apps/audius-client/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx b/apps/audius-client/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx
index cca4db95ad6..8a6e3bad240 100644
--- a/apps/audius-client/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx
+++ b/apps/audius-client/packages/web/src/pages/settings-page/components/mobile/VerificationPage.tsx
@@ -9,7 +9,6 @@ import {
   BooleanKeys,
   InstagramProfile,
   TwitterProfile,
-  FeatureFlags,
   TikTokProfile
 } from '@audius/common'
 import {
@@ -29,7 +28,7 @@ import Page from 'components/page/Page'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
 import UserBadges from 'components/user-badges/UserBadges'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 import { useUserProfilePicture } from 'hooks/useUserProfilePicture'
 import { profilePage } from 'utils/route'
 
@@ -70,12 +69,14 @@ type VerifyBodyProps = {
 }
 
 const VerifyBody = (props: VerifyBodyProps) => {
-  const displayInstagram = useRemoteVar(
-    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
   )
-
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
 
   const record = useRecord()
@@ -109,15 +110,17 @@ const VerifyBody = (props: VerifyBodyProps) => {
       <div className={styles.text}>{messages.instructions}</div>
       <div className={cn(styles.text, styles.warning)}>{messages.warning}</div>
       <div className={styles.btnContainer}>
-        <TwitterAuthButton
-          onClick={handleClickTwitter}
-          onSuccess={props.onTwitterLogin}
-          onFailure={props.onFailure}
-          className={styles.socialButton}
-          containerClassName={styles.socialButton}
-          text={messages.twitterVerify}
-        />
-        {displayInstagram ? (
+        {isTwitterEnabled ? (
+          <TwitterAuthButton
+            onClick={handleClickTwitter}
+            onSuccess={props.onTwitterLogin}
+            onFailure={props.onFailure}
+            className={styles.socialButton}
+            containerClassName={styles.socialButton}
+            text={messages.twitterVerify}
+          />
+        ) : null}
+        {isInstagramEnabled ? (
           <InstagramAuthButton
             onClick={handleClickInstagram}
             onSuccess={props.onInstagramLogin}
diff --git a/apps/audius-client/packages/web/src/pages/sign-on/components/CompleteProfileWithSocial.tsx b/apps/audius-client/packages/web/src/pages/sign-on/components/CompleteProfileWithSocial.tsx
index 9df950f4351..4ba09c1aff0 100644
--- a/apps/audius-client/packages/web/src/pages/sign-on/components/CompleteProfileWithSocial.tsx
+++ b/apps/audius-client/packages/web/src/pages/sign-on/components/CompleteProfileWithSocial.tsx
@@ -2,7 +2,6 @@ import { useCallback } from 'react'
 
 import {
   BooleanKeys,
-  FeatureFlags,
   InstagramProfile,
   TikTokProfile,
   TwitterProfile
@@ -15,7 +14,7 @@ import { InstagramAuthButton } from 'components/instagram-auth/InstagramAuthButt
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { TikTokAuthButton } from 'components/tiktok-auth/TikTokAuthButton'
 import { TwitterAuthButton } from 'components/twitter-auth/TwitterAuthButton'
-import { useFlag, useRemoteVar } from 'hooks/useRemoteConfig'
+import { useRemoteVar } from 'hooks/useRemoteConfig'
 
 import styles from './CompleteProfileWithSocial.module.css'
 
@@ -34,7 +33,6 @@ const messages = {
 }
 
 export type CompleteProfileWithSocialProps = {
-  displayInstagramRemoteVarKey?: BooleanKeys
   initial: boolean
   isLoading: boolean
   isMobile: boolean
@@ -52,7 +50,6 @@ export type CompleteProfileWithSocialProps = {
 
 const CompleteProfileWithSocial = (props: CompleteProfileWithSocialProps) => {
   const {
-    displayInstagramRemoteVarKey = BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP,
     initial,
     isLoading,
     isMobile,
@@ -67,10 +64,15 @@ const CompleteProfileWithSocial = (props: CompleteProfileWithSocialProps) => {
     onTwitterStart,
     showCompleteProfileWithSocial
   } = props
-  const { isEnabled: isTikTokEnabled } = useFlag(
-    FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK
+  const isTwitterEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TWITTER_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isInstagramEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION_WEB_AND_DESKTOP
+  )
+  const isTikTokEnabled = useRemoteVar(
+    BooleanKeys.DISPLAY_TIKTOK_VERIFICATION_WEB_AND_DESKTOP
   )
-  const displayInstagram = useRemoteVar(displayInstagramRemoteVarKey)
 
   const handleClickTwitter = useCallback(() => {
     onTwitterStart()
@@ -147,13 +149,15 @@ const CompleteProfileWithSocial = (props: CompleteProfileWithSocialProps) => {
                   </ul>
                 </div>
                 <div className={styles.buttonContainer}>
-                  <TwitterAuthButton
-                    onClick={handleClickTwitter}
-                    onFailure={onFailure}
-                    onSuccess={onTwitterLogin}
-                    text={messages.twitterButton}
-                  />
-                  {displayInstagram && (
+                  {isTwitterEnabled ? (
+                    <TwitterAuthButton
+                      onClick={handleClickTwitter}
+                      onFailure={onFailure}
+                      onSuccess={onTwitterLogin}
+                      text={messages.twitterButton}
+                    />
+                  ) : null}
+                  {isInstagramEnabled && (
                     <InstagramAuthButton
                       onClick={handleClickInstagram}
                       onFailure={onFailure}
diff --git a/apps/audius-client/packages/web/src/pages/sign-on/components/ProfilePage.tsx b/apps/audius-client/packages/web/src/pages/sign-on/components/ProfilePage.tsx
index 3032066ec36..8cf6d6ef3ff 100644
--- a/apps/audius-client/packages/web/src/pages/sign-on/components/ProfilePage.tsx
+++ b/apps/audius-client/packages/web/src/pages/sign-on/components/ProfilePage.tsx
@@ -13,9 +13,7 @@ import cn from 'classnames'
 
 import { ReactComponent as IconCaretLeft } from 'assets/img/iconCaretLeft.svg'
 import { ToastContext } from 'components/toast/ToastContext'
-import CompleteProfileWithSocial, {
-  CompleteProfileWithSocialProps
-} from 'pages/sign-on/components/CompleteProfileWithSocial'
+import CompleteProfileWithSocial from 'pages/sign-on/components/CompleteProfileWithSocial'
 import ProfileForm, {
   ProfileFormProps
 } from 'pages/sign-on/components/ProfileForm'
@@ -68,12 +66,10 @@ type ProfilePageProps = {
 } & Pick<
   ProfileFormProps,
   'name' | 'handle' | 'onHandleChange' | 'onNameChange' | 'setProfileImage'
-> &
-  Pick<CompleteProfileWithSocialProps, 'displayInstagramRemoteVarKey'>
+>
 
 const ProfilePage = (props: ProfilePageProps) => {
   const {
-    displayInstagramRemoteVarKey,
     handle,
     isVerified,
     name,
@@ -235,7 +231,6 @@ const ProfilePage = (props: ProfilePageProps) => {
     <div className={cn(styles.container, isMobile && styles.isMobile)}>
       {showCompleteProfileWithSocial ? (
         <CompleteProfileWithSocial
-          displayInstagramRemoteVarKey={displayInstagramRemoteVarKey}
           isLoading={isLoading}
           isMobile={isMobile}
           initial={isInitial}
diff --git a/apps/audius-client/packages/web/src/pages/sign-on/components/mobile/SignOnPage.tsx b/apps/audius-client/packages/web/src/pages/sign-on/components/mobile/SignOnPage.tsx
index 919c1cc09b7..1ab424dc24c 100644
--- a/apps/audius-client/packages/web/src/pages/sign-on/components/mobile/SignOnPage.tsx
+++ b/apps/audius-client/packages/web/src/pages/sign-on/components/mobile/SignOnPage.tsx
@@ -6,8 +6,7 @@ import {
   AccountImage,
   InstagramProfile,
   TwitterProfile,
-  TikTokProfile,
-  BooleanKeys
+  TikTokProfile
 } from '@audius/common'
 import cn from 'classnames'
 import { animated } from 'react-spring'
@@ -211,9 +210,6 @@ const SignOnPage = ({
       >
         <Header />
         <ProfilePage
-          displayInstagramRemoteVarKey={
-            BooleanKeys.DISPLAY_INSTAGRAM_VERIFICATION
-          }
           handle={handle}
           isVerified={verified}
           name={name}