blockstack-signin-btn v1.0.3
Sign In with Blockstack Button (React Component)
Installing
npm install blockstack-signin-btn --save
Use
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.
Importing
At the top of the file, include:
import { SignInBlockstackButton, SignInBlockstackLiteButton } from 'blockstack-signin-btn';
Minimum
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:
<SignInBlockstackButton
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
.
<SignInBlockstackButton
includeBlockstackLogo={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
.
<SignInBlockstackButton
signOutRedirect="/custom-signout-page"
/>
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.
<SignInBlockstackButton
renderNothing
/>
// or
<SignInBlockstackButton
renderNothing={true}
/>
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.
<SignInBlockstackButton
textStyle={{
fontSize: 24,
}}
imageStyle={{
height: 100,
}}
signOutStyle={{
backgroundColor: 'red',
}}
signInStyle={{
backgroundColor: 'green',
}}
/>
// or for both buttons at once and remove default
<SignInBlockstackButton
textStyle={{
color: '#2e2e2e',
}}
style={{
backgroundColor: '#fff',
}}
defaultStyle={{}}
/>
Testing
To test this component, we will use a link to a pre built demo project. In a terminal window:
git clone https://github.com/alanbsmith/component-lib-playground.git
cd component-lib-playground/
npm install
In another terminal:
git clone https://github.com/keithweaver/Sign-in-with-Blockstack-react.git
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 />