diff --git a/unlock-app/src/components/interface/checkout/Connected.tsx b/unlock-app/src/components/interface/checkout/Connected.tsx index 3a23985f8f1..2d06ebdbd24 100644 --- a/unlock-app/src/components/interface/checkout/Connected.tsx +++ b/unlock-app/src/components/interface/checkout/Connected.tsx @@ -189,7 +189,8 @@ export function Connected({ }) const { signIn, signOut, isSignedIn } = useSIWE() const [isDisconnecting, setIsDisconnecting] = useState(false) - const autoconnect = state.context?.paywallConfig?.autoconnect + const useDelegatedProvider = + state.context?.paywallConfig?.useDelegatedProvider useEffect(() => { const autoSignIn = async () => { @@ -197,7 +198,7 @@ export function Connected({ !isSignedIn && !signing && connected && - (isUnlockAccount || autoconnect) + (isUnlockAccount || useDelegatedProvider) ) { setSigning(true) await signIn() @@ -205,7 +206,14 @@ export function Connected({ } } autoSignIn() - }, [connected, autoconnect, isUnlockAccount, signIn, signing, isSignedIn]) + }, [ + connected, + useDelegatedProvider, + isUnlockAccount, + signIn, + signing, + isSignedIn, + ]) useEffect(() => { if (!account) { @@ -213,7 +221,7 @@ export function Connected({ } else console.debug(`Connected as ${account}`) }, [account]) - if (autoconnect) { + if (useDelegatedProvider) { return
{children}
} diff --git a/unlock-app/src/components/interface/checkout/index.tsx b/unlock-app/src/components/interface/checkout/index.tsx index 74f2bdc45a2..830f25a8841 100644 --- a/unlock-app/src/components/interface/checkout/index.tsx +++ b/unlock-app/src/components/interface/checkout/index.tsx @@ -46,13 +46,19 @@ export function CheckoutPage() { paywallConfig.referrer = referrerAddress } - const injectedProvider = - communication.providerAdapter || selectProvider(config) - // Autoconnect, provider might change (we could receive the provider from the parent with a delay!) useEffect(() => { - authenticateWithProvider('DELEGATED_PROVIDER', injectedProvider) - }, [authenticateWithProvider, injectedProvider]) + if (communication.providerAdapter) { + authenticateWithProvider( + 'DELEGATED_PROVIDER', + communication.providerAdapter + ) + } + }, [authenticateWithProvider, communication.providerAdapter]) + + // TODO: do we need to pass it down? + const injectedProvider = + communication.providerAdapter || selectProvider(config) const checkoutRedirectURI = paywallConfig?.redirectUri || diff --git a/unlock-app/src/components/interface/checkout/main/Payment.tsx b/unlock-app/src/components/interface/checkout/main/Payment.tsx index 46a31a539aa..20a8ea2fc87 100644 --- a/unlock-app/src/components/interface/checkout/main/Payment.tsx +++ b/unlock-app/src/components/interface/checkout/main/Payment.tsx @@ -70,8 +70,6 @@ export function Payment({ injectedProvider, checkoutService }: Props) { currencyContractAddress: lock.currencyContractAddress, }) - console.log(state) - const { data: purchaseData, isLoading: isPurchaseDataLoading } = usePurchaseData({ lockAddress: lock.address, diff --git a/unlock-app/src/hooks/useAutoLogin.ts b/unlock-app/src/hooks/useAutoLogin.ts index 589ae22bd80..17f4f9893e4 100644 --- a/unlock-app/src/hooks/useAutoLogin.ts +++ b/unlock-app/src/hooks/useAutoLogin.ts @@ -1,18 +1,20 @@ import { useCallback, useState } from 'react' import { useAppStorage } from './useAppStorage' import { useAuthenticate, WalletProvider } from './useAuthenticate' +import { useSIWE } from '~/hooks/useSIWE' export function useAutoLogin() { const [isLoading, setLoading] = useState(false) const { getStorage } = useAppStorage() const { authenticateWithProvider } = useAuthenticate() + const { signOut } = useSIWE() const getAutoLoginData = useCallback(() => { const storedProvider: WalletProvider | null = getStorage( 'provider' ) as WalletProvider - - const canAutoLogin = storedProvider !== null + const canAutoLogin = + storedProvider !== null && storedProvider !== 'DELEGATED_PROVIDER' return [canAutoLogin, storedProvider] as const }, [getStorage]) @@ -33,10 +35,14 @@ export function useAutoLogin() { } catch (error: any) { console.error('Autologin failed.') console.error(error) + await signOut() } } + if (!canAutoLogin && storedProvider === 'DELEGATED_PROVIDER') { + await signOut() + } setLoading(false) - }, [authenticateWithProvider, getAutoLoginData]) + }, [authenticateWithProvider, getAutoLoginData, signOut]) return { tryAutoLogin, diff --git a/unlock-app/src/hooks/useSIWE.tsx b/unlock-app/src/hooks/useSIWE.tsx index a9ce3a4995e..75a14a28eb7 100644 --- a/unlock-app/src/hooks/useSIWE.tsx +++ b/unlock-app/src/hooks/useSIWE.tsx @@ -27,6 +27,14 @@ export interface SIWEContextType { isSignedIn: boolean } +const signOut = async () => { + const session = getAccessToken() + if (session) { + await storage.revoke().catch(console.error) + removeAccessToken() + } +} + const SIWEContext = createContext({ siweSign: (_nonce: string, _statement: string) => { throw new Error('No SIWE provider found') @@ -34,9 +42,7 @@ const SIWEContext = createContext({ signIn: () => { throw new Error('No SIWE provider found') }, - signOut: () => { - throw new Error('No SIWE provider found') - }, + signOut, session: undefined, isSignedIn: false, }) @@ -68,11 +74,7 @@ export const SIWEProvider = ({ children }: Props) => { const signOut = async () => { try { setStatus('loading') - const session = getAccessToken() - if (session) { - await storage.revoke().catch(console.error) - removeAccessToken() - } + await signOut() await Promise.all([queryClient.invalidateQueries(), refetchSession()]) setStatus('idle') } catch (error) {