feat: Added custom button component for the SignInButton component

[zacharytyhacz]

Motivation

The SignInButton is ready to go, but does not allow much customization.

This PR adds the ability to pass in your own button component to be the 'Sign In with Farcaster' button and still work with the other built in components and functionality.

Change Summary

Added optional prop Button?: (props: { onClick: () => void }) => JSX.Element; to the SignInButton and then will conditionally use the Button prop if given, or default fallback to the <ActionButton ...

Customizing the SignInButton button component

import { SignInButton } from "@farcaster/auth-kit";

export const SignIn = ({ nonce }: { nonce: string }) => {
  return (
    <SignInButton
      nonce={nonce}
      onSuccess={({ fid, username }) =>
        console.log(`Hello, ${username}! Your fid is ${fid}.`)
      }

      Button={({ onClick }) => (
        <button onClick={onClick}>
            My custom sign in with farcaster button.
            Only prop to ensure is onClick
        </button>
      )}
    />
  );
};

Merge Checklist

Choose all relevant options below by adding an x now or at any time before submitting for review

• PR title adheres to the conventional commits standard
• PR has a changeset
• PR has been tagged with a change label(s) (i.e. documentation, feature, bugfix, or chore)
• PR includes documentation if necessary
• All commits have been signed

Additional Context

N/A

[horsefacts]

Thanks for this, will take a look!

[zacharytyhacz]

Bump

[valentinludu]

Any news with this one? The ability to customise the button it's a must have in my opinion. It takes some time to customise a button with useSignIn hook so this PR would simplify the process.

[zacharytyhacz]

Bump