How to resolve a Cors error when trying to get an authentication token using authorisation code grant in Next.js

Question

I have an app where im trying to send a generated pdf to get a signature. Pretty straightforward. I got the authentication working in postman, but when I try it in code, I get this error:

Access to fetch at 'https://account-d.docusign.com/oauth/token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I can retrieve the oauth code with this:

  if (router.asPath !== router.route) {
      setOAuthCode(new URLSearchParams(window.location.search).get("code"));
    }

but in a seperate use effect, i try to submit this oAuth code, it falls appart:

useEffect(() => {
    const getAuthToken = async () => {


      const tokenUrl = "https://account-d.docusign.com/oauth/token";
      const encodedSecret = btoa(
        `${process.env.NEXT_PUBLIC_DOCUSIGN_INTEGRATION_KEY}:${process.env.NEXT_PUBLIC_DOCUSIGN_CLIENT_SECRET}`
      );

      const headers = {
        "Authorization": `Basic ${encodedSecret}`,
        "Content-Type": "application/x-www-form-urlencoded",
      };
      const body = new URLSearchParams({
        grant_type: "authorization_code",
        code: oAuthCode,
      });

      const response = await fetch(tokenUrl, {
        method: "POST",
        headers: headers,
        body: body,
      });

      if (!response.ok) {
        throw new Error(
          `Failed to get access token: ${response.status} ${response.statusText}`
        );
      }
      const data = await response.json();
      setAuthToken(data.access_token);
    };
    getAuthToken();
  }, [oAuthCode]);

Any kung fu would be greatfully accepted

Answer 1

At this point in time (July 2024) you cannot use Auth Code Grant with CORS for Docusign. You have to use Implicit Grant, which means that you have to go back to the Apps and Keys page and change how your IK (Integration Key, or clientID) is configured. With implicit grant, you won't have to make this API call at all.

Find your IK and change this Yes/No question to say No. Because you cannot store a secret on the client with CORS: