Add React-native support

Search terms you've used

• react
• react native
• url

Impacted package

Which packages do you think might be impacted by the bug ?

• solid-client-authn-browser
• solid-client-authn-node
• solid-client-authn-core
• oidc-client-ext
• Other (please specify): ...

Bug description

I am working on a react-native project and I am unsure which library to use.

When I installed @inrupt/solid-client-authn-node and built the project, it seems to build successfully until it attempts to launch the app. This is the error I receive at launch time:

Error: Unable to resolve module url from .../node_modules/@inrupt/solid-client-authn-node/dist/login/oidc/incomingRedirectHandler/AuthCodeRedirectHandler.js: url could not be found within the project or in these directories:

To get around this issue, I installed url, but this led to other missing module errors. I installed as many as I could until I hit a wall with the https module. I am unsure how to proceed with this or if this was even the proper course of action.

When I installed @inrupt/solid-client-authn-browser and built the project, it seems to build successfully and launches the app without an issue. However, when I invoke a library function (specifically login in this case), I receive this error:

ReferenceError: Can't find variable: localStorage

To get around this issue, I installed localstorage-polyfill, but this causes the following errors:

TypeError: Network request failed

Error: URLSearchParams.delete is not implemented

To Reproduce

Refer to Bug description section above

Expected result

A compiled react-native application that is able to invoke functions from Inrupt libraries

Actual result

Refer to Bug description section above

Environment

$ npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers

System:
    OS: macOS 12.1
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Memory: 243.38 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.18.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 74.0.63.48
    Chrome: 103.0.5060.114
    Firefox: 96.0.3
    Safari: 15.2
  npmPackages:
    @babel/core: ^7.12.9 => 7.17.10 
    @babel/runtime: ^7.12.5 => 7.17.9 
    @digitalcredentials/did-io: ^1.0.2 => 1.0.2 
    @digitalcredentials/did-method-key: ^2.0.3 => 2.0.3 
    @digitalcredentials/ed25519-signature-2020: ^3.0.2 => 3.0.2 
    @digitalcredentials/ed25519-verification-key-2020: ^3.2.2 => 3.2.2 
    @digitalcredentials/open-badges-context: ^0.1.0 => 0.1.0 
    @digitalcredentials/vc: ^1.1.2 => 1.1.2 
    @digitalcredentials/x25519-key-agreement-key-2020: ^2.0.2 => 2.0.2 
    @inrupt/solid-client-authn-browser: ^1.12.1 => 1.12.1 
    @interop/did-web-resolver: ^2.2.1 => 2.2.1 
    @react-native-community/eslint-config: ^2.0.0 => 2.0.0 
    @react-native-community/masked-view: ^0.1.11 => 0.1.11 
    @react-navigation/bottom-tabs: ^6.3.1 => 6.3.1 
    @react-navigation/native: ^6.0.10 => 6.0.10 
    @react-navigation/stack: ^6.2.1 => 6.2.1 
    @reduxjs/toolkit: ^1.8.1 => 1.8.1 
    @types/jest: ^26.0.23 => 26.0.24 
    @types/react-native: ^0.67.3 => 0.67.6 
    @types/react-native-vector-icons: ^6.4.10 => 6.4.10 
    @types/react-test-renderer: ^17.0.1 => 17.0.2 
    @types/uuid: ^8.3.4 => 8.3.4 
    @typescript-eslint/eslint-plugin: ^5.17.0 => 5.22.0 
    @typescript-eslint/parser: ^5.17.0 => 5.22.0 
    babel-jest: ^26.6.3 => 26.6.3 
    credentials-context: ^2.0.0 => 2.0.0 
    crypto-ld: ^6.0.0 => 6.0.0 
    did-context: ^3.1.1 => 3.1.1 
    ed25519-signature-2020-context: ^1.1.0 => 1.1.0 
    eslint: ^7.32.0 => 7.32.0 
    events: ^1.1.1 => 1.1.1 
    jest: ^26.6.3 => 26.6.3 
    json-canonicalize: ^1.0.4 => 1.0.4 
    jsonld-document-loader: ^1.2.1 => 1.2.1 
    localstorage-polyfill: ^1.0.1 => 1.0.1 
    metro-react-native-babel-preset: ^0.67.0 => 0.67.0 
    process: ^0.11.10 => 0.11.10 
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.1 => 0.68.1 
    react-native-app-auth: ^6.4.3 => 6.4.3 
    react-native-crypto: ^2.2.0 => 2.2.0 
    react-native-gesture-handler: ^2.4.1 => 2.4.2 
    react-native-get-random-values: ^1.8.0 => 1.8.0 
    react-native-randombytes: ^3.6.1 => 3.6.1 
    react-native-reanimated: ^2.8.0 => 2.8.0 
    react-native-safe-area-context: ^4.2.5 => 4.2.5 
    react-native-screens: ^3.13.1 => 3.13.1 
    react-native-splash-screen: ^3.3.0 => 3.3.0 
    react-native-vector-icons: ^9.1.0 => 9.1.0 
    react-redux: ^8.0.1 => 8.0.1 
    react-test-renderer: 17.0.2 => 17.0.2 
    readable-stream: ^1.0.33 => 1.0.33 
    stream-browserify: ^1.0.0 => 1.0.0 
    typescript: ^4.4.4 => 4.6.4 
    util: ^0.10.4 => 0.10.4 
    uuid: ^8.3.2 => 8.3.2 
    x25519-key-agreement-2020-context: ^1.0.0 => 1.0.0 
  npmGlobalPackages:
    cheerio: 1.0.0-rc.10
    did-cli: 0.6.1-0
    expo: 43.0.4
    fs: 0.0.1-security
    jsdom: 19.0.0
    minimist: 1.2.5
    npm: 6.14.17
    react-native: 0.68.1

Start by reproducing the reported failures with @inrupt/solid-client-authn-node and @inrupt/solid-client-authn-browser in the listed React Native environment. Inspect the generated login/oidc/incomingRedirectHandler/AuthCodeRedirectHandler.js entry point and the login function, then determine the React Native support scope. Done means a compiled React Native application can invoke the library functions without the reported module, storage, or URLSearchParams errors.