Azure Token Auth

Azure Token Auth is a Javascript integration with AzureAD authenticating a user and setting recieved tokens to local storage.

• Authenticates you with Azure AD using oauth2
• Redirect login is used if the user has never logged in
• Background login requesting refresh tokens, which replaces current token in local storage
• Logout of AzureAD

Required Environment Variables

| VAR | Discription | | ------ | ------ | | VUE_APP_TENANT | Tennant found in Azure configuration | | VUE_APP_CALLBACK | Callback URL for post login | | VUE_APP_CLIENTID | Client ID found in Azure configuration |

Functions

| Function | | | ------ | ------ | | login() | User will be logged in with either redirect or background styles. The strings "redirect", and "background" will be returned depending on what style is used | | logout() | User will be ridireced to Azure AD logout |

Usage

Import

import {login} from 'azuread-token-auth'

####Sample implementation in Vue.js

In .env.local:

NODE_ENV=<development, production, etc.>
VUE_APP_PROTOCOL=<http or https>
VUE_APP_API=<URL to API>
VUE_APP_SECRET=<Client Secret>
VUE_APP_CLIENTID=<Client ID>
VUE_APP_TENANT=<Tenant ID>
VUE_APP_CALLBACK=<Callback URL>

In App.vue:

export default {
  name: 'app',
  components: {...},
  created(){
    this.$store.dispatch('appSetup')
  },
}

In store.js:

import Vue from 'vue'
import Vuex from 'vuex'

import {login} from 'azuread-token-auth'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        apiToken: '',
    },
    mutations: {
        setApiToken(state, value){
            state.apiToken = value
          },
    },
    actions: {
        // eslint-disable-next-line no-unused-vars
        appSetup({ commit, getters, dispatch }) {
            dispatch('getToken').then(() => {
                // eslint-disable-next-line no-unused-vars
                const token = getters.getTokenFromLocalStorage
                // TODO: Interact with token here ...
            })
        },
        // eslint-disable-next-line no-unused-vars
        async tokenRefresh({ commit, dispatch }) {
            dispatch('getToken').then(() => { 
				//TODO: Do any post-refresh actions here ...
            })
        },
        async getToken({ commit, getters }) {
            return new Promise((resolve, reject) => {
                const url = window.location.href
                const substring = 'id_token'
                let localToken = getters.getTokenFromLocalStorage

                // First, try to get the token from the URL ...
                if(url.toString().indexOf(substring) !== -1) {
                    // eslint-disable-next-line no-useless-escape
                    const access_token = url.match(/\#(?:id_token)\=([\S\s]*?)\&/)[1];
                    localStorage.setItem("Auth.idToken", access_token)
                    if(access_token) {
                        localToken = access_token
                        commit('setApiToken', localToken)
                        resolve(localToken)
                    }
                // If we couldn't get the token from the URL, trying getting it from local storage ...
                } else if(localToken) {
                    commit('setApiToken', localToken)
                    resolve(localToken)
                // If we couldn't get the token from the URL or local storage, get a new token ...
                } else {
                    login().then(() => {
                        localToken = getters.getTokenFromLocalStorage
                        if(localToken){
                            commit('setApiToken', localToken)
                            resolve(localToken)
                        }else{
                            reject("error getting localStorage") 
                        }
                    })
                }
            })
        },
    },
    },
    getters: {
        getTokenFromLocalStorage: () => {
            return localStorage.getItem('Auth.idToken')
        },
    }
})