From f7cfc3c3e773b22df10f723e6597c14a73f14d08 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <lausuper@gmail.com>
Date: Thu, 30 Nov 2023 09:36:06 -0300
Subject: [PATCH 1/2] feat: Make Magic user sign the ephemeral wallet

---
 .../Pages/CallbackPage/CallbackPage.tsx       | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Pages/CallbackPage/CallbackPage.tsx b/src/components/Pages/CallbackPage/CallbackPage.tsx
index 271566a..13c1d96 100644
--- a/src/components/Pages/CallbackPage/CallbackPage.tsx
+++ b/src/components/Pages/CallbackPage/CallbackPage.tsx
@@ -1,15 +1,23 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ProviderType } from '@dcl/schemas'
 import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
 import { getConfiguration, connection } from 'decentraland-connect'
 import { useAfterLoginRedirection } from '../../../hooks/redirection'
+import { ConnectionModal, ConnectionModalState } from '../../ConnectionModal'
+import { getSignature } from '../LoginPage/utils'
 
 const MAGIC_KEY = getConfiguration().magic.apiKey
 
 export const CallbackPage = () => {
   const redirectTo = useAfterLoginRedirection()
   const navigate = useNavigate()
+  const [isLoading, setIsLoading] = useState(true)
+
+  const getUserSignature = useCallback(async () => {
+    const connectionData = await connection.connect(ProviderType.MAGIC)
+    await getSignature(connectionData.account?.toLowerCase() ?? '', connectionData.provider)
+  }, [])
 
   const logInAndRedirect = useCallback(async () => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -26,7 +34,9 @@ export const CallbackPage = () => {
     try {
       await magic?.oauth.getRedirectResult()
       // Perform the connection once logged in to store the connection data
-      await connection.connect(ProviderType.MAGIC)
+      setIsLoading(false)
+      getUserSignature()
+
       if (redirectTo) {
         window.location.href = redirectTo
       } else {
@@ -43,5 +53,14 @@ export const CallbackPage = () => {
     logInAndRedirect()
   }, [])
 
-  return <Loader active size="huge" />
+  return isLoading ? (
+    <Loader active size="huge" />
+  ) : (
+    <ConnectionModal
+      open={true}
+      state={ConnectionModalState.WAITING_FOR_SIGNATURE}
+      onTryAgain={getUserSignature}
+      onClose={() => undefined}
+    />
+  )
 }

From 0dc272e54b4bd880b25bcd4f7c5a9d36a23af1e4 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <lausuper@gmail.com>
Date: Fri, 1 Dec 2023 08:26:56 -0300
Subject: [PATCH 2/2] fix: Awaits

---
 src/components/Pages/CallbackPage/CallbackPage.tsx | 5 ++++-
 src/components/Pages/LoginPage/LoginPage.tsx       | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Pages/CallbackPage/CallbackPage.tsx b/src/components/Pages/CallbackPage/CallbackPage.tsx
index 13c1d96..e39b031 100644
--- a/src/components/Pages/CallbackPage/CallbackPage.tsx
+++ b/src/components/Pages/CallbackPage/CallbackPage.tsx
@@ -35,12 +35,15 @@ export const CallbackPage = () => {
       await magic?.oauth.getRedirectResult()
       // Perform the connection once logged in to store the connection data
       setIsLoading(false)
-      getUserSignature()
+      await getUserSignature()
+      // Store the signature using the SSO client
+      // TODO
 
       if (redirectTo) {
         window.location.href = redirectTo
       } else {
         // Navigate to user or to any other site
+        // TODO: Navigate to the landing page.
         navigate('/user')
       }
     } catch (error) {
diff --git a/src/components/Pages/LoginPage/LoginPage.tsx b/src/components/Pages/LoginPage/LoginPage.tsx
index 03c0666..746a8b2 100644
--- a/src/components/Pages/LoginPage/LoginPage.tsx
+++ b/src/components/Pages/LoginPage/LoginPage.tsx
@@ -25,8 +25,10 @@ export const LoginPage = () => {
       setConnectionModalState(ConnectionModalState.CONNECTING_WALLET)
       try {
         const connectionData = await connectToProvider(connectionType)
+        // This is not reached if Magic is used
         setConnectionModalState(ConnectionModalState.WAITING_FOR_SIGNATURE)
         await getSignature(connectionData.account?.toLowerCase() ?? '', connectionData.provider)
+        // TODO: Store the signature using the SSO client
         // Do something after logging in
         if (redirectTo) {
           window.location.href = redirectTo