How to troubleshoot zoom Oauth2 integration with ngrok and cookie usage in a MERN stack application?

Question

I'm testing a local zoom app build. To be specific, zoom docs differentiate their app types, and what i want is a web view opened in the zoom client app view, therefore what ive developed is technically referred to as a "Zoom App" (more info here)

In the zoom docs, it mentions you cant setup the redirect urls to be localhost:8080 for example, it has to be set up with ngrok or a public url (more info here)

So ngrok is properly working (setup with cli command ngrok http 8080 ). I also tried this command with other values set for the --host-header flag. some attempts include --host=header=rewrite, --host-header=localhost, and --host-header=localhost:8080

Express server on :8080, react client on :3000

Express is linked into multiple oauth providers, google and zoom are 2 examples. google integration is working properly with the same oauth middleware, and route controllers on the api side (but google integration doesnt require the ngrok setup)

with zoom, and the ngrok setup, the request to the /callback route once the user confirms the zoom authorization, everything works fine, except the cookie that is returned by the server setting the header set-cookie is not set into the browsers application storage. nothing is registered in the cookies tab for oauth that goes through ngrok

the very next request confirms no cookie is stored, as there is no cookie: ... header in the request. interestingly, there are no errors on this cookie that is sent in the initial response headers of the servers /callback endpoint

Oauth Requests through Ngrok:

Oauth Requests without Ngrok:

Heres the controller that run after successful oauth verification/tokenization, triggered in both cases:

const oauth = catchAsync(async (req, res) => {
  const user = req.user;
  const tokens = await tokenService.generateAuthTokens(user);
  res
    .cookie('refreshToken', tokens.refresh.token, {
      maxAge: tokens.refresh.maxAge,
      httpOnly: true,
      sameSite: "none",
      secure: true,
      // domain: "8796-2603-6011-223-7a04-2830-4c71-6f20-54c0.ngrok.io" // test
    })
    .redirect(`${config.clientURL}/app`)
});

I tried manually setting the domain value of the cookie config. Some values i tried include localhost localhost:8080 some-ngrok.io , but to no avail

Heres the devserver webpack config, which usually has nothing extra, although i did also try with all for allowedHosts

But Im hopeful for a solution that works in both production and development

module.exports = {
  // Extend/override the dev server configuration used by CRA
  // See: https://github.com/timarney/react-app-rewired#extended-configuration-options
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // config.headers = {
      //   // "Cross-Origin-Embedder-Policy": "credentialless",
      //   // "Cross-Origin-Opener-Policy": "same-origin",
      //   // 'Cross-Origin-Resource-Policy': 'cross-origin',
      //   // 'Access-Control-Allow-Origin': '*'
      // };
      config.allowedHosts = ['all']

      return config;
    };
  },
};

So maybe this is just a development environment issue? After all, google oauth works fine in prod/dev, maybe its just ngrok. So i've tested this by adding my live api url to the oauth redirect/allowedhost in zoom app web portal and ran this in production, and got the same issue.

Any one else go through this with a zoom app?

How to troubleshoot zoom Oauth2 integration with ngrok and cookie usage in a MERN stack application?

0 Answers0