Add in app verification flow

packages/common/src/messages/settings.ts

@@ -25,6 +25,7 @@ export const settingsMessages = {
   changeEmailCardTitle: 'Change Email',
   changePasswordCardTitle: 'Change Password',
   accountsYouManageTitle: 'Accounts You Manage',
+  verificationCardTitle: 'Verification',
   desktopAppCardTitle: 'Download the Desktop App',
 
   appearanceDescription:
@@ -39,11 +40,14 @@ export const settingsMessages = {
   changeEmailCardDescription:
     'Change the email you use to sign in and receive emails.',
   changePasswordCardDescription: 'Change the password to your Audius account.',
+  verificationCardDescription:
+    'Verify your Audius profile by completing identity verification',
   desktopAppCardDescription:
     'For the best experience, we recommend downloading the Audius App.',
   labelAccountCardDescription:
     'Identify as a record label on your Audius profile.',
 
+  verificationCardButtonText: 'Get Verified',
   inboxSettingsButtonText: 'Inbox Settings',
   commentSettingsButtonText: 'Comment Settings',
   notificationsButtonText: 'Configure Notifications',

packages/common/src/services/auth/identity.ts

@@ -57,8 +57,20 @@ export class IdentityService {
     this.getAudiusWalletClient = audiusWalletClient
   }
 
-  // #region: Internal Functions
-  private async _getSignatureHeaders() {
+  async getAuthHeaders() {
+    // Check if auth headers are provided in localStorage (e.g., from mobile WebView)
+    // This allows mobile apps to inject auth headers for web authentication
+    if (typeof window !== 'undefined' && window.localStorage) {
+      const storedMessage = window.localStorage.getItem(AuthHeaders.Message)
+      const storedSignature = window.localStorage.getItem(AuthHeaders.Signature)
+      if (storedMessage && storedSignature) {
+        return {
+          [AuthHeaders.Message]: storedMessage,
+          [AuthHeaders.Signature]: storedSignature
+        }
+      }
+    }
+
     const audiusWalletClient = await this.getAudiusWalletClient()
     const [currentAddress] = await audiusWalletClient.getAddresses()
     if (!currentAddress) {
@@ -112,12 +124,10 @@ export class IdentityService {
     }
   }
 
-  // #region: Public Functions
-
   async sendRecoveryInfo(args: RecoveryInfoParams) {
     // This endpoint takes data/signature as body params
     const { [AuthHeaders.Message]: data, [AuthHeaders.Signature]: signature } =
-      await this._getSignatureHeaders()
+      await this.getAuthHeaders()
     return await this._makeRequest<{ status: true }>({
       url: '/recovery',
       method: 'post',
@@ -208,7 +218,7 @@ export class IdentityService {
    * Get the user's email used for notifications and display.
    */
   async getUserEmail() {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     const res = await this._makeRequest<{ email: string | undefined | null }>({
       url: '/user/email',
@@ -226,7 +236,7 @@ export class IdentityService {
    * Change the user's email used for notifications and display.
    */
   async changeEmail({ email, otp }: { email: string; otp?: string }) {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     return await this._makeRequest({
       url: '/user/email',
@@ -239,7 +249,7 @@ export class IdentityService {
   async createStripeSession(
     data: CreateStripeSessionRequest
   ): Promise<CreateStripeSessionResponse> {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     return await this._makeRequest({
       url: '/stripe/session',
@@ -250,7 +260,7 @@ export class IdentityService {
   }
 
   async recordIP() {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     return await this._makeRequest({
       url: '/record_ip',
@@ -260,7 +270,7 @@ export class IdentityService {
   }
 
   async getUserBankTransactionMetadata(transactionId: string) {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     const metadatas = await this._makeRequest<
       Array<{ metadata: InAppAudioPurchaseMetadata }>
@@ -276,7 +286,7 @@ export class IdentityService {
     transactionSignature: string
     metadata: InAppAudioPurchaseMetadata
   }) {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     return await this._makeRequest({
       url: '/transaction_metadata',
@@ -287,7 +297,7 @@ export class IdentityService {
   }
 
   async createPlaidLinkToken() {
-    const headers = await this._getSignatureHeaders()
+    const headers = await this.getAuthHeaders()
 
     return await this._makeRequest<{ linkToken: string }>({
       url: '/create_link_token',

packages/common/src/store/ui/modals/parentSlice.ts

@@ -81,7 +81,9 @@ export const initialState: BasicModalsState = {
   ReceiveTokensModal: { isOpen: false },
   SendTokensModal: { isOpen: false },
   CoinSuccessModal: { isOpen: false },
-  ArtistCoinDetailsModal: { isOpen: false }
+  ArtistCoinDetailsModal: { isOpen: false },
+  VerificationSuccess: { isOpen: false },
+  VerificationError: { isOpen: false }
 }
 
 const slice = createSlice({

packages/common/src/store/ui/modals/types.ts

@@ -116,6 +116,8 @@ export type Modals =
   | 'ArtistCoinDetailsModal'
   | 'FinalizeWinnersConfirmation'
   | 'CoinSuccessModal'
+  | 'VerificationSuccess'
+  | 'VerificationError'
 
 export type BasicModalsState = {
   [modal in Modals]: BaseModalState

packages/mobile/src/app/Drawers.tsx

@@ -45,6 +45,8 @@ import { StripeOnrampDrawer } from 'app/components/stripe-onramp-drawer'
 import { SupportersInfoDrawer } from 'app/components/supporters-info-drawer'
 import { TransferAudioMobileDrawer } from 'app/components/transfer-audio-mobile-drawer'
 import { TrendingRewardsDrawer } from 'app/components/trending-rewards-drawer'
+import { VerificationErrorDrawer } from 'app/components/verification-error-drawer/VerificationErrorDrawer'
+import { VerificationSuccessDrawer } from 'app/components/verification-success-drawer/VerificationSuccessDrawer'
 import { WaitForDownloadDrawer } from 'app/components/wait-for-download-drawer'
 import { WithdrawUSDCDrawer } from 'app/components/withdraw-usdc-drawer/WithdrawUSDCDrawer'
 import { CoinInsightsOverflowMenu } from 'app/screens/coin-details-screen/components/CoinInsightsOverflowMenu'
@@ -142,7 +144,9 @@ const commonDrawersMap: { [Modal in Modals]?: ComponentType } = {
   WithdrawUSDCModal: WithdrawUSDCDrawer,
   ReceiveTokensModal: ReceiveTokensDrawer,
   SendTokensModal: SendTokensDrawer,
-  ArtistCoinDetailsModal: ArtistCoinDetailsDrawer
+  ArtistCoinDetailsModal: ArtistCoinDetailsDrawer,
+  VerificationSuccess: VerificationSuccessDrawer,
+  VerificationError: VerificationErrorDrawer
 }
 
 const nativeDrawersMap: { [DrawerName in Drawer]?: ComponentType } = {

packages/mobile/src/components/core/TextInput.tsx

@@ -34,8 +34,8 @@ import {
   IconCloseAlt,
   useTheme
 } from '@audius/harmony-native'
-import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
 import { TextInputAccessoryView } from 'app/harmony-native/components/input/TextInput/TextInputAccessoryView'
+import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
 import type { StylesProp } from 'app/styles'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'

packages/mobile/src/components/verification-error-drawer/VerificationErrorDrawer.tsx

@@ -0,0 +1,31 @@
+import { Text, Flex, Button, IconError } from '@audius/harmony-native'
+import { AppDrawer, useDrawerState } from 'app/components/drawer/AppDrawer'
+
+const MODAL_NAME = 'VerificationError'
+
+const messages = {
+  drawerTitle: 'Verification Failed',
+  message: 'We could not verify your account. Please try again another time.',
+  closeText: 'Close'
+}
+
+export const VerificationErrorDrawer = () => {
+  const { onClose } = useDrawerState(MODAL_NAME)
+
+  return (
+    <AppDrawer
+      modalName={MODAL_NAME}
+      title={messages.drawerTitle}
+      titleIcon={IconError}
+    >
+      <Flex gap='m' ph='xl' pv='l' alignItems='center'>
+        <Text variant='body' size='m' textAlign='center'>
+          {messages.message}
+        </Text>
+        <Button fullWidth onPress={onClose}>
+          {messages.closeText}
+        </Button>
+      </Flex>
+    </AppDrawer>
+  )
+}

packages/mobile/src/components/verification-success-drawer/VerificationSuccessDrawer.tsx

@@ -0,0 +1,35 @@
+import { Text, Flex, Button, IconVerified } from '@audius/harmony-native'
+import { AppDrawer, useDrawerState } from 'app/components/drawer/AppDrawer'
+
+const MODAL_NAME = 'VerificationSuccess'
+
+const messages = {
+  drawerTitle: 'Verification Submitted',
+  message:
+    'Thank you for completing identity verification. Your request will be processed soon.',
+  pending: 'Pending',
+  closeText: 'Close'
+}
+
+export const VerificationSuccessDrawer = () => {
+  const { onClose } = useDrawerState(MODAL_NAME)
+
+  return (
+    <AppDrawer modalName={MODAL_NAME}>
+      <Flex gap='m' ph='xl' pv='l' alignItems='center'>
+        <Flex alignItems='center' gap='s' mb='m'>
+          <IconVerified size='xl' />
+          <Text variant='label' size='xl'>
+            {messages.pending}
+          </Text>
+        </Flex>
+        <Text variant='body' size='m' textAlign='center'>
+          {messages.message}
+        </Text>
+        <Button fullWidth onPress={onClose}>
+          {messages.closeText}
+        </Button>
+      </Flex>
+    </AppDrawer>
+  )
+}

packages/mobile/src/screens/app-screen/AppScreen.tsx

@@ -15,6 +15,7 @@ import { ExternalWalletsModalScreen } from '../external-wallets'
 import { FeatureFlagOverrideScreen } from '../feature-flag-override-screen'
 import { TipArtistModalScreen } from '../tip-artist-screen'
 import { UploadModalScreen } from '../upload-screen'
+import { VerificationWebViewModalScreen } from '../verification-webview-screen'
 
 import { AppTabsScreen } from './AppTabsScreen'
 
@@ -72,6 +73,10 @@ export const AppScreen = () => {
           name='ChangePassword'
           component={ChangePasswordModalScreen}
         />
+        <Stack.Screen
+          name='VerificationWebView'
+          component={VerificationWebViewModalScreen}
+        />
       </Stack.Group>
     </Stack.Navigator>
   )

packages/mobile/src/screens/app-screen/AppTabScreen.tsx

@@ -110,6 +110,7 @@ export type AppTabScreenParamList = {
   AccountSettingsScreen: undefined
   ChangeEmail: undefined
   ChangePassword: undefined
+  VerificationWebView: undefined
   InboxSettingsScreen: undefined
   CommentSettingsScreen: undefined
   DownloadSettingsScreen: undefined

packages/mobile/src/screens/settings-screen/AccountSettingsScreen.tsx

@@ -18,7 +18,8 @@ import {
   IconRecoveryEmail,
   IconSignOut,
   IconSkull,
-  IconUser
+  IconUser,
+  IconVerified
 } from '@audius/harmony-native'
 import {
   ScrollView,
@@ -45,6 +46,10 @@ const messages = {
   recoveryButtonTitle: 'Resend Recovery Email',
   recoveryEmailSent: 'Recovery Email Sent!',
   recoveryEmailNotSent: 'Unable to send recovery email. Please try again!',
+  verifyTitle: 'Verification',
+  verifyDescription:
+    'Verify your Audius profile by completing identity verification.',
+  verifyButtonTitle: 'Get Verified',
   emailTitle: 'Change Email',
   emailDescription: 'Change the email you use to sign in and receive emails.',
   emailButtonTitle: 'Change Email',
@@ -109,6 +114,10 @@ export const AccountSettingsScreen = () => {
     navigation.push('ChangePassword')
   }, [navigation])
 
+  const handlePressVerification = useCallback(() => {
+    navigation.push('VerificationWebView')
+  }, [navigation])
+
   const openSignOutDrawer = useCallback(() => {
     dispatch(setVisibility({ modal: 'SignOutConfirmation', visible: true }))
   }, [dispatch])
@@ -145,6 +154,13 @@ export const AccountSettingsScreen = () => {
             buttonTitle={messages.recoveryButtonTitle}
             onPress={handlePressRecoveryEmail}
           />
+          <AccountSettingsItem
+            title={messages.verifyTitle}
+            titleIcon={IconVerified}
+            description={messages.verifyDescription}
+            buttonTitle={messages.verifyButtonTitle}
+            onPress={handlePressVerification}
+          />
           <AccountSettingsItem
             title={messages.emailTitle}
             titleIcon={IconEmailAddress}

packages/mobile/src/screens/sign-on-screen/screens/SignOnScreen.tsx

@@ -66,11 +66,11 @@ const CreateAccountLink = (props: NonLinkProps) => {
           variant='title'
           strength='weak'
           textAlign='center'
-          color='white'
+          color='inverse'
           style={{ justifyContent: 'flex-end' }}
         >
           {messages.newToAudius}{' '}
-          <TextLink variant='inverted' showUnderline onPress={onPress}>
+          <TextLink showUnderline onPress={onPress}>
             {messages.createAccount}
           </TextLink>
         </Text>