Skip to main content

Using Warrant with Vue.js

The Warrant Vue.js SDK allows you to securely add authorization & access control checks directly into your Vue.js application to show/hide pages, components, and other content that requires privileged access. The SDK interacts directly with the Warrant API using short-lived session tokens that must be created server-side using your API key. Refer to our guide on Creating Sessions to learn how to generate session tokens you can pass to the Warrant React SDK to start performing client-side access checks.

The following guide assumes that you already have a Warrant account and corresponding API and Client keys. If you don't already have an account, you can sign up for one here.

note

The Warrant Vue.js SDK is intended for use in client-side applications to perform access checks that dictate the rendering of pages and components. Always ensure that server-side actions which modify state in your application (ex: an API call that writes to the database) are protected using one of Warrant's server-side SDKs. To learn how to add server-side access checks using Warrant, refer to this quickstart guide.

Create an Allowed Origin​

Since the Warrant Vue.js SDK interacts directly with the Warrant API, you must first configure an Allowed Origin from the Warrant Dashboard to allow requests from your Vue application to the Warrant API. Requests from an origin not explicitly specified by an Allowed Origin will fail.

For example, if your Vue application is served at https://app.example.com, create an Allowed Origin for https://app.example.com to allow requests from that origin.

For local development, you can add an Allowed Origin for localhost. For example, if your local Vue application is being served on localhost port 3000, add an Allowed Origin for http://localhost:3000.

Allowed Origins support wildcards (*), so creating an Allowed Origin for https://*.example.com will allow requests coming from any subdomain of https://example.com such as https://foo.example.com and https://bar.example.com.

Install the SDK​

Run the following command in your project directory to install the Warrant Vue.js SDK:

npm install @warrantdev/vue-warrant

Configure the Warrant Plugin​

The Warrant Vue.js SDK includes a plugin that provides utility methods for performing access checks anywhere in your app. Add the plugin to your Vue.js application, passing it your Client Key using the clientKey prop.

// main.js
import Vue from "vue";
import router from "./router";
import App from "./App.vue";
import { Warrant } from "@warrantdev/vue-warrant";

Vue.config.productionTip = false;

Vue.use(Warrant, {
    clientKey: "client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E=",
});

new Vue({
    router,
    // store,
    render: (h) => h(App),
}).$mount("#app");

You should now be able to access the plugin as this.$warrant in methods.

Set the Session Token​

Warrant Sessions​

To finish initializing the plugin you must call the setSessionToken plugin method with a valid session token. This allows the plugin to make access check requests to the Warrant API. Refer to our guide on Creating Session Tokens to learn how to generate a session token for the SDK. We recommend generating session tokens users during your application's authentication flow. You can then return the token to the client and use it to initialize the plugin. Here's an example of what that might look like:

<!-- Login.vue -->
<template>
    <form @submit.prevent="onSubmit(email, password)">
        <!-- email & password inputs, etc. -->
    </form>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                email: null,
                password: null,
            };
        },
        methods: {
            async onSubmit(email, password) {
                const response = await login(email, password);

                // NOTE: This session token must be generated
                // server-side when logging users into your
                // application and then passed to the client.
                // Access check calls in this library will fail
                // if the session token is invalid or not set.
                this.$warrant.setSessionToken(response.data.warrantSessionToken);

                //
                // Redirect user to logged in page
                //
            },
        },
    };
</script>

Identity Provider Sessions​

If you are using an identity provider (IdP) for your application's authentication, you can use tokens generated by the provider in place of a session token. To do so, make sure you have your JWKS endpoint configured correctly. Refer to Identity Provider Sessions to read more about configuring the use of third party tokens. Once configured, you can call setSessionToken with your IdP token in the authentication flow:

setSessionToken("eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.NHVaYe26MbtOYhSKkoKYdFVomg4i8ZJd8_-RU8VNbftc4TSMb4bXP3l3YlNWACwyXPGffz5aXHc6lty1Y2t4SWRqGteragsVdZufDn5BlnJl9pdR_kdVFUsra2rWKEofkZeIC4yWytE58sMIihvo9H1ScmmVwBcQP6XETqYd0aSHp1gOa9RdUPDvoXQ5oqygTqVtxaDr6wUFKrKItgBMzWIdNZ6y7O9E0DhEPTbE9rfBo6KTFsHAZnMg4k68CDp2woYIaXbmYTWcvbzIuHO7_37GT79XdIwkm95QJ7hYC9RiwrV7mesbY4PAahERJawntho0my942XheVLmGwLMBkQ")

The plugin is now initialized and you can start authorizing actions in your app! Read on to learn about the different methods and components you can use to check access in your app.

authorize Middleware​

authorize is a vue-router navigation guard that can be used to secure components rendered by vue-router with a warrant.

Given warrants, authorize will perform an access check and only render the components if the user has access. If warrants contains multiple warrants, the op parameter is required and specifies how the list of warrants should be evaluated.

anyOf specifies that the access check request will be authorized if any of the warrants are matched and will not be authorized otherwise.

allOf specifies that the access check request will be authorized if all of the warrants are matched and will not be authorized otherwise.

Use the authorize middleware to only render a component via vue-router if the user has the specified warrants:

<template>
    <div>My Super Secret Component</div>
</template>

<script>
    import { authorize } from "@warrantdev/vue-warrant";

    export default {
        beforeRouteEnter: authorize({
            warrants: [{
                objectType: "secret",
                objectId: "secretId",
                relation: "viewer",
            }],
            redirectTo: "/",
        }),
    };
</script>

hasWarrant​

hasWarrant is a plugin method that returns a Promise which resolves to true if the user has the specified warrants and resolves to false otherwise.

Use hasWarrant for fine-grained conditional rendering or for specific logic within components:

<template>
    <div v-if="protectedInfo">
        <protected-info>{{ protectedInfo }}</protected-info>
    </div>
</template>
<script>
    export default {
        data() {
            protectedInfo: null,
        },
        async created() {
            const userHasWarrant = await this.$warrant.hasWarrant({
                warrants: [{
                    objectType: "info",
                    objectId: "protected_info",
                    relation: "viewer",
                }]
            })
            if (userHasWarrant) {
                // request protected info from server
            }
        }
    };
</script>

ProtectedView​

ProtectedView is a utility component you can wrap around markup or components that should only be displayed for users with a specified warrant. It only renders the components it wraps if the user has the given warrant.

<template>
    <div>
        <my-public-component />
        <protected-view
            :warrants="warrants"
        >
            <my-protected-component />
        </protected-view>
    </div>
</template>
<script>
    import { ProtectedView } from "@warrantdev/vue-warrant";

    export default {
        components: {
            ProtectedView,
        },
        data: function() {
            return {
                warrants: [{
                    objectType: "myObject",
                    objectId: this.$route.params.objectId,
                    relation: "view",
                }]
            };
        },
    };
</script>