Wavo Auth Header Component

The Component

This is a wavo branded header that can be used for all wavo products. You must have a callback route (./callback) in your app. No logic or html needs to be present here it is handled by the auth-ui-helper module that is packaged with the component.

To add the component to your project just add the following scripts to your index.html:

<script type="module" src="https://unpkg.com/wavo-auth-header-component/dist/header/header.esm.js"></script>
<script nomodule="" src="https://unpkg.com/wavo-auth-header-component/dist/header/header.js"></script>

Next, add the following html tag in your app container:

<app-header callbackurl='http://your.url/callback' logouturl = 'http://your.url/' name='Campaign Index' links='[{"name":"Campaigns","url":"campaigns"},{"name":"Advertisers","url":"advertisers"},{"name":"Tags","url":"tags"}]' ></app-header>

You can customize the links in the navbar using the links object. You can also create dropdown menus in the navbar using:

 {"dropdown":{"name":"my dropdown", "links":[{"name":"drop1", "url":"http://link.path"},{"name":"drop2", "url":"http://link2.path"}}}

As an object in the links array.

#Authentication

There is some requirments of you app in order to handle Auth tasks as well. Your app must have a http://my.link/calback route.

First, you must import the @wavo-cloud/auth-ui-helper.

import Auth from '@wavo-cloud/auth-ui-helper'

The important functions in the helper are:

Auth.isAuthenticated() //boolean
Auth.getUserApps() //array of app names stored as strings

So if we would like to know if the current logged in user has authorization to access to the your new app you could do something like this:

    if (Auth.isAuthenticated() && !Auth.getUserApps().includes("your-app-name") {
      window.location = 'https://portal.cloud.wavo.me'
      return (<div></div>)
    }

The above code checks if the user is logged in and does not have access to your app (using the app name used in the JWT scope). It should be placed in the render() function before the regular return statement. This will redirect to the portal homepage if the the current user does not have access.

Similarly you might can use the "Auth.isAutheticated()" boolean to stop your main container from rendering before a user is logged in.

Another feature of the nav bar is that it emits an 'authed' event when the user is logged in. You can caputure it using the following:

    this.header.addEventListener('authed', event =>{
      this.forceUpdate() //in my case i wanted to force a re-render when it was finally authed
    })

    //reference header with the following code added to the app-header tag
     ref={elem => this.header = elem}

Using these tools you ought to be able to handle the authentication flow in any framework.

Love,
WAVO CORE

TODO

Stencil was initially used in case for this component in case we ever needed the navbar in non-react apps. We do not make those so it's safe to say we should rewrite this in React everytually as Stencil is not easy to work with.