darylbuckle / react-oauth2-authcode-provider Goto Github PK

    this.tokenObtained = this.tokenObtained.bind(this)
    this.authenticationProps = {
        usePkce: false,
        authUrl: process.env.REACT_APP_AUTHORIZE_URL,
        tokenUrl: process.env.REACT_APP_ACCESS_TOKEN_URL,
        clientId: process.env.REACT_APP_CLIENT_ID,
        clientSecret: process.env.REACT_APP_CLIENT_SECRET,
        scope: ''
    }

    this.state = {
        tokenObject: null
    }
}

tokenObtained(token) {
    this.setState({tokenObject: token})
}

tokenAuth(token) {
    console.log('auth')
    console.log(token)
}

tokenRef(token) {
    console.log('ref')
    console.log(token)
}

tokenRec(token) {
    console.log('rec')
    console.log(token)
}

tokenError(error) {
    console.error(error)
}

render() {
    return (
        <AuthCodeProvider
            history={this.props.history}
            enableDebugLog={true}
            authenticationRequired={false}
            onReceiveAuthCode={(data) => this.tokenRec(data)}
            onTokenObtained={(data) => this.tokenObtained(data)}
            onGetAuthCode={(data) => this.tokenAuth(data)}
            onTokenRefreshed={(data) => this.tokenRef(data)}
            authenticationProps={this.authenticationProps}
      >
          <div>
            <p>You’ll now need to connect to Hoopla to grant Microsoft Teams access to your Hoopla data.</p>
            <button onClick={() => AuthCodeFunctions.doAuthorizationCodeFlow(this.authenticationProps)}>Connect To Hoopla</button>
          </div>
      </AuthCodeProvider>
    )
}

I receive `Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.` in `tokenObtained`. 

Compiled with problems:X

ERROR in ./node_modules/react-oauth2-authcode-provider/dist/index.modern.js 32:13-30

Module not found: Error: Can't resolve 'crypto' in '/node_modules/react-oauth2-authcode-provider/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:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }