Complete document creation and signing process for Vue SaaS

1

Generate JWT on your back-end to authorize users

Prerequisites:

Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.

JWT (JSON Web Token) serves as a secure means to authorize your individual SaaS users with the DocuSeal document form builder. The token is generated with JWT payload parameters to grant access only for your specific SaaS user and only for a specific document:

  • user_email: Email address of the DocuSeal admin user that provided the API_KEY for JWT signing.
  • integration_email: Email address of your SaaS user that opens the document form builder.
  • external_id: Unique string to tag the opened document within the DocuSeal platform and to be able to reopen the form using this unique key.
  • documents_urls[]: An array with public and downloadable document URLs to be opened in the form builder. Pass empty array to allow users to upload their files.

Ensure you never expose API_KEY on your client side, only generated and signed JWT should be passed to your front-end app.

const jwt = require('jsonwebtoken');

const API_KEY = process.env.DOCUSEAL_API_KEY // Obtain from DocuSeal Console

const token = jwt.sign({
  user_email: 'admin@company.com',
  integration_email: 'saas-user@company.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, API_KEY);
2

Mount form builder component

Open your terminal or command prompt and navigate to your project directory. Then, run the following command to install the @docuseal/vue package

Once the installation is complete, you'll need to import the component in the relevant file where you intend to use DocuSeal. With the component imported, you can now use <DocusealBuilder /> within your Vue template wherever you want to integrate the DocuSeal document form builder functionality.

Trigger the API call to your backend endpoint to retrieve a JSON Web Token (JWT) generated on the brevious step.

Learn more:

Embed API Reference

Vue package on GitHub

<template>
  <DocusealBuilder
    v-if="token"
    :token="token"
  />
</template>

<script>
import { DocusealBuilder } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealBuilder
  },
  data () {
    return {
      token: ''
    }
  },
  mounted () {
    fetch('/your_backend/docuseal/init_builder', {
      method: 'POST'
    }).then(async (resp) => {
      const { jwt } = await resp.json()

      this.token = jwt
    })
  }
}