Add React-native support

[kezike]

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

[NSeydoux]

Unfortunately, React-native is not currently supported by either libraries. It would probably be either to tweak the browser one than the node one to get there, but I suspect there would be some significant changes to do. We are currently working on a rework of the libraries that should make adding this support easier in the future though.

[kezike]

Thanks @NSeydoux for confirming that for me. Am I correct to assume that there are no other Inrupt auth and fetcher libraries that support react-native? If not, I may take a stab at adding this support in a fork of this repo if it’s not too messy and if your team does not plan to add this feature in the near future.

[NSeydoux]

No Inrupt library does at the moment, and I we won't be working on this soon unfortunately. I think @jaxoncreed was looking at this a while ago, but I don't recall in which codebase.

[jaxoncreed]

@kezike I built this library here https://github.com/o-development/solid-authn-react-native/. It does have limitations though. I'll eventually get around the fixing the bugs, but the interface should be the same, so if you can tolerate the bugs for now, you'll just need to upgrade it when I fix them.

[kezike]

Thanks for sharing this library @jaxoncreed! You mentioned in the README.md that this library has only been tested with Expo projects. I have had trouble using it in my vanilla react-native project. I may have to modify it to suit my needs.