Add IdP logout

Author: LarryKlugerDS

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "license": "MIT",
   "description": "React code example with OAuth Implicit grant and DocuSign API",
-  "homepage": "https://github.com/docusign/react-oauth-docusign",
+  "homepage_comment": "<homepage> is used by the build process as the build target URL path",
+  "homepage": "react-oauth-docusign/build",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",

public/config_example.js

@@ -0,0 +1,20 @@
+var config = {};
+
+// Configuration file example. 
+//
+// Development: Add to the public directory as config.js.
+// 
+// Production: Add to the build directory after the build is complete as config.js.
+
+config.DS_CLIENT_ID='xxxx-xxxx-xxxx-xxxx-xxxxxxx';
+config.IMPLICIT_SCOPES='signature';
+
+// Your DocuSign eSignature REST API private CORS proxy 
+config.DS_API_CORS_PROXY='https://your_private_proxy.xxx.xxx';
+config.DS_API_CORS_PROXY_FOR='https://demo.docusign.net';
+
+// Your app's URL
+config.DS_APP_URL='http://localhost:3000';
+config.DS_DEBUG=true;
+config.DS_IDP='https://account-d.docusign.com';
+config.DS_AUTHENTICATION='https://account-d.docusign.com';

src/App.js

@@ -94,7 +94,8 @@ class App extends React.Component {
       this.clearAuth();
       this.clearState();
       this.setState({ page: 'welcome' });
-      toast.success('You have logged out.', { autoClose: 1000 });
+      toast.success('You have logged out.', { autoClose: 5000 });
+      this.oAuthImplicit.logout();
     }
 
     /**

src/DocuSign.js

@@ -72,7 +72,7 @@ class DocuSign {
             },
             documents: [
                 {
-                    name: 'Example document.pdf',
+                    name: docName,
                     fileExtension: 'pdf',
                     documentId: '1',
                     documentBase64: base64File,

src/OAuthImplicit.js

@@ -85,23 +85,9 @@ class OAuthImplicit {
         // This API method is common for many IdP systems.
         // But the exact format of the response tends to vary.
         // The following works for the DocuSign IdP.
-        let userInfoResponse;
-        try {
-            userInfoResponse = await this.fetchUserInfo();
-        } catch (e) {
-            const msg = `Problem while completing login.\nPlease retry.\nError: ${e.toString()}`;
-            log(msg);
-            toast.error(msg, { autoClose: 10000 });
-            return;
-        }
-        if (!userInfoResponse || !userInfoResponse.ok) {
-            const msg = `Problem while completing login.\nPlease retry.\nError: ${userInfoResponse.statusText}`;
-            log(msg);
-            toast.error(msg, { autoClose: 10000 });
-            return;
-        }
-        const userInfo = await userInfoResponse.json();
-        const defaultAccount = userInfo.accounts.filter((acc) => acc.is_default)[0];
+        const userInfo = await this.fetchUserInfo();
+        const defaultAccountArray = userInfo.accounts.filter((acc) => acc.is_default);
+        const defaultAccount = defaultAccountArray.length > 0 && defaultAccountArray[0];
         if (!defaultAccount) {
             const msg = `Problem: the user does not have a default account. Contact DocuSign Customer Service to fix.`;
             log(msg);
@@ -149,23 +135,58 @@ class OAuthImplicit {
         `scope=${window.config.IMPLICIT_SCOPES}&` +
         `client_id=${window.config.DS_CLIENT_ID}&` +
         `state=${oauthStateValue}&` +
-        `redirect_uri=${window.config.DS_APP_URL}`;
+        `redirect_uri=${encodeURIComponent(window.config.DS_APP_URL)}`;
+
+        window.location = url;
+    }
+
+    /**
+     * logout of the DocuSign IdP. 
+     * If SSO is used, the upstream IdP may not redirect the 
+     * browser back to this app
+     */
+    logout () {
+        const url =
+        `${window.config.DS_IDP}/logout?` +
+        //`response_type=code&` +
+        `response_type=token&` +
+        `scope=${window.config.IMPLICIT_SCOPES}&` +
+        `client_id=${window.config.DS_CLIENT_ID}&` +
+        `redirect_uri=${encodeURIComponent(window.config.DS_APP_URL)}&` +
+        `response_mode=logout_redirect`;
 
         window.location = url;
     }
 
     /**
      * A relatively common OAuth API endpoint for obtaining information
      * on the user associated with the accessToken
+     * @returns userInfoResponse JSON 
      */
     async fetchUserInfo() {
-        return fetch(`${window.config.DS_AUTHENTICATION}/oauth/userinfo`, {
-            headers: new Headers({
-                Authorization: `Bearer ${this.accessToken}`,
-                Accept: `application/json`,
-                'X-DocuSign-SDK': sdkString,
-            }),
-        })
+        let userInfoResponse
+        try {
+            userInfoResponse = await fetch(
+                `${window.config.DS_AUTHENTICATION}/oauth/userinfo`, {
+                headers: new Headers({
+                    Authorization: `Bearer ${this.accessToken}`,
+                    Accept: `application/json`,
+                    'X-DocuSign-SDK': sdkString,
+                }),
+            })
+        } catch (e) {
+            const msg = `Problem while completing login.\nPlease retry.\nError: ${e.toString()}`;
+            log(msg);
+            toast.error(msg, { autoClose: 10000 });
+            return null;
+        }
+        if (!userInfoResponse || !userInfoResponse.ok) {
+            const msg = `Problem while completing login.\nPlease retry.\nError: ${userInfoResponse.statusText}`;
+            log(msg);
+            toast.error(msg, { autoClose: 10000 });
+            return null;
+        }
+        return await userInfoResponse.json();
     }
 
     /**