Vue.js

This guide shows how to use Criipto Verify in a Vue.js application.

Read the full @criipto/auth-js documentation or download a sample Vue 3 application from GitHub.

​

Register Your Application in Criipto Verify

After you signed up for Criipto Verify, you must register an application before you can try logging in with any eID.

Once your application is registered, the dashboard will contain the necessary details to configure your application to communicate with Criipto Verify. You will need the following information from the General tab of your application settings:

• Client ID to identify your application to Criipto Verify.
• Domain on which you will be communicating with Criipto Verify.

​

Register callback URLs

Before you can start sending authentication requests to Criipto Verify, you need to register the URLs on which you want to receive the returned JSON Web Token, JWT.

The Callback URL of your application is the URL where Criipto Verify will redirect to after the user has authenticated in order for the OpenID Connect middleware to complete the authentication process.

You will need to add this URL to the list of allowed URLs for your application.

If you are running your application locally, your callback URL might look like this:

http://localhost:5173

When you deploy your application to a different URL, you will also need to ensure you add that URL to the Callback URLs field in your application settings.

​

Install SDK

Using npm:

npm install --save @criipto/auth-js

​

Initialize SDK with your application details

// App.vue

import CriiptoAuth from '@criipto/auth-js';

var criiptoAuth = new CriiptoAuth({
  domain: '{{YOUR_CRIIPTO_DOMAIN}}',
  clientID: '{{YOUR_CLIENT_ID}}',
  store: sessionStorage,
});

The CriiptoAuth constructor takes an object with the following parameters:

• domain (required, string): The domain your Criipto Application belongs to, such as example.criipto.id.
• clientID (required, string): The Client ID for your Criipto Application.

Use your application's domain and client ID as the values for domain and clientID respectively.

Additional authorization parameters can be passed in the CriiptoAuth constructor as well. For all available options, see the full list of supported parameters.

​

Authorization methods

You can use the following methods to authorize the user:

• criiptoAuth.popup.authorize - Opens a popup window to authenticate the user.
• criiptoAuth.redirect.authorize - Redirects the user to the Criipto Verify login page.

​

Authorization with popup

Will open a popup window to authenticate the user.

authorize

// App.vue
// Using the reactive method and Composition API of Vue.js 3

<script setup lang="ts">
import CriiptoAuth from '@criipto/auth-js';
import { reactive } from 'vue';

...
const state = reactive({
  claims: {},
});

const loginWithEid = () => {
   criiptoAuth.popup.authorize({
    width: 300,
    height: 400,
    redirectUri: 'http://localhost:5173',
    acrValues: 'urn:grn:authn:dk:mitid:substantial',
   })
   .then((result) => {
    console.log(result, result.id_token, result.claims);
    state.claims = result.claims;
};
...
</script>

<template>
  ...
    <button @click="loginWithEid">Login with eID</button>
    <ul>
      <li v-for="(value, key) in state.claims" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  ...
</template>

​

Authorization with redirect

Will redirect the user to the Criipto Verify login page.

authorize

Redirects the users browser tab to the authorization url. After authorization, the user will be redirected back to the provided redirectUri. The redirectUri should be whitelisted in the "Callback URLs" section in your Criipto application settings.

match

Will check for the code or id_token parameter in the URL query parameters or hash of the current window.location.

• If the id_token parameter is present, it will return the result.
• If the code parameter is present, it will perform a PKCE token exchange and return the result. For more information, see this section.

As soon as the user has been redirected back to your application after authentication, you can call the match method to get the id_token or code parameter.

// Login.vue

<script setup lang="ts">
import criiptoAuth from '../criipto-auth';
...
const loginWithEid = () => {
  criiptoAuth.redirect
    .authorize({
      redirectUri: 'http://localhost:5173/profile',
      prompt: 'login',
    })
    .then((result) => {
      console.log('result', result);
    })
    .catch((error) => {
      console.log(error);
    });
};
...
</script>

<template>
    ...
    <button @click="loginWithEid">Login with eID</button>
    ...
</template>

// Profile.vue
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import criiptoAuth from '../criipto-auth';

const state = reactive({
  userName: 'user',
});

function matchCallback() {
  criiptoAuth.redirect
    .match()
    .then((result) => {
      if (result && result.claims) {
        state.userName = result.claims.name;
        console.log('result', result);
      }
    })
    .catch((error) => {
      console.log(error);
    });
}

onMounted(() => {
  matchCallback();
});
</script>

<template>
  ...
    <h1>Hello, {{state.name}}</h1>
  ...
</template>

prompt: 'login' will force the user to re-authenticate even if they have already logged in. See the list of supported parameters for more information.

​

Logging user out

If you have SSO enabled for your domain and you are not using prompt='login' you can use logout() to clear the users SSO session.

criiptoAuth.logout({
  redirectUri: 'http://localhost:5173',
});