clerk/javascript

@clerk/clerk-js throw exception in headles non-browser environment

mario-jerkovic opened this issue · 0 comments

Preliminary Checks

Reproduction / Replay Link

https://github.com/mario-jerkovic/clerk-javascript-node-issue-repro

Publishable key

pk_test_dGVhY2hpbmcta29pLTkuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

While integrating clerk-js in a headless environment and utilizing the load function on the Clerk instance, I encountered an issue that leads to the misidentification of valid browsers. This problem seems to originate from the isValidBrowser function defined in the browser.ts file within the @clerk/shared package. The function's current implementation incorrectly handles the window check check, impacting the ability to correctly identify user-driven browsers versus automated or bot-driven ones.

Steps to reproduce:

  1. Import Clerk from @clerk/clerk-js/headless
  2. create Clerk instance
  3. call load method

Expected behavior:

Load method successfully resolves and developer is able to utilize clerk client methods

Actual behavior:

Load method throws as isValidBrowserOnline calls isValidBrowserand in that function before it's check if we are in browser env. window object is used, here

Screenshot 2024-03-01 at 13 54 23

Environment

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 79.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    bun: 1.0.26 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.3.1
  npmPackages:
    @clerk/clerk-js: ^4.70.1 => 4.70.1
    ts-node: ^10.9.2 => 10.9.2
    typescript: ^5.3.3 => 5.3.3