Quick Start

Creating the Application

The API requests and the JavaScript SDK require a client ID and for some features a client secret, to obtain those you need to create an application using the Vulos Identity dashboard.

You can do that by clicking on the "New Application" link in the left navigation bar and by filling in some details.

In the "Redirect URLs" field you need to specify the link of the callback URL that we will define later on, for now set it to http://localhost:8080/callback or http://localhost:8080/index.html if you want to implement the browser application flow.

And you need to add the openid scope, for more detailed information about the scopes, take a look at the Scopes and Claims.

Install the library

If you are familiar with the OpenID Connect protocol, you can also use any other OpenID library in any language that you want.

The issuer URL is: https://identity.vulos.io

The best way to interact with our API is to use one of our official libraries:

npm install @vulos/identity-node-sdk --save

The Backend Auth Package

Add the following script tag to the HTML where you'll integrate Vulos Identity:

index.html

<script src="https://cdn.vulos.io/latest/identity.min.js"></script>

The Frontend Auth Package is exposed as VulosIdentity.Auth and The Base Package is exposed as VulosIdentity.Base in the global scope.

Setting up the OpenID flow

You need to create an application object that matches the application you just created in the dashboard.

index.js

import { Application, User } from "@vulos/identity-base" 
const application = new Application({
    id: "<paste your_client id here>",
    
    // if you made a browser application remove this property
    secret: "<paste your client secret here>",
    
    scope: "openid",
    redirectUrls: ["<your website's callback URL>"]
})

index.js

const { Application, User } = VulosIdentity.Base
const application = new Application({
    id: "<paste your_client id here>",
    
    // if you made a browser application remove this property
    secret: "<paste your client secret here>",
    
    scope: "openid",
    redirectUrls: ["<your website's callback URL>"]
})

index.js

import { BackendAuth } from "@vulos/identity-node-sdk"

const auth = application.createAuth(BackendAuth)
await auth.connect()

Then you need to create a route for the callback URL (in this example we are going to assume that you use express) and a route that redirects the user to the login / consent screen:

index.js

import express from "express"
const app = express()

// it is recommended that you generate a verifier per auth
// request and that you store this in a database or cache
// instead of storing it in a global variable
const verifier = auth.createVerifier()

app.get("/callback", async (req, res) => {
    const user = await auth.processCallback(verifier, req.)
    // you probably want to store this in a database instead
    return res.redirect("/action?tokens=" + JSON.stringify(user.save()))
})

app.get("/login", async (req, res) => {
    // you can also render this is a button instead of a redirect
    return res.redirect(await auth.createAuthUrl(verifier))
})

// this is an example endpoint that uses the api
// it will return a JSON response with the id of the user
app.get("/action", async (req, res) => {
    const user = new User(auth, JSON.parse(req.query['tokens']))
    const userInfo = await user.info()
    return res.json(userInfo.id())
})

index.js

import { FrontendAuth } from "@vulos/identity-browser-sdk"

const auth = application.createAuth(FrontendAuth)

Then you can create some code that uses local storage for state that authenticates the user and processes the callback parameters:

index.js

// a function that creates and stores the verifier in local storage
function createAndStoreVerifier() {
    const verifier = auth.createVerifier()
    localStorage.setItem('verifier', JSON.stringify(verifier))
    return verifier
}

// a function that loads and removes the verifier from local storage
function loadAndRemoveVerifier() {
    const json = localStorage.getItem('verifier')
    localStorage.removeItem('verifier')
    return JSON.parse(json) 
        // this part is here to obtain the
        // silent token refresh verifier
        || auth.createVerifier()
} 

// save the user to local storage
function saveUser(user) {
    localStorage.setItem('tokens', JSON.stringify(user.save()))
}

// a function that creates a user object from the saved tokens
function getUser() {
    const tokens = localStorage.getItem('tokens')
    return tokens && new User(auth, JSON.parse(tokens))
}

(async() => {
    await auth.connect()
    let user
    
    if (window.location.hash) {
        // there are parameters in the hash,
        // it's probably a callback request
        try {
            user = await auth.processCallback(
                loadAndRemoveVerifier(),
                 window.location.hash)
            saveUser(user)
        } catch {
            // we don't need to proceed, it's probably
            // a silent token refresh request if this fails
            return
        }
    }
    
    
    user = getUser()

     // the user isn't authenticated
    if (!user) {
        // redirect the user to the login / consent screen
        // you can also render this as a button
        document.location = await auth.createAuthUrl(createAndStoreVerifier())
    }
    
    // find an element with an id of: 'user-id'
    const userIdEl = document.getElementById('user-id')

    // get the id and set the 'user-id' element's text to the id
    const userInfo = await user.info()
    userIdEl.innerText = userInfo.id().toString()
})()

The index.html file for this example should contain the code:

index.html

<p>The user id is: <strong id="user-id"></strong></p>
<script src="index.js"></script>

index.js

const { FrontendAuth } = VulosIdentity.Auth

const auth = application.createAuth(FrontendAuth)

Then you can create some code that uses local storage for state that authenticates the user and processes the callback parameters:

index.js

// a function that creates and stores the verifier in local storage
function createAndStoreVerifier() {
    const verifier = auth.createVerifier()
    localStorage.setItem('verifier', JSON.stringify(verifier))
    return verifier
}

// a function that loads and removes the verifier from local storage
function loadAndRemoveVerifier() {
    const json = localStorage.getItem('verifier')
    localStorage.removeItem('verifier')
    return JSON.parse(json) 
        // this part is here to obtain the
        // silent token refresh verifier
        || auth.createVerifier()
} 

// save the user to local storage
function saveUser(user) {
    localStorage.setItem('tokens', JSON.stringify(user.save()))
}

// a function that creates a user object from the saved tokens
function getUser() {
    const tokens = localStorage.getItem('tokens')
    return tokens && new User(auth, JSON.parse(tokens))
}

(async() => {
    await auth.connect()
    let user
    
    if (window.location.hash) {
        // there are parameters in the hash,
        // it's probably a callback request
        try {
            user = await auth.processCallback(
                loadAndRemoveVerifier(),
                 window.location.hash)
            saveUser(user)
        } catch {
            // we don't need to proceed, it's probably
            // a silent token refresh request if this fails
            return
        }
    }
    
    
    user = getUser()

     // the user isn't authenticated
    if (!user) {
        // redirect the user to the login / consent screen
        // you can also render this as a button
        document.location = await auth.createAuthUrl(createAndStoreVerifier())
    }
    
    // find an element with an id of: 'user-id'
    const userIdEl = document.getElementById('user-id')

    // get the id and set the 'user-id' element's text to the id
    const userInfo = await user.info()
    userIdEl.innerText = userInfo.id().toString()
})()

Then you can add the following code to index.html:

index.html

<p>The user id is: <strong id="user-id"></strong></p>
<script src="index.js"></script>

hashtagCreating the Application

hashtagInstall the library

hashtagSetting up the OpenID flow

hashtagFurther reading

Creating the Application

Install the library

Setting up the OpenID flow

Further reading