search

gardner / react-oauth2-pkce

React auth provider that works with AWS cognito PKCE🛡️🔒
49 stars 58 forks source link

Can't resolve 'crypto' in react-oauth2-pkce #33

Open smurfolan opened 2 years ago

smurfolan commented 2 years ago

I have a React.js application which is part of an oAuth2 architecture and in order to get a token it uses Authorization Code + PKCE flow as explained here.

The issue is that when I try to run the app npm start I get the following error: image

I tried with the suggested approach at many places to add the following in my package.json after devDependencies:

"browser": {
    "crypto": false
  }

but I still have the same issue. I am using Node.js 14.0.0

t-knapp commented 2 years ago

With webpack 5 you have to make "crypto" and "stream" available in the browser.

npm install stream-browserify crypto-browserify

Adjust resolving in your webpack config.

[...]
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
    }
}

Works on Node 14.x and 16.x

mdizdare commented 2 years ago

My team received the same error late last week, which was after the fix for this issue was identified here. Is there a timeline during which this fix will be incorporated into the npm package to install other components as well? Thanks.

shiv0808 commented 2 years ago

Hi @gardner @t-knapp Question...May i know the exact file name(with extension) where we have to add this webpack config? Also can you please incorporate the fixes for the above issue into the NPM package as i am currently working on a project where this issue is becoming a roadblock for me...Thanks!!!!

t-knapp commented 2 years ago

Hi @shiv0808,

from my package.json

"dependencies": {
  ...
  "crypto-browserify": "^3.12.0",
  "stream-browserify": "^3.0.0",
  ...
}

from my webpack.js config file

module.exports = (env, argv) => ({
    mode: ...,
    plugins: [...],
    module: {
        rules: [...]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
        }
    }
});
shiv0808 commented 2 years ago

Hi @shiv0808,

from my package.json

"dependencies": {
  ...
  "crypto-browserify": "^3.12.0",
  "stream-browserify": "^3.0.0",
  ...
}

from my webpack.js config file

module.exports = (env, argv) => ({
    mode: ...,
    plugins: [...],
    module: {
        rules: [...]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
        }
    }
});

Hi @t-knapp , i am really not sure which webpack.js you are referring to.I have 2 of them in my application:

  1. node_modules\webpack\lib
  2. node_modules\webpack\bin

do let me know which one are u referring to..Thanks!!

t-knapp commented 2 years ago

Please do not change some code in node_modules folders ever. This is where your depenencies are installed to.

Please read about how to configure webpack in a prober way: https://webpack.js.org/configuration/

shiv0808 commented 2 years ago

Please do not change some code in node_modules folders ever. This is where your depenencies are installed to.

Please read about how to configure webpack in a prober way: https://webpack.js.org/configuration/

Thanks you very much for your effort @t-knapp :) ✌️ ..I have created a new file webpack.config.js as mentioned under that link and added the fallback as you mentioned above. But unfortunately the same error still persists for me...Not sure if my application is able to recognize the webpack.config.js file. Also need to ask about this line of code: proxy: { // proxy URLs to backend development server '/api': 'http://localhost:3000' }, 

If you could let me know , do we have to change this proxy in any way that it fits to my application as well.Just sharing whole error in case it makes you understand better:

**_ERROR in ./node_modules/react-oauth2-pkce/dist/index.modern.js 2:0-49

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\ssriv112\react-sso-code\node_modules\react-oauth2-pkce\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

christoph-bittmann commented 2 years ago

Hi there! I like to use these great library in my project. Unfortunately I also was stopped by these error message. As t-knapp adviced, I created a webpack config file and put the fallback option in there. But it doesn't work :(

Could anyone give me any hint how to solve these error? I would also be happy if I could contribute a solution by making a pull request or so.

DraconPern commented 2 years ago

I ran into the same issue. According to https://github.com/facebook/create-react-app/issues/11756 it will be good if the library doesn't rely on nodejs polyfills..

christoph-bittmann commented 2 years ago

My pullreqest will solve these problem, feel free to review changes or use fork https://github.com/christoph-bittmann/react-oauth2-pkce