Switch to persona

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

@@ -305,4 +305,14 @@ export class IdentityService {
       headers
     })
   }
+
+  async createPersonaSessionToken() {
+    const headers = await this.getAuthHeaders()
+
+    return await this._makeRequest<{ sessionToken: string }>({
+      url: '/create_session_token',
+      method: 'get',
+      headers
+    })
+  }
 }

packages/identity-service/package.json

@@ -84,6 +84,7 @@
     "numeral": "2.0.6",
     "patch-package": "6.5.1",
     "pg": "8.0.3",
+    "persona": "5.5.0",
     "plaid": "30.1.0",
     "rate-limit-redis": "1.6.0",
     "react": "16.11.0",

packages/identity-service/src/config.js

@@ -617,6 +617,24 @@ const config = convict({
     env: 'plaidTemplateId',
     default: ''
   },
+  personaApiKey: {
+    doc: 'Persona API key',
+    format: String,
+    env: 'personaApiKey',
+    default: ''
+  },
+  personaTemplateId: {
+    doc: 'Persona template ID',
+    format: String,
+    env: 'personaTemplateId',
+    default: ''
+  },
+  personaEnvironmentId: {
+    doc: 'Persona environment ID',
+    format: String,
+    env: 'personaEnvironmentId',
+    default: ''
+  },
   solanaEndpoint: {
     doc: 'The Solana RPC endpoint to make requests against',
     format: String,

packages/identity-service/src/routes/persona.js

@@ -0,0 +1,31 @@
+const config = require('../config')
+const {
+  handleResponse,
+  successResponse,
+  errorResponseServerError
+} = require('../apiHelpers')
+const authMiddleware = require('../authMiddleware')
+const { logger } = require('../logging')
+
+module.exports = function (app) {
+  app.get(
+    '/create_session_token',
+    authMiddleware,
+    handleResponse(async (req, res) => {
+      const { handle } = req.user
+      try {
+        const sessionToken = {
+          templateId: config.get('personaTemplateId'),
+          referenceId: handle,
+          environmentId: config.get('personaEnvironmentId')
+        }
+        return successResponse({ sessionToken: JSON.stringify(sessionToken) })
+      } catch (error) {
+        logger.error('Error creating Persona session token:', error)
+        return errorResponseServerError({
+          message: 'Could not create Persona session token'
+        })
+      }
+    })
+  )
+}

packages/web/package.json

@@ -141,6 +141,7 @@
     "numeral": "2.0.6",
     "orbit-controls": "0.0.1",
     "perspective-camera": "2.0.1",
+    "persona": "5.5.0",
     "prop-types": "15.7.2",
     "query-string": "6.13.5",
     "react": "19.0.0",
@@ -153,7 +154,6 @@
     "react-infinite-scroller": "1.2.6",
     "react-intersection-observer": "9.16.0",
     "react-merge-refs": "2.0.1",
-    "react-plaid-link": "3.6.1",
     "react-qr-code": "2.0.18",
     "react-redux": "8.0.5",
     "react-router": "^7.11.0",

packages/web/src/pages/check-page/CheckPage.tsx

@@ -4,7 +4,7 @@ import { useAccountStatus, useCurrentAccountUser } from '@audius/common/api'
 import { Status } from '@audius/common/models'
 import { AuthHeaders } from '@audius/common/services'
 import { route } from '@audius/common/utils'
-import { usePlaidLink, PlaidLinkError } from 'react-plaid-link'
+import Persona, { Client } from 'persona'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router'
 
@@ -44,15 +44,16 @@ const CheckPage = () => {
     }
   }, [accountHandle, accountStatus, dispatch])
 
-  const [linkToken, setLinkToken] = useState<string | null>(null)
+  const [sessionToken, setSessionToken] = useState<string | null>(null)
+  const personaClientRef = useRef<Client | null>(null)
   const wasSuccessful = useRef(false)
 
   useEffect(() => {
-    async function fetchLinkToken() {
-      const { linkToken } = await identityService.createPlaidLinkToken()
-      setLinkToken(linkToken)
+    async function fetchSessionToken() {
+      const { sessionToken } = await identityService.createPersonaSessionToken()
+      setSessionToken(sessionToken)
     }
-    fetchLinkToken()
+    fetchSessionToken()
   }, [])
 
   const isInWebView = useRef(
@@ -65,7 +66,7 @@ const CheckPage = () => {
     }
   }, [])
 
-  const onSuccess = useCallback(() => {
+  const onComplete = useCallback(() => {
     wasSuccessful.current = true
     if (isInWebView.current) {
       // In WebView, send message instead of navigating
@@ -80,52 +81,81 @@ const CheckPage = () => {
     }
   }, [navigate, sendMessageToWebView])
 
-  const onExit = useCallback(
-    (err: PlaidLinkError | null) => {
-      if (isInWebView.current) {
-        // In WebView, send message instead of navigating
-        if (err) {
-          sendMessageToWebView('error')
-        } else if (wasSuccessful.current) {
-          sendMessageToWebView('success')
-        } else {
-          // User exited without completing - just close
-          if (window.ReactNativeWebView) {
-            window.ReactNativeWebView.postMessage(
-              JSON.stringify({ type: 'close' })
-            )
-          }
-        }
+  const onCancel = useCallback(() => {
+    if (isInWebView.current) {
+      // In WebView, send message instead of navigating
+      if (wasSuccessful.current) {
+        sendMessageToWebView('success')
       } else {
-        // In web, navigate normally
-        if (err) {
-          navigate(`${SETTINGS_PAGE}?verification=error`)
-        } else if (wasSuccessful.current) {
-          navigate(`${SETTINGS_PAGE}?verification=success`)
-        } else {
-          navigate(SETTINGS_PAGE)
+        // User cancelled without completing - just close
+        if (window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage(
+            JSON.stringify({ type: 'close' })
+          )
         }
       }
-    },
-    [navigate, sendMessageToWebView]
-  )
+    } else {
+      // In web, navigate normally
+      if (wasSuccessful.current) {
+        navigate(`${SETTINGS_PAGE}?verification=success`)
+      } else {
+        navigate(SETTINGS_PAGE)
+      }
+    }
+  }, [navigate, sendMessageToWebView])
 
-  const { open, ready } = usePlaidLink({
-    token: linkToken,
-    onSuccess,
-    onExit
-  })
+  const onError = useCallback(() => {
+    if (isInWebView.current) {
+      // In WebView, send message instead of navigating
+      sendMessageToWebView('error')
+    } else {
+      // In web, navigate normally
+      navigate(`${SETTINGS_PAGE}?verification=error`)
+    }
+  }, [navigate, sendMessageToWebView])
 
   useEffect(() => {
-    if (ready) {
-      const originalWidth = document.body.style.width
-      document.body.style.setProperty('width', '100%', 'important')
-      open()
-      return () => {
-        document.body.style.width = originalWidth
+    if (sessionToken && accountHandle) {
+      try {
+        const config = JSON.parse(sessionToken)
+        const { templateId, referenceId, environmentId } = config
+
+        const originalWidth = document.body.style.width
+        document.body.style.setProperty('width', '100%', 'important')
+
+        const client = new Persona.Client({
+          templateId,
+          referenceId: referenceId ?? accountHandle,
+          environmentId,
+          onReady: () => {
+            client.open()
+          },
+          onComplete: () => {
+            onComplete()
+          },
+          onCancel: () => {
+            onCancel()
+          },
+          onError: (error) => {
+            console.error('Persona error:', error)
+            onError()
+          }
+        })
+
+        personaClientRef.current = client
+
+        return () => {
+          document.body.style.width = originalWidth
+          if (personaClientRef.current) {
+            personaClientRef.current = null
+          }
+        }
+      } catch (error) {
+        console.error('Error parsing Persona session token:', error)
+        onError()
       }
     }
-  }, [ready, open])
+  }, [sessionToken, accountHandle, onComplete, onCancel, onError])
 
   return <Page title='Verification' description='Audius account verification' />
 }