Problem connecting to API behind ZeroTrust/Warp from localhost running Next

Hello everyone,

I’m a front-end developer and we have API endpoints behind Zero Trust. I can connect to the endpoint directly using WARP after authenticating I can see a CF_Authorization and CF_Session cookies are set and that’s great.

However we also need to test code locally and we do this running next on localhost:9001 which connects to these endpoints at e.g. api.example.com.

I’ve configured axios to route requests from the server and attach CF-Access-Client-Id and CF-Access-Client-Secret headers pulled from Doppler and set in process.env and this seems to work during build. This only happens on the server, these headers are not leaked to the client.

However in browser all API requests fail. I see a 302 to url’s like this https://DOMAIN.cloudflareaccess.com/cdn-cgi/access/login/ENDPOINT?kid=XXXX and then subsequent 302 with a response header like this: https://ENDPOINT/cdn-cgi/access/authorized?nonce=YYYY and finally a 400 with a request like this https://ENDPOINT/cdn-cgi/access/authorized?nonce=YYYY

The original requests all have a CF_AppSession cookie (but no CF_Authorization cookie). The 302 redirection attaches CF_Authorization & CF_Session request cookies and then the 400 has no request cookies :person_shrugging:

I don’t really know how this has been configured at the Zero Trust side and Devops seem to think this is a front-end problem?

I feel like I’m going round in circles :confused: - hopefully someone can help me understand the following:

  • Is it even possible to access an endpoint behind Zero Trust via localhost like this?
  • Am I doing something wrong and / or is there something I should be testing passing into or out of Axios requests?
  • Could this be an issue with my front-end code or something at the Cloudflare level?

Thanks so much in advance for any help / suggestions :pray:

1 Like

You need the CF_Authorization cookie in the request, in contains needed information like the kid and aud values I believe.