Bringing back the Login Experience

apps/web/src/pages/login.tsx

@@ -1,22 +1,21 @@
 import Logo from '@components/Common/Logo'
 import MetaTags from '@components/Common/MetaTags'
+import Authenticate from '@components/Login/Authenticate'
+import Connectors from '@components/Login/Connectors'
 import { EVENTS, Tower } from '@dragverse/generic'
-import { usePrivy } from '@privy-io/react-auth'
 import Link from 'next/link'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 const Login = () => {
-  const { login, authenticated, ready } = usePrivy()
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
 
   useEffect(() => {
     Tower.track(EVENTS.PAGEVIEW, { page: EVENTS.PAGE_VIEW.LOGIN })
+    setIsAuthenticated(false)
   }, [])
 
-  const handleLogin = async () => {
-    if (!authenticated) {
-      await login()
-    }
-    // After successful login, you can redirect or perform other actions
+  const handleAuthentication = (status: boolean) => {
+    setIsAuthenticated(status)
   }
 
   return (
@@ -37,13 +36,10 @@ const Login = () => {
               The most ✨ iconic ✨ version of yourself online
             </p>
           </div>
-          {ready && (
-            <button
-              onClick={handleLogin}
-              className="w-full rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-            >
-              {authenticated ? 'Connected' : 'Login with Privy'}
-            </button>
+          {!isAuthenticated ? (
+            <Connectors onAuthenticated={handleAuthentication} />
+          ) : (
+            <Authenticate />
           )}
         </div>
       </div>

package.json

@@ -33,5 +33,8 @@
   "engines": {
     "node": ">=16.18.1 <=19.0.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@privy-io/react-auth": "^1.81.3"
+  }
 }