<p>Make sure you have <ahref="ids-introduction#create-an-initial-blockstack-id">created at least one Blockstack ID</a>. You’ll use this ID to Finteract with the Todo application.</p>
<p>The applicaton code relies on both the <codeclass="highlighter-rouge">npm</code> and the <codeclass="highlighter-rouge">yarn</code> package managers.
Before you begin, verify you have these tools <codeclass="highlighter-rouge">npm</code> using the <codeclass="highlighter-rouge">which</code> command to
Blockstack tutorial</a>. If you haven’t worked through that
tutorial, you may want to do that before continuing.</p>
<h2id="install-the-applicaton-code-and-retrieve-the-dependencies">Install the applicaton code and retrieve the dependencies</h2>
<p>You can clone the source code with <codeclass="highlighter-rouge">git</code> or <ahref="https://github.com/blockstack/blockstack-todos/archive/master.zip">download and unzip the code from
<h2id="understand-the-important-application-files">Understand the important application files</h2>
<p>The Todo application has a basic Vue.js structure. There are several configuration files but the central programming files are in the <codeclass="highlighter-rouge">src</code> directory:</p>
<td>Application data storage and user sign out.</td>
</tr>
</tbody>
</table>
<p>The example application runs in a node server on your local host. In the next section, you start the application and interact with it.</p>
<ol>
<li>
<p>Start the application.</p>
<divclass="highlighter-rouge"><preclass="highlight"><code> $ npm run start
</code></pre>
</div>
<p>You should see a simple application:</p>
<p><imgsrc="images/todo-sign-in.png"alt=""/></p>
</li>
<li>
<p>Choose <strong>Sign In with Blockstack</strong>.</p>
</li>
</ol>
<h2id="understand-the-sign-in-process">Understand the sign in process</h2>
<p>At startup, the Todo application detects whether the user has the Blockstack client edition
installed or not. This is done automatically by the Blockstack API, more
about this later. What the authenticator displays depends on which whether the user has installed the Blockstack Authenticator client edition or not.</p>
<li>The <codeclass="highlighter-rouge">iss</code> property is a decentralized identifier or <codeclass="highlighter-rouge">did</code>. This identifies you and your name to the application. The specific <codeclass="highlighter-rouge">did</code> is a <codeclass="highlighter-rouge">btc-addr</code>.</li>
<li>The Blockstack JWT implementation is different from other implementations because of the underlying cryptography we employ. There are libraries in <ahref="https://github.com/blockstack/jsontokens-js">Javascript</a> and <ahref="https://github.com/blockstack/ruby-jwt-blockstack">Ruby</a> available on the Blockstack Github to allow you to work with these tokens.</li>
</ol>
</blockquote>
<p>When the blockstack-core receives the <codeclass="highlighter-rouge">authRequest</code>, it generates a session token and
returns an authentication response to the application. This response is similar
to the <codeclass="highlighter-rouge">authRequest</code> above in that the <codeclass="highlighter-rouge">authResponse</code> includes a private key
intended only for the application. This allows the application to encrypt data
on your personal Blockstack storage.</p>
<p>You are now logged into the Todo application!</p>
<h2id="undder-the-covers-in-the-sign-in-code">Undder the covers in the sign in code</h2>
<p>Now, go to the underlying <codeclass="highlighter-rouge">blockstack-todo</code> code you cloned or downloaded. Sign
in and sign out is handled in each of these files:</p>
<p>The <codeclass="highlighter-rouge">src/components/Landing.vue</code> code calls a <ahref="https://blockstack.github.io/blockstack.js#redirectToSignIn"><codeclass="highlighter-rouge">redirectToSignIn()</code></a> function which generates the <codeclass="highlighter-rouge">authRequest</code> and redirects the user to the Blockstack authenticator:</p>
<p>Once the user authenticates, the application handles the <codeclass="highlighter-rouge">authResponse</code> in the <codeclass="highlighter-rouge">src/App.vue</code> file. :</p>
<p>If <ahref="https://blockstack.github.io/blockstack.js/#isusersignedin"><codeclass="highlighter-rouge">blockstack.isUserSignedIn()</code></a> is true, the user was previously signed in so Blockstack pulls the data from the browser and uses it in our application. If the check on <ahref="https://blockstack.github.io/blockstack.js/#issigninpending"><codeclass="highlighter-rouge">blockstack.isSignInPending()</code></a> is true, a previous <codeclass="highlighter-rouge">authResponse</code> was sent to the application but hasn’t been processed yet. The <codeclass="highlighter-rouge">handlePendingSignIn()</code> function processes any pending sign in.</p>
<p>Signout is handled in <codeclass="highlighter-rouge">src/components/Dashboard.vue</code>.</p>
</span><spanclass="nt">"text"</span><spanclass="p">:</span><spanclass="s2">"Software package manager secured by the blockchain"</span><spanclass="p">,</span><spanclass="w">
</span><spanclass="nt">"text"</span><spanclass="p">:</span><spanclass="s2">"Mutable torrents with human readable names"</span><spanclass="p">,</span><spanclass="w">
</span><spanclass="nt">"text"</span><spanclass="p">:</span><spanclass="s2">"Software package manager secured by the blockchain"</span><spanclass="p">,</span><spanclass="w">
<p>Tje <codeclass="highlighter-rouge">todos</code> JSON object is passed in and the <ahref="https://blockstack.github.io/blockstack.js/#putfile"><codeclass="highlighter-rouge">blockstack.putFile()</code></a> method to store it in our Gaia Hub.</p>
<p>The code needs to read the Todo items from the storage with the <ahref="https://blockstack.github.io/blockstack.js/#getfile"><codeclass="highlighter-rouge">blockstack.getFile()</code></a> method which returns a promise:</p>
<spanclass="nx">blockstack</span><spanclass="p">.</span><spanclass="nx">getFile</span><spanclass="p">(</span><spanclass="nx">STORAGE_FILE</span><spanclass="p">)</span><spanclass="c1">// decryption is enabled by default</span>
<p>The <codeclass="highlighter-rouge">todos</code> data is retrieved from the promise.</p>
<h2id="summary">Summary</h2>
<p>You now have everything you need to construct complex applications complete with authentication and storage on the Decentralized Internet. Why not try coding <ahref="multi-player-storage.md">a sample application that accesses multiple profiles</a>.</p>
<p>If you would like to explore the Blockstack APIs, you can visit the <ahref="https://core.blockstack.org/">Blockstack Core API</a> documentation or the <ahref="https://blockstack.github.io/blockstack.js">Blockstack JS API</a>.</p>
