Is there an easy way to get the signOut function? #405

backseats · 2024-06-19T15:44:55Z

backseats
Jun 19, 2024

I'm building a flow where the user signs in, we log their address in the backend, and it signs them out automatically, so they don't have to remain signed in. I'm trying to use the useSIWE hook but siweContextValue isn't truthy. Seems like I need to wrap my Web3Provider in something and would love some guidance on how to do that.

Thanks!

useSIWE.ts

export const useSIWE = ({ onSignIn, onSignOut }: UseSIWEConfig = {}):
  | HookProps
  | any => {
  const siweContextValue = useContext(SIWEContext);
  if (!siweContextValue) {
    // If we throw an error here then this will break non-SIWE apps, so best to just respond with not signed in.
    //throw new Error('useSIWE hook must be inside a SIWEProvider.');
    return {
      isSignedIn: false,
      data: undefined,
      status: StatusState.ERROR,
      error: new Error('useSIWE hook must be inside a SIWEProvider.'),
      isRejected: false,
      isError: true,
      isLoading: false,
      isSuccess: false,
      isReady: false,
      reset: () => {},
      signIn: () => Promise.reject(),
      signOut: () => Promise.reject(),
    };
  }
  ...

return {
    ...
    signOut: async () => {
      if (isSignedIn) {
        await signOut();
        onSignOut?.();
      }
    },
    reset,
  };

My code

const Web3Provider = ({ children }: { children: ReactNode }) => {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <SIWEProvider>
          <ConnectKitProvider>{children}</ConnectKitProvider>
        </SIWEProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

My layout.tsx

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import Web3Provider from "@/components/Web3Provider";
import "./globals.css";
import { EditProvider } from "@/hooks/useEdit";
import { SelectedProvider } from "@/hooks/useSelected";
import { ActiveScreenProvider } from "@/hooks/useActiveScreen";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
      </head>

      <body className={poppins.className}>
        <Web3Provider>
          <SelectedProvider>
            <ActiveScreenProvider>
              <EditProvider>{children}</EditProvider>
            </ActiveScreenProvider>
          </SelectedProvider>
        </Web3Provider>
      </body>
    </html>
  );
}

My page.tsx

"use client";

import { useAccount } from "wagmi";
import { useSIWE } from "connectkit";

type NFTFetchResult = {
  results: OpenSeaResult[];
  next: { [key: string]: string | null };
};

const AssetsContent = () => {

  const { signOut } = useSIWE();
  const { address, isConnected } = useAccount();


  useEffect(() => {
    async function sign_out() {
      await signOut?.();
    }

    if (address || isConnected) {
     // TODO: POST the address to the backend
      signOut?.()
    }

  }, [address, isConnected]);
...
}

Answered by backseats

Jun 20, 2024

Ah! I missed that hook. Thanks Lochie!

View full answer

lochie · 2024-06-20T11:48:43Z

lochie
Jun 20, 2024
Maintainer

hey @backseats, im not entirely sure what the issue is here. the only thing i see in your example that could be the issue is this:

  useEffect(() => {
    async function sign_out() {
      await signOut?.();
    }

    if (address || isConnected) {
     // TODO: POST the address to the backend
-      signOut?.()
+      sign_out()
    }

  }, [address, isConnected]);

other than that, this should work as expected. what are the results you're seeing exactly?

0 replies

backseats · 2024-06-20T12:11:40Z

backseats
Jun 20, 2024
Author

I’d expect the user’s wallet to no longer be connected and to not get an address through the useAccount hook after calling signOut

…

On Jun 20, 2024 at 7:49 AM -0400, Lochie Axon ***@***.***>, wrote: hey @backseats, im not entirely sure what the issue is here. the only thing i see in your example that could be the issue is this: useEffect(() => { async function sign_out() { await signOut?.(); } if (address || isConnected) { // TODO: POST the address to the backend - signOut?.() + sign_out?.() } }, [address, isConnected]); other than that, this should work as expected. what are the results you're seeing exactly? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

1 reply

lochie Jun 20, 2024
Maintainer

signOut signs out the approved session, you'll want to disconnect the wallet on top of this as these are two different things.

backseats · 2024-06-20T12:33:59Z

backseats
Jun 20, 2024
Author

Ah! I missed that hook. Thanks Lochie!

…

On Jun 20, 2024 at 8:22 AM -0400, Lochie Axon ***@***.***>, wrote: signOut signs out the approved session, you'll want to disconnect the wallet on top of this as these are two different things. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

1 reply

lochie Jun 20, 2024
Maintainer

No problem, happy to help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there an easy way to get the signOut function? #405

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Is there an easy way to get the signOut function? #405

backseats Jun 19, 2024

Replies: 3 comments · 2 replies

lochie Jun 20, 2024 Maintainer

backseats Jun 20, 2024 Author

lochie Jun 20, 2024 Maintainer

backseats Jun 20, 2024 Author

lochie Jun 20, 2024 Maintainer

backseats
Jun 19, 2024

Replies: 3 comments 2 replies

lochie
Jun 20, 2024
Maintainer

backseats
Jun 20, 2024
Author

lochie Jun 20, 2024
Maintainer

backseats
Jun 20, 2024
Author

lochie Jun 20, 2024
Maintainer