aladinnetwork-blockstack/overview.md

The Aladin Javascript library for authentication, identity, and storage.

# Using the library

This reference describes the Aladin Javascript Software Developer Kit (SDK) reference. For complete Aladin documentation, see [docs.aladin.org](https://docs.aladin.org/). There is also reference material available for both the [iOS SDK](https://aladin.github.io/aladin-ios/) and [Android SDK](https://aladin.github.io/aladin-android/).



## Install the Library

    $ npm install aladin


## Quickstart: Build an application

1.  Install `aladin.js` with `npm`.

    ```bash
    npm install aladin --save
    ```

2. Import Aladin into your project.

    ```js
    import * as aladin from 'aladin'
    ```

3. Wire up a sign in button.

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

4. Wire up a sign out button.

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

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

    ```js
    function showProfile(profile) {
      var person = new aladin.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 (aladin.isUserSignedIn()) {
     const userData = aladin.loadUserData()
      showProfile(userData.profile)
    } else if (aladin.isSignInPending()) {
      aladin.handlePendingSignIn()
      .then(userData => {
        showProfile(userData.profile)
      })
    }
    ```

6. Create a `manifest.json` file

    ```json
    {
      "name": "Hello, Aladin",
      "start_url": "localhost:5000",
      "description": "A simple demo of Aladin Auth",
      "icons": [{
        "src": "https://helloaladin.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 `aladin.js` as a script without using a package manager. To securely use the latest distribution of `aladin.js` from a CDN, add the following `script` declaration in your application. 

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