refactor: add new react hooks to improve devex

[avasisht23]

No description provided.

[mwawrusch]

Hi @avasisht23 @moldy530 , I partially implemented this but ran into a few issues:

It seems that

  useAddPasskey,
  use,
   useSignMessage,
  useExportAccount,
  useLogout,

are not exported from the current alchemy build 3.8.1 - is this correct?

Secondly, I need to sign a siwe message after successful login to obtain a backend session. What is the correct way to do this?

Thanks

[avasisht23]

hey @mwawrusch that's right! I was testing on this branch the changes I'm making here in aa-sdk.

1. feat: add useAddPasskey hook aa-sdk#565
2. feat: add useLogout hook aa-sdk#566
   ... and so on in the pull requests I have open there

I'll be planning to add these hooks very shortly (in 1-2 days) 🤞 and we can ideally launch in 3.8.2

[mwawrusch]

Thanks. Great work btw, really appreciate the simplicity.

[avasisht23]

@mwawrusch no worries! will ping you when they are live.

Secondly, I need to sign a siwe message after successful login to obtain a backend session. What is the correct way to do this?

As for this, I believe once you get the signer back after authenticating, you can connect it to a smart account client to sign a SIWE message using the useSignMessage hook? If you want to use the signer as an EOA signer, I think you can just use signMessage on the authenticated signer itself to sign the SIWE message. lemme know if that works.

[mwawrusch]

@mwawrusch no worries! will ping you when they are live.

Secondly, I need to sign a siwe message after successful login to obtain a backend session. What is the correct way to do this?

As for this, I believe once you get the signer back after authenticating, you can connect it to a smart account client to sign a SIWE message using the useSignMessage hook? If you want to use the signer as an EOA signer, I think you can just use signMessage on the authenticated signer itself to sign the SIWE message. lemme know if that works.

Thanks. The actual signing i have handled, it's more about what's the best way to get notified that a connection happened, like an onConnect callback in the AlchemyAccountProvider, or listening to the state change via useSignerStatus.

[mwawrusch]

Here is my current implementation. It does trigger the sign in twice on development at least (which might be the react dev model double invokation thing).
Feels like there is some potential for errors in there.

'use client'

import { AlchemySignerStatus } from "@alchemy/aa-alchemy";
import { useAccount, useSigner, useSignerStatus } from "@alchemy/aa-alchemy/react";
import { useSession } from "next-auth/react";
import { PropsWithChildren, useEffect } from "react";
import { handleBackendLogin } from "./handleBackendLogin";
import { useRouter } from "next/navigation"


export interface RojiSessionHandlerProps {
  isProduction: boolean;
}


export const RojiSessionHandler = ({children, isProduction}: PropsWithChildren<RojiSessionHandlerProps>) => {
  const signerStatus = useSignerStatus();
  const signer = useSigner()
  const { account } = useAccount({type: "MultiOwnerModularAccount",});
  const session = useSession();
  const router = useRouter();


  // Handles the scenario where the user is authenticated but the session is not.
  useEffect( () => {
    const fn = async () => {
      if(signerStatus?.status !== AlchemySignerStatus.CONNECTED) {
        return;
      }
      if(!signer) {
        return;
      }
      if(!account) {
        return;
      }

      const data = session?.data as any || {};
      const sessionStatus = session?.status;

      if(sessionStatus !== 'unauthenticated') {
        // NOTE - we need to also check that the correct user is authenticated.
        return;
      }
    
      console.log('Session status', sessionStatus);
      console.log('Session data', data);

      const authDetails = await signer.getAuthDetails();

      const optionalEmail = authDetails?.email

      const chainId = isProduction ? 8453 : 11155111;
      await handleBackendLogin({signer: signer, 
                                userAddress: await signer.getAddress(), 
                                accountAddress: account.address , 
                                chainId, 
                                email: optionalEmail})

      router.refresh();
      router.push('/pro');
      }
    
    fn();

  }, [signerStatus.status, session, account, signer, isProduction]);


  return (<>{children}</>);
}