Powered by

A design system from Family

useSIWE Hook

A convenience Hook to access SIWE state. Must be used with Sign In With Ethereum.

Simply use the useSIWE Hook to prompt sign-in and sign-out functions and read the current state of requests.

const { data, isSignedIn, signOut, signIn } = useSIWE();

Example

,
MyCustomSIWEComponent.tsx
import { useSIWE, useModal, SIWESession } from "connectkit";
import { useAccount } from "wagmi";


const CustomSIWEButton = () => {
  const { setOpen } = useModal();
  const { isConnected } = useAccount();


  const { data, isReady, isRejected, isLoading, isSignedIn, signOut, signIn } = useSIWE({
    onSignIn: (session?: SIWESession) => {
      // Do something with the data
    },
    onSignOut: () => {
      // Do something when signed out
    },
  });


  const handleSignIn = async () => {
    await signIn()?.then((session?: SIWESession) => {
      // Do something when signed in
    });
  };


  const handleSignOut = async () => {
    await signOut()?.then(() => {
      // Do something when signed out
    });
  };


  /** Wallet is connected and signed in */
  if (isSignedIn) {
    return (
      <>
        <div>Address: {data?.address}</div>
        <div>ChainId: {data?.chainId}</div>
        <button onClick={handleSignOut}>Sign Out</button>
      </>
    );
  }


  /** Wallet is connected, but not signed in */
  if (isConnected) {
    return (
      <>
        <button onClick={handleSignIn} disabled={isLoading}>
          {isRejected // User Rejected
            ? "Try Again"
            : isLoading // Waiting for signing request
            ? "Awaiting request..."
            : // Waiting for interaction
              "Sign In"}
        </button>
      </>
    );
  }


  /** A wallet needs to be connected first */
  return (
    <>
      <button onClick={() => setOpen(true)}>Connect Wallet</button>
    </>
  );
};


export default CustomSIWEButton;

That's it—you will now have complete control over SIWE used within ConnectKit.

Return Values

isSignedIn
boolean

Whether or not the wallet has signed in.

data
SIWESession

Returned data when a wallet has signed in.

data properties
address
string

Wallet address.

chainId
number

Connected Chain ID.

error
Error

Error thrown if there was an error signing the message.

isRejected
boolean

If the user has rejected the signing message.

isError
boolean

If there was an error signing the message.

isLoading
boolean

If the app is waiting for the user to sign the message.

isSuccess
boolean

If the user has successfully signed in.

isReady
boolean

If the app is ready for the user to sign in.

signIn
() => Promise<boolean>

Prompt the user to sign in.

signOut
() => Promise<boolean>

Sign out the user.

reset
() => void

Reset the hook to a fresh state.

Options

This Hook accepts the following props:

onSignIn

A callback function that will be called when the user has successfully signed in.

const { signIn } = useSIWE({
  onSignIn: (session?: SIWESession) => {
    // Do something with the data
  },
});

onSignOut

A callback function that will be called when the user has successfully signed out.

const { signOut } = useSIWE({
  onSignOut: () => {
    // Do something when signed out
  },
});

Need help?

Setup SIWE

To help streamline the process of adding SIWE to your project, we offer a small, easy-to-install package for Next.js apps. For all other frameworks see the custom backend setup.

On this page