How to implement Docusign in a SPA without requiri

Question

I'm following the React OAuth Implicit example shown here: https://github.com/docusign/eg-02-react-implicit-grant and I'm confused as to how an end user of our React SPA is supposed to be able to create an envelope for themselves without having access to our Admin account password.

As part of our app's sign up process, we have our end users fill out a form which prefills an envelope for them to sign via Docusign. We imagined that our Docusign admin account would authenticate our application on behalf of these users behind the scenes, allowing them to move on immediately to the embedded signing ceremony.

In the linked example, however, an end user is prompted via the Docusign UI to sign into our Admin account in order to continue using Docusign's API methods.

How can we avoid asking the end user to sign in? Or is this not possible when using the implicit grant model?

Thanks in advance.

Answer 1

Excellent question. There are many uses cases for DocuSign-integrated applications:

Use case: The signer is using your app

Signers don't need DocuSign accounts. Only the sender of the signing request needs an account.

Option 1: Use a Powerform

The easiest way to handle this use case is to use a DocuSign PowerForm. A PowerForm is a DocuSign envelope template that is implicitly sent by the DocuSign system. The signer can then fill in the form with their name and other details, and then sign the document(s).

Here's a video that demonstrates the Powerform solution.

You can fill in the form on behalf of the signer via query parameters. See this SO answer. Integrating your app with a PowerForm is easy but there may be some aspects of the envelope that can't be set via the template. See this article for details on how to set the URL the user will be redirected to when they finish signing.

Option 2: Create the envelope yourself, then let your user sign it

A more capable option is for your app to create the envelope yourself. You need an access token for a paid DocuSign user to send the envelope. I wouldn't use a system administrator account, just a regular DocuSign account user.

Something like:

1. Create a user in your DocuSign account such as "HR@your_company.com"
2. Set up a backend (server app) to use DocuSign JWT authentication to impersonate the HR@your_company.com "user." See the eg-01 series of code examples available in multiple languages.
3. Write your SPA to either create the envelope itself (after obtaining the access token from the backend) or use a private API to ask the backend to create the envelope. After the envelope is created, obtain the URL for the Signing Ceremony.
4. Your SPA now redirects the user to the Signing Ceremony (don't use an iFrame). After the user has signed, she will be redirected back to your SPA along with the event info (that she signed). An example of this is the Embedded Signing Ceremony workflow (the first workflow) in the DocuSign Code Example Launchers, the eg-03 series. Here's the Node.js example.

Notes.

1. Don't use an iFrame since the Signing Ceremony needs the entire screen. A 100% iFrame is not really needed since the SPA can save state in the session via cookies or local storage.
2. You can set the DocuSign Signing Ceremony to ping your server (AJAX pings) to keep the session alive, serve as a heartbeat, etc.
3. If you have your SPA create the envelope then you'll need to setup a CORS gateway to enable the SPA to communicate with the DocuSign cloud. This is detailed in the eg-02 example's write-up.
4. Creating an envelope for the signer as described above gives you maximum control over the envelope including the potential inclusion of attachment documents, payments, etc.

Use case: Your employee is using your SPA app

In this case, your employee can authenticate with DocuSign via the SPA, and then anything with DocuSign via the SPA and the DocuSign API. Eg:

• Sending envelopes
• Sending the envelope and then having the signer (in person) sign the envelope. Eg a banking application where the bank employee is enabling the in-person signer to open an account.
• Monitoring sent envelopes
• Whatever

This is the use case being demonstrated by the eg-02 React example.