Upon login on phone browser the error TypeError: Crypto.current is undefined occurs when trying to get a auth token

[Sbearlin]

I seem to be getting an error when trying to create a login flow with User Authorization.
Here is the step by step of what i did:

1. I made a simple solution of a vite react app by doing the following command:
   npm create vite@latest my-vue-app --template react-swc-ts
2. After creation I install the repo with npm i @spotify/web-api-ts-sdk
3. Add the following code to the App.tsx file:

const sdk: SpotifyApi = SpotifyApi.withUserAuthorization(
  "CLIENT-ID-HERE",
  "http://localhost:5173",
  ["user-read-playback-state"],
);
function App() {

  const getUser = async () => {
    try {
      const response = await sdk.currentUser.profile();
      console.log(response);
    } catch (error) {
      console.error("Error fetching current playback state:", error);
    }
  };

  return (
    <>
      <button onClick={() => getUser()}>Get current user</button>
    </>
  );
}

export default App;

4. Run the development server with npm run dev which runs vite --host
5. Click the button Get Current User and observe the following error in the console:

Module "crypto" has been externalized for browser compatibility. Cannot access "crypto.webcrypto" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.  11 [crypto:9:14](browser-external:crypto)

No access token found, authenticating now. 11 [SpotifyApi.ts:81:24](http://192.168.86.223:5173/node_modules/@spotify/web-api-ts-sdk/src/SpotifyApi.ts)

null 11 [App.tsx:20:14](http://192.168.86.223:5173/src/App.tsx)

Uncaught (in promise) TypeError: Crypto.current is undefined
    generateCodeChallenge AccessTokenHelpers.ts:56
    redirectToSpotify AuthorizationCodeWithPKCEStrategy.ts:66
    redirectOrVerifyToken AuthorizationCodeWithPKCEStrategy.ts:60
    token AuthorizationCodeWithPKCEStrategy.ts:31
    getOrCreate GenericCache.ts:31
    getOrCreateAccessToken AuthorizationCodeWithPKCEStrategy.ts:28
    makeRequest SpotifyApi.ts:79
    getRequest EndpointsBase.ts:8
    profile CurrentUserEndpoints.ts:25
    getUser App.tsx:19
    onClick App.tsx:38
    React 13
    <anonymous> main.tsx:6
11 [AccessTokenHelpers.ts:56:23](http://192.168.86.223:5173/node_modules/@spotify/web-api-ts-sdk/src/auth/AccessTokenHelpers.ts)

For some reason it seems to try to use the node modules for a node server, but not a flow that is working for a web browser, where there isn't the above dependency.
I'm unsure what could be the solution, as I've tried to take the react example as well, with no luck as well.

Am I missing some documentation on how to get into a flow that is browser friendly, and to that extend, phone browser friendly?

This has been tested on Firefox and Chrome on an Android