• Authenticate and authorize your users
• Store data about your users
• Perform password-based and social login
• Secure your application with multi-factor authentication
• And much more! Check out our product documentation for more information

cd basic
npm install
npm run serve

export const globalData = {
  state: {
    max: 50,
    score: 0
  }
}

import { globalData } from '../../main'

data() {
    return {
        scoreState: globalData.state
    }
}

advance: function () {
    if (this.scoreState.score < this.scoreState.max) {
        this.scoreState.score += 10
    }
},
reset: function () {
    this.scoreState.score = 0
}

<b-progress :max="scoreState.max" class="big-progress" show-progress>
    <b-progress-bar :value="scoreState.score"/>
</b-progress>

export default {
    state: {
        max: 50,
        score: 0
    },
    reset: function () {
        this.state.score = 0
    },
    score: function (score) {
        if (this.state.score < this.state.max) {
            this.state.score += score
        }
    },
    bumpScore: function () {
        this.score(10)
    }
}

import scoreStore from '../../model/scoreStore'

export default {
    name: 'One',
    data() {
        return {
            scoreState: scoreStore.state
        }
    },
    methods: {
        advance: () => scoreStore.bumpScore(),
        reset: () => scoreStore.reset()
    }
}

1. A centralized, reactive data store
2. Components cannot directly change state

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

Vue.use(Vuex)

export default
 new Vuex.Store({
    state: {
        max: 50,         score: 0
    },
    mutations: {
        bumpScore (state) {
            if (state.score < 50) {
                state.score += 10
            }
        },
        reset (state) {
            state.score = 0
        }
    }
  })

import scoreStoreVuex from '../../model/scoreStoreVuex'

export default {
    name: 'One',
    data() {
        return {
            scoreState: scoreStoreVuex.state
        }
    },
    methods: {
        advance: () => scoreStoreVuex.commit('bumpScore'),
        reset: () => scoreStoreVuex.commit('reset')
    }
}

Vuex Store Injection

const store = new Vuex.Store({
...
})

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

Vuex Computed Fields

import { mapState } from 'vuex';

computed: mapState([
    'ary', 'obj'
])

<h1>{{ary}}</h1>

Managing Arrays and Objects with Vuex

const store = new Vuex.Store({
  state: {
    ary: [],
    obj: {}
  },
  mutations: {
    addAry: function (state, elem) {
      state.ary.push(elem)
    },
    delAry: function (state) {
      state.ary.splice(-1, 1)
    },
    addObj: function (state, elem) {
      Vue.set(state.obj, elem.key, elem.value)
    },
    delObj: function (state, name) {
      Vue.delete(state.obj, name);
    }
  }
})

A Five-Minute Overview of OpenID Connect

• An OpenID Connect Primer
• 7 Ways an OAuth Access Token is like a Hotel Key Card
• Is the OAuth 2.0 Implicit Flow Dead?

Set Up Okta for the SPA App

Use Vuex and the Okta Auth Javascript Library

npm install @okta/okta-auth-js --save

const store = new Vuex.Store({
  state: {
    user: {},
    idToken: ''
  },
  mutations: {
    setUser: function (state, elem) {
      Vue.set(state.user, elem.key, elem.value);
    },
    setIdToken: function (state, value) {
      state.idToken = value;
    }
  }
});

import OktaAuth from '@okta/okta-auth-js';

const ISSUER = 'https://{yourOktaDomain}/oauth2/default';
const CLIENT_ID = '{yourClientId}';
const REDIRECT_URI = 'http://localhost:8080';
var authClient;

created() {
  authClient = new OktaAuth({
    issuer: ISSUER,
    clientId: CLIENT_ID,
    redirectUri: REDIRECT_URI
  });
}

<template>
  <div>
    <h1>Data Binding with Vue.js</h1>
    <h3>User Info:</h3>
    <div class="div-centered">
      <codemirror :value="userStr" :options="cmOptions"></codemirror>
    </div>
    <b-button v-if="!user.claims" @click="login" variant="primary" class="m-1">
        Login</b-button>
    <b-button v-if="user.claims" @click="logout" variant="danger" class="m-1">
        Logout</b-button>
  </div>
</template>

userStr() {
  return JSON.stringify(this.$store.state.user, null, '\t')
}

login() {
  authClient.token.getWithRedirect({
    responseType: 'id_token',
    scopes: ['openid', 'email', 'profile']
  })
}

async mounted() {
  // check for tokens from redirect
  if (location.hash) {
    var tokenInfo = await authClient.token.parseFromUrl();
    this.$store.commit(
        'setUser', {key: 'claims', value: tokenInfo.claims}
    );
    this.$store.commit('setIdToken', tokenInfo.idToken);
  }
}

http://localhost:8080/#id_token=eyJraWQiOiI3bFV0aGJyR2hWVmxVT2RzVldwWFQwaWdyUEVGOEl6ZUtvdW53ckZocWxzIiwiYWxnIjoiUlMyNTYifQ...

logout() {
  window.location.href = 
    ISSUER + '/v1/logout?id_token_hint=' + this.$store.state.idToken +
    '&post_logout_redirect_uri=' + REDIRECT_URI
}

• Build Your First PWA with Vue and TypeScript
• Use Schematics with Vue and Add Authentication in 5 Minutes
• Build a Single-Page App with Go and Vue