overview.md

Using the library

This reference describes the Blockstack Javascript Software Developer Kit (SDK) reference. For complete Blockstack documentation, see docs.blockstack.org. There is also reference material available for both the iOS SDK and Android SDK.

Install the Library

$ npm install blockstack

Quickstart: Build an application

1. Install blockstack.js with npm.

   npm install blockstack --save

2. Import Blockstack into your project.

   import * as blockstack from 'blockstack'

3. Wire up a sign in button.

   document.getElementById('signin-button').addEventListener('click', function() {
     blockstack.redirectToSignIn()
   })

4. Wire up a sign out button.

   document.getElementById('signout-button').addEventListener('click', function() {
     blockstack.signUserOut(window.location.origin)
   })

5. Include the logic to load user data and to handle the authentication response.

   function showProfile(profile) {
     var person = new blockstack.Person(profile)
     document.getElementById('heading-name').innerHTML = person.name()
     document.getElementById('avatar-image').setAttribute('src', person.avatarUrl())
     document.getElementById('section-1').style.display = 'none'
     document.getElementById('section-2').style.display = 'block'
   }
   
   if (blockstack.isUserSignedIn()) {
    const userData = blockstack.loadUserData()
     showProfile(userData.profile)
   } else if (blockstack.isSignInPending()) {
     blockstack.handlePendingSignIn()
     .then(userData => {
       showProfile(userData.profile)
     })
   }

6. Create a manifest.json file

   {
     "name": "Hello, Blockstack",
     "start_url": "localhost:5000",
     "description": "A simple demo of Blockstack Auth",
     "icons": [{
       "src": "https://helloblockstack.com/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     }]
   }

   Make sure your manifest.json file has appropriate CORS headers so that it can be fetched via an http GET from any origin.

7. Serve your application

Add the library without a package manager

You can import blockstack.js as a script without using a package manager. To securely use the latest distribution of blockstack.js from a CDN, add the following script declaration in your application.

[[include:script-dist-file.md]]