inrupt / inrupt/solid-client-authn-js

`cross-fetch` overrides `window.fetch` with non-standard behaviour

Open
#173 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
77
Forks
49
Avg merge
18h 20m
Merged PRs (30d)
32

Description

Bug description

When using solid-auth-fetcher in a modern browser, the used fetcher should be provided by the browser itself. However, it seems that the polyfill returned by cross-fetch does not default to window.fetch, and has non-standard behaviour.

What prompted reporting this bug specifically is the fact that the obtained Response doesn't have a .body method to access its content as a ReadableStream.

To Reproduce
Steps to reproduce the behavior:

  1. If you don't have a React sandbox, create one (npx create-react-app my-app)
  2. Install cross-fetch
  3. Make sure useEffect is imported in App.js
  4. import the cross-fetch fetcher: import {fetch as crossFetch} from "cross-fetch"
  5. Add this code snippet to the App function:
useEffect(() => {
     const buildFetcher = async () => {
      let fetcher;
      if(typeof window !== undefined && typeof window.fetch !== undefined) {
        console.log("Using the window fetcher")
        fetcher = window.fetch;
      } else {
        console.log("Using cross-fetch")
        fetcher = crossFetch;
      }
      fetcher("https://ruben.verborgh.org/profile/")
      .then(response => response.body)
      .then(stream => stream.getReader())
      .then(reader => {
        return reader.read().then(function processText({ done, value }) {
          if (done) {
            console.log("Stream complete");
            return;
          }
          console.log(value);
          return reader.read().then(processText);
        });
      });
    }
    buildFetcher();
  });
  1. Run the app: npm run start

Expected behavior

  • The code prints "Using the window fetcher", and then the stream content (byte arrays). This is what happens with the provided code snippet.
  • When replacing fetcher("https://ruben.verborgh.org/profile/") with crossFetch("https://ruben.verborgh.org/profile/"), to force using the polyfill, then an error occurs, "TypeError: stream is undefined", because the response returned by cross-fetch does not implement the body method.

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Firefox 77.0.1, Chrome 83

Additional context

LDflex expects the response to be readable as a stream. Also, this might have been the root cause of #88, and all the discussion around non-standard headers.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the behavior in the App.js example with cross-fetch and the browser fetcher, then compare the returned Response.body and stream handling. Check the solid-auth-fetcher integration and the cross-fetch behavior described in the issue; done means the supported fetch path provides a readable response stream or the limitation is clearly documented and tested.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
api
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.