No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Sign In with Blockstack Button (React Component)

Image of Sign in with Blockstack react component


npm install blockstack-signin-btn --save


There are two components in this library: SignInBlockstackButton and SignInBlockstackLiteButton. SignInBlockstackButton has the blockstack sign in and sign out functions written. These functions are passed into SignInBlockstackLiteButton as props. SignInBlockstackButton uses SignInBlockstackLiteButton. Reference the code for more.


At the top of the file, include:

import { SignInBlockstackButton, SignInBlockstackLiteButton } from 'blockstack-signin-btn';


This is the bare minimum. You should reference the blockstack.js library to check if the user is logged in with blockstack.isUserSignedIn() and pass that to isSignedIn.

<SignInBlockstackButton />

Customize Button Text

You can change the button text from the default of Sign In with Blockstack and Sign Out. You pass in your wanted text as props:

  signInBtnText="New Sign In Text"
  signOutBtnText="New Sign Out Text"

Hide the Blockstack Logo in Button

We include the Blockstack logo on the left side of the button. You can hide this, just pass in the prop includeBlockstackLogo as false.


Custom Redirect on Sign Out

This is just for SignInBlockstackButton and not the lite. Since the sign out function is already written, by default it redirects after sign out to /. This can be changed with signOutRedirect.


Render Nothing

This was included in case the developer want to not render a sign in or sign out button. The user may be pending sign in, etc.


// or


Custom Styling

All styling has been done inline to control the areas to manipulate and name issues. All aspects of the button can be customized in terms of styling. The text can be styled with textStyle prop. The image/logo can be styled with imageStyle prop. The sign out button can be styled with signOutStyle prop. The sign in button can be styled with signInStyle prop. Both buttons can be styled with style prop. You can remove default styling with defaultStyle prop.

    fontSize: 24,
    height: 100,
    backgroundColor: 'red',
    backgroundColor: 'green',

// or for both buttons at once and remove default

    color: '#2e2e2e',
    backgroundColor: '#fff',


To test this component, we will use a link to a pre built demo project. In a terminal window:

git clone
cd component-lib-playground/
npm install

In another terminal:

git clone
cd Sign-in-with-Blockstack-react
npm install
npm link

Returning to the first terminal window, you should then run:

npm link blockstack-signin-btn
npm run dev

An app will be running on http://localhost:8080 and you will be able to add blockstack-signin-btn to it. If you open src/components/App.js and add import { SignInBlockstackButton } from 'blockstack-signin-btn'; to the top. Then add code below to the render. It will add the button. This request will however fail because you need the manifest.json and other Blockstack parts.

<SignInBlockstackButton />