JavaScript: Sign in a user through Web3 (Solana, Ethereum)

Signs in a user by verifying a message signed by the user's private key. Supports Ethereum (via Sign-In-With-Ethereum) & Solana (Sign-In-With-Solana) standards, both of which derive from the EIP-4361 standard With slight variation on Solana's side.

• Uses a Web3 (Ethereum, Solana) wallet to sign a user in.
• Read up on the potential for abuse before using it.

Parameters

• credentials

  (Required)

Examples

Sign in with Solana or Ethereum (Window API)

  // uses window.ethereum for the wallet
  const { data, error } = await supabase.auth.signInWithWeb3({
    chain: 'ethereum',
    statement: 'I accept the Terms of Service at https://example.com/tos'
  })

  // uses window.solana for the wallet
  const { data, error } = await supabase.auth.signInWithWeb3({
    chain: 'solana',
    statement: 'I accept the Terms of Service at https://example.com/tos'
  })

Sign in with Ethereum (Message and Signature)

  const { data, error } = await supabase.auth.signInWithWeb3({
    chain: 'ethereum',
    message: '<sign in with ethereum message>',
    signature: '<hex of the ethereum signature over the message>',
  })

Sign in with Solana (Brave)

  const { data, error } = await supabase.auth.signInWithWeb3({
    chain: 'solana',
    statement: 'I accept the Terms of Service at https://example.com/tos',
    wallet: window.braveSolana
  })

Sign in with Solana (Wallet Adapter)

  function SignInButton() {
  const wallet = useWallet()

  return (
    <>
      {wallet.connected ? (
        <button
          onClick={() => {
            supabase.auth.signInWithWeb3({
              chain: 'solana',
              statement: 'I accept the Terms of Service at https://example.com/tos',
              wallet,
            })
          }}
        >
          Sign in with Solana
        </button>
      ) : (
        <WalletMultiButton />
      )}
    </>
  )
}

function App() {
  const endpoint = clusterApiUrl('devnet')
  const wallets = useMemo(() => [], [])

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets}>
        <WalletModalProvider>
          <SignInButton />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}