5. Code the views

Build a page, for example home.hbs, which will contain the Sign With Wallet button and link any click on the button to the authentication route.

<!-- very basic sample home page -->
Hello Sign With Wallet World!
Could I get signed in ???
<br />

<a href="/auth/siww">
    <img src="../../assets/siww_button.png" style="width: 285px; height: 50px;"
    />
</a>

You can download the image below and insert it in your application. Note that the resolution is large (400x70px), so you may need to resize it to your need. See in the page example above, we resized to 285x50px

Official Sign with Wallet button

Then build another page for post-login, which will display the values returned by SIWW at authentication time. For example, we can code the dashboard.hbs page as per below.

<!-- very basic post-login page -->
Welcome user <b>{{param.username}}</b>!
<br />
You are logged-in!
<br />

Authenticated with 
<ul>
    <li>Connector: <b>{{param.connector}}</b></li>
    <li>Blockchain: <b>{{param.blockchain}}</b></li>
    <li>Wallet: <b>{{param.wallet_id}}</b></li>
    <li>Address: <b>{{param.wallet_address}}</b></li>
</ul>
<br />
Authorizations:
<ul>
{{#each param.authorizations}}
    <li>{{name}} - {{#if isValid}}TRUE{{else}}FALSE{{/if}}</li>
{{/each}}
</ul>

<br />

<a href="/auth/logout">
    <button 
        class="signin-btn btn social-btn btn-primary"
        style="background-color: #28c4cc;" 
        tabindex="5"
    >
        Logout
    </button>
</a>