Web JS with Vue

Prerequisites

Required client settings

As this library is designed for SPAs, make sure you have selected Application Type in your client settings as Single Page Application.

For a fully functional integration ensure that Callback redirect URIs and Signout redirect URIs are configured.

Install web-js package

npm i @axioms/web-js

Vue client configuration

Grab the client key. Now, in your Vue main.js file create web-js Auth object which looks like below.

src/main.js

import { Auth } from '@axioms/web-js';
// Auth
const auth = new Auth({
    axioms_domain: process.env.VUE_APP_Axioms_Domain,
    response_type: process.env.VUE_APP_Response_Type,
    redirect_uri: process.env.VUE_APP_Redirect_Uri,
    post_logout_uri: process.env.VUE_APP_Post_Logout_Uri,
    client_id: process.env.VUE_APP_Client_Id,
    scope: process.env.VUE_APP_Scope,
    post_login_navigate: process.env.VUE_APP_Post_Login_Navigate
});

Vue.prototype.$auth = auth;

Next add a .env (.env.local for local or .env.production for production) file in your Vue project root, and populate following values,

.env.local

VUE_APP_Client_Id=<Your-Client-ID>
VUE_APP_Axioms_Domain=<Your-Axioms-Domain>
VUE_APP_Redirect_Uri=https://<Your-App-Host>/callback
VUE_APP_Post_Logout_Uri=https://<Your-App-Host>/login
VUE_APP_Response_Type=<Your-Response-Type>
VUE_APP_Scope=<Your-Scope>
VUE_APP_Post_Login_Navigate=<Your-Post-Login-Navigate>

Here is an example version of .env.local

.env.local

VUE_APP_Client_Id=MvnGPGwPJ7DNs0fQLpAr4dhi2PbfuQX1
VUE_APP_Axioms_Domain=auth.test-unlimited.com
VUE_APP_Redirect_Uri=http://localhost:8080/callback
VUE_APP_Post_Logout_Uri=http://localhost:8080/login
VUE_APP_Response_Type=id_token token
VUE_APP_Scope=openid profile email orgs
VUE_APP_Post_Login_Navigate=/dashboard

Using web-js functions

In your *.vue files access various web-js JavaScript functions via this. For instance,

To login with redirect,

this.$auth.login_with_redirect();

For logout with redirect,

this.$auth.logout_with_redirect();

To check if user is authenticated,

this.$auth.session.is_authenticated()

In your *.js files you can access various web-js JavaScript functions via Vue.prototype. For instance,

Vue.prototype.$auth.session.is_authenticated();

Add view for redirect URI

Create Callback.vue in your view, add authorization response processing logic, and register as route /callback.

src/views/Callback.vue

<template>
  <div>
    Loading
  </div>
</template>

<script>
export default {
  name: "callback",
  mounted() {
    this.$auth.process_authorize_response();
  }
};
</script>

Register redirect URI in your client's settings and also add in .env. URI should be https://{host}/callback or http://{host}/callback where host can be localhost i.e. localhost:8080 or domain hosting your Vue app i.e. app.my-domain.com.

Add view to initiate login

Create Login.vue in your view, add logic to initiate login, and register as route /login.

src/views/Login.vue

<template>
  <div>Requesting login</div>
</template>


<script>
export default {
  name: "login",
  mounted() {
    this.$auth.login_with_redirect();
  }
};
</script>

Your can use login endpoint https://{host}/login or http://{host}/login as post logout uri in your client's settings and also add in .env where where host can be localhost i.e. localhost:8080 or domain hosting your Vue app i.e. app.my-domain.com.

Add view for passwordless login

Alternatively, you can add passwordless login using magic link which will be sent by email. You must enable passwordless options in tenant's settings i.e. Passwordless Enabled and Using Email Link must be enabled for tenant.

Make sure openid and email are included in scope (i.e. VUE_APP_Scope for environment variable). This is required for session validation.
Create Passwordless.vue in your view, and register as route /passwordless. Add a form on the view which captures email address of the user.
In script section of the view add form submit handler onSubmit function which basically calls $auth.login_with_email_link with email as parameter.

src/View/Passwordless.vue

<script>
export default {
  methods: {
    async onSubmit(evt) {
      evt.preventDefault();
      var email = this.form["email"];
      try {
        var response = await this.$auth.login_with_email_link(email);
      } catch (error) {
          console.error(error);
      }
    }
  },
};
</script>

warning

Passwordless login via email link is still in beta. Please use it with caution as APIs and SDKs will change in coming days.

Add view to initiate logout

Create Logout.vue in your view, add logic to initiate logout, and register as route /logout.

src/views/Logout.vue

<template>
  <div>Requesting logout</div>
</template>


<script>
export default {
  name: 'logout',
  mounted() {
      this.$auth.logout_with_redirect();
  }
}
</script>

Add Vue router guard

Using web-js, you can guard your Vue router for un-authenticated users and redirect them to login. See below snippet which uses $auth.session.is_authenticated() and expects a meta.requiresAuth to be true.

src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import { routes } from './routes';

Vue.use(Router)

const router = new Router({ mode: "history", routes })

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (Vue.prototype.$auth.session.is_authenticated()) {
            next()
            return
        }
        next(`/login?next=${to.path}`)
    } else {
        next()
    }
})

export default router

Add Vue routes

src/router/routes.js

export const routes = [{
    // Routes for your other protected or private views
    /*
    {
        path: '/dashboard',
        name: 'dashboard',
        component: () =>
            import ('@/views/Dashboard.vue'),
        meta: {
            title: 'Dashboard',
            requiresAuth: true,
            layout: 'default'
        }
    },
    */

    // Routes for web-js authentication and authorization
    {
        path: '/callback',
        name: 'callback',
        component: () =>
            import ('@/views/Callback.vue'),
        meta: {
            title: 'Callback',
            requiresAuth: false
        }
    },
    {
        path: '/login',
        name: 'login',
        component: () =>
            import ('@/views/Login.vue'),
        meta: {
            title: 'Login',
            requiresAuth: false
        }
    },
    {
        path: '/logout',
        name: 'logout',
        component: () =>
            import ('@/views/Logout.vue'),
        meta: {
            title: 'Logout',
            requiresAuth: true
        }
    }
]

Vue Sample

To learn more download our Vue sample from our Github repository. In less than 10 minutes you can deploy Vue sample to Netlify.

#Prerequisites

#Required client settings

#Install web-js package

#Vue client configuration

#Using web-js functions

#Add view for redirect URI

#Add view to initiate login

#Add view for passwordless login

warning

#Add view to initiate logout

#Add Vue router guard

#Add Vue routes

#Vue Sample

Prerequisites

Required client settings

Install web-js package

Vue client configuration

Using web-js functions

Add view for redirect URI

Add view to initiate login

Add view for passwordless login

Add view to initiate logout

Add Vue router guard

Add Vue routes

Vue Sample