Add Sign in with bWalletX to your site

The standard button, the same one bit-sign uses. One tag draws it, finds the user's wallet and runs the sign-in. The subtitle tells store users it also works with bWallet. You don't need an API key or an account with us.

Click it: with no bWalletX in this browser it offers "Get bWalletX". (This page has no sign-in server, so with a wallet you'll see an error after it answers.)

Every variant

Sizes: lg (default), md, sm, icon

Themes on a dark page: gold, dark

On a light page: gold, light

Labels, store edition, states

Full width

Add it with a script tag

Point challenge-url and verify-url at the two routes from the Sign in with bWalletX guide (the @bwalletx/connect/server helpers write them for you).

<script src="https://cdn.jsdelivr.net/npm/@bwalletx/connect@0.2.0/dist/bwalletx-connect.global.js"></script>
<bwalletx-signin
  challenge-url="/auth/bwalletx/challenge"
  verify-url="/auth/bwalletx/verify"></bwalletx-signin>
<script>
  document.addEventListener('bwalletx-signed-in', (e) => {
    // e.detail: { identityKey, method, response }. Your verify route has started the session.
    location.assign('/');
  });
</script>

The same file is on unpkg: https://unpkg.com/@bwalletx/connect@0.2.0/dist/bwalletx-connect.global.js. Pin the version (@0.2.0) so the button can’t change under you.

Install from npm

npm i @bwalletx/connect

The package is @bwalletx/connect on npm, published with npm provenance from GitHub. The source is at github.com/bitcoin-corp/bwalletx-connect.

React

pnpm add @bwalletx/connect @bsv/sdk

import { BwalletxSignin } from '@bwalletx/connect/react';

export function SignIn() {
  return (
    <BwalletxSignin
      challengeUrl="/auth/bwalletx/challenge"
      verifyUrl="/auth/bwalletx/verify"
      onSignedIn={(d) => router.push('/')}
      onError={(e) => console.error(e)}
    />
  );
}

With any other bundler, import '@bwalletx/connect/element' registers the tag.

Options

Events: bwalletx-signin on every click (call preventDefault() to run your own flow, such as phone pairing), bwalletx-signed-in, bwalletx-not-found and bwalletx-error. The button is a real <button> with a label for screen readers, a visible focus ring, and no motion when the user has asked for reduced motion.

Download the files

Button, gold (SVG) Button, dark (SVG) Button, light (SVG) Mark in black circle (SVG) Mark on its own (SVG)

No JavaScript at all? The package's assets/snippet.html is the gold button in plain HTML and CSS.

Brand rules

The code is MIT licensed. The names bWalletX and bWallet and the "b" mark are trademarks and are not covered by the MIT licence: you can use them unchanged to offer sign-in. Full rules: BRAND.md and TRADEMARKS.md in the package.

Sign in with bWalletX for any app (OAuth) Coming

Today the button signs the user in to your own server: the wallet signs a one-time challenge and your server checks it. We're also building a standard OAuth / OpenID Connect provider at auth.bwalletx.com, so apps that already use "Sign in with Google" can add bWalletX the same way, with the user approving each app in their wallet. When it's live, the same button starts it:

<bwalletx-signin authorize-url="https://auth.bwalletx.com/authorize"
  client-id="your-client-id" redirect-uri="https://example.com/callback"></bwalletx-signin>

Not live yet. The button already builds the request (authorization code with PKCE), so your markup won't need to change.

Questions: support@bwalletx.com · More for developers: Developers · Sign in guide