feat: save sign in information on local storage

package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@dcl/crypto": "^3.4.5",
     "@dcl/schemas": "^9.8.0",
-    "@dcl/single-sign-on-client": "^0.1.0",
+    "@dcl/single-sign-on-client": "^2.0.0",
     "@dcl/ui-env": "^1.4.0",
     "@magic-ext/oauth": "^15.1.1",
     "ajv": "^8.12.0",

src/components/ConnectionModal/ConnectionModal.tsx

@@ -4,42 +4,30 @@ import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
 import { Modal } from 'decentraland-ui/dist/components/Modal/Modal'
 import { ModalNavigation } from 'decentraland-ui/dist/components/ModalNavigation/ModalNavigation'
 import warningSrc from '../../assets/images/warning.svg'
+import { getConnectionMessage } from './utils'
 import { ConnectionModalProps, ConnectionModalState } from './ConnectionModal.types'
 import styles from './ConnectionModal.module.css'
 
 export const ConnectionModal = (props: ConnectionModalProps) => {
   const { open, state, onClose, onTryAgain } = props
-  const isLoading = state === ConnectionModalState.CONNECTING_WALLET || state === ConnectionModalState.WAITING_FOR_SIGNATURE
+  const isLoading =
+    state === ConnectionModalState.CONNECTING_WALLET ||
+    state === ConnectionModalState.WAITING_FOR_SIGNATURE ||
+    ConnectionModalState.LOADING_MAGIC
   return (
     <Modal size="tiny" open={open}>
       <ModalNavigation title="" onClose={!isLoading ? onClose : undefined} />
       <div className={styles.main}>
-        {isLoading ? (
-          <div className={styles.content}>
-            <Loader className={styles.loader} size="huge" inline />
-            <p className={styles.message}>
-              {state === ConnectionModalState.CONNECTING_WALLET ? (
-                <>
-                  To move forward, confirm the connect action in your <b>Wallet</b>.
-                </>
-              ) : (
-                <>
-                  To move forward, confirm the signature action in your <b>Wallet</b>.
-                </>
-              )}
-            </p>
-          </div>
-        ) : (
-          <div className={styles.content}>
-            <img className={styles.errorImage} src={warningSrc} />
-            <p className={styles.message}>
-              You rejected the request in your <b>Wallet</b>. To continue, please try again.
-            </p>
+        <div className={styles.content}>
+          {state === ConnectionModalState.ERROR && <img className={styles.errorImage} src={warningSrc} />}
+          {isLoading && <Loader className={styles.loader} size="huge" inline />}
+          <p className={styles.message}>{getConnectionMessage(state)}</p>
+          {state === ConnectionModalState.ERROR && (
             <Button primary onClick={onTryAgain}>
               Try again
             </Button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
       <ModalContent></ModalContent>
     </Modal>

src/components/ConnectionModal/ConnectionModal.types.ts

@@ -1,7 +1,8 @@
 export enum ConnectionModalState {
   CONNECTING_WALLET = 'CONNECTING_WALLET',
   WAITING_FOR_SIGNATURE = 'WAITING_FOR_SIGNATURE',
-  ERROR = 'ERROR'
+  ERROR = 'ERROR',
+  LOADING_MAGIC = 'LOADING_MAGIC'
 }
 
 export type ConnectionModalProps = {

src/components/ConnectionModal/utils.ts

@@ -0,0 +1,18 @@
+import { ConnectionModalState } from './ConnectionModal.types'
+
+export function getConnectionMessage(connectionState: ConnectionModalState) {
+  switch (connectionState) {
+    case ConnectionModalState.ERROR: {
+      return 'You rejected the request in your <b>Wallet</b>. To continue, please try again.'
+    }
+    case ConnectionModalState.CONNECTING_WALLET: {
+      return 'To move forward, confirm the connect action in your <b>Wallet</b>.'
+    }
+    case ConnectionModalState.WAITING_FOR_SIGNATURE: {
+      return 'To move forward, confirm the signature action in your <b>Wallet</b>.'
+    }
+    case ConnectionModalState.LOADING_MAGIC: {
+      return 'Redirecting...'
+    }
+  }
+}

src/components/Pages/LoginPage/LoginPage.tsx

@@ -5,7 +5,7 @@ import { useAfterLoginRedirection } from '../../../hooks/redirection'
 import { Connection, ConnectionOptionType } from '../../Connection'
 import { ConnectionModal, ConnectionModalState } from '../../ConnectionModal'
 import { WalletInformationModal } from '../../WalletInformationModal'
-import { getSignature, connectToProvider } from './utils'
+import { getSignature, connectToProvider, isSocialLogin } from './utils'
 import styles from './LoginPage.module.css'
 
 export const LoginPage = () => {
@@ -22,22 +22,24 @@ export const LoginPage = () => {
   const handleOnConnect = useCallback(
     async (connectionType: ConnectionOptionType) => {
       setShowConnectionModal(true)
-      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
-        } else {
-          navigate('/user')
+      if (isSocialLogin(connectionType)) {
+        setConnectionModalState(ConnectionModalState.LOADING_MAGIC)
+        await connectToProvider(connectionType)
+      } else {
+        try {
+          setConnectionModalState(ConnectionModalState.CONNECTING_WALLET)
+          const connectionData = await connectToProvider(connectionType)
+          setConnectionModalState(ConnectionModalState.WAITING_FOR_SIGNATURE)
+          await getSignature(connectionData.account?.toLowerCase() ?? '', connectionData.provider)
+          if (redirectTo) {
+            window.location.href = redirectTo
+          } else {
+            navigate('/user')
+          }
+          setShowConnectionModal(false)
+        } catch (error) {
+          setConnectionModalState(ConnectionModalState.ERROR)
         }
-        setShowConnectionModal(false)
-      } catch (error) {
-        setConnectionModalState(ConnectionModalState.ERROR)
       }
     },
     [setConnectionModalState, setShowConnectionModal, redirectTo]

src/components/Pages/LoginPage/utils.ts

@@ -1,7 +1,7 @@
 import { ethers } from 'ethers'
 import { AuthIdentity, Authenticator } from '@dcl/crypto'
 import { ProviderType } from '@dcl/schemas/dist/dapps/provider-type'
-import { getIdentity, storeIdentity } from '@dcl/single-sign-on-client'
+import { LocalStorageUtils } from '@dcl/single-sign-on-client'
 import { connection, getConfiguration, ConnectionResponse, Provider } from 'decentraland-connect'
 import { ConnectionOptionType } from '../../Connection'
 
@@ -77,14 +77,19 @@ export async function connectToProvider(connectionOption: ConnectionOptionType):
   return connectionData
 }
 
+export function isSocialLogin(connectionType: ConnectionOptionType): boolean {
+  const SOCIAL_LOGIN_TYPES = [ConnectionOptionType.APPLE, ConnectionOptionType.GOOGLE, ConnectionOptionType.X, ConnectionOptionType.DISCORD]
+  return SOCIAL_LOGIN_TYPES.includes(connectionType)
+}
+
 export async function getSignature(address: string, provider: Provider): Promise<AuthIdentity> {
   let identity: AuthIdentity
 
-  const ssoIdentity: AuthIdentity | null = (await getIdentity(address)) && null
+  const ssoIdentity = LocalStorageUtils.getIdentity(address)
 
   if (!ssoIdentity) {
     identity = await generateIdentity(address, provider)
-    await storeIdentity(address, identity)
+    LocalStorageUtils.setIdentity(address, identity)
   } else {
     identity = ssoIdentity
   }