truffle-box/react-auth-box

Truffle, Webpack, React, Redux boilerplate with routing and authentication via a smart contract.

⚠️ No new changes will be made to this box! Truffle no longer actively maintains official boxes that encourage production use of their included contracts. We encourage you to take a look at other boxes in our listing that offer authentication.

React, Redux and Authentication Truffle Box

In addition to Webpack and React, this box adds: react-router, redux and redux-auth-wrapper for authentication powered by a smart contract. Great for building your own auth system.

Installation

1. Install Truffle globally.

   npm install -g truffle

2. Download the box. This also takes care of installing the necessary dependencies.

   truffle unbox react-auth

3. Run the development console.

   truffle develop

4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle.

   compile
   migrate

5. Run the webpack server for front-end hot reloading (outside the development console). Smart contract changes must be manually recompiled and migrated.

   // Serves the front-end on http://localhost:3000
   npm run start

6. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console.

   // If inside the development console.
   test
   
   // If outside the development console..
   truffle test

7. Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.

   // Run Jest outside of the development console for front-end component tests.
   npm run test

8. To build the application for production, use the build command. A production build will be in the build_webpack folder.

   npm run build

FAQ

• How do I use this with the EthereumJS TestRPC?

  It's as easy as modifying the config file! Check out our documentation on adding network configurations. Depending on the port you're using, you'll also need to update line 34 of src/util/web3/getWeb3.js.

• Why is there both a truffle.js file and a truffle-config.js file?

  truffle-config.js is a copy of truffle.js for compatibility with Windows development environments. Feel free to it if it's irrelevant to your platform.

• Where is my production build?

  The production build will be in the build_webpack folder. This is because Truffle outputs contract compilations to the build folder.

• Where can I find more documentation?

  This box is a marriage of Truffle and a React setup created with create-react-app. Either one would be a great place to start!

react-auth-box's Issues

Redux-devtools not supported by testrpc

'When loading the page with redux-devtools, the page outputs errors and does not render' as per trufflesuite/ganache-cli-archive#300

Error Received

The console error from truffle-box-auth is:
Error: Error: RPC method personal_listAccounts not supported.

Fix

Disable the redux-devtools import by removing __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || from store.js

Injected web3 is not properly detected

When using this with MetaMask the check for typeof web3 !== 'undefined' fails in getWeb3.js causing fallback to local web3

Error Received

console.log of 'No web3 instance injected, using Local web3.' even though MetaMask is enabled.

Fix:

Replace usage of the local web3 with window.web3 IE:

window.addEventListener('load', function(dispatch) {
    var results

    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof window.web3 !== 'undefined') {
      // Use Mist/MetaMask's provider.
      results = {
        web3Instance: new Web3(window.web3.currentProvider)
      }

      console.log('Injected web3 detected.');

      resolve(store.dispatch(web3Initialized(results)))

apackin/groupBuy@a6881c5

Run error

I have just downloaded the React-auth-box and followed all the steps. I'm using testrpc for testing. However, I'm getting the following errors while doing truffle test:

1. Error: VM Exception while processing transaction: invalid opcode
2. Error: SimpleStorage has not been deployed to detected network (network/artifact mismatch)

I'm getting a similar error while testing the webpack server:

• Error: Authentication has not been deployed to detected network (network/artifact mismatch)

Testrpc appears to be connected to my dApp, but at the end displays the following error:
Transaction: 0xe54ab4cc933946de26a0176ac25c3a4e79ab752efa006054bdd4b30fb5a74d3f
Gas usage: 4712388
Block Number: 76
Block Time: Thu Jul 13 2017 13:12:02 GMT+0200 (CEST)
Runtime Error: invalid opcode

Any help is appreaciated. Thanks.

Leopoldo.

web3.toUtf8 is not a function

I got error "TypeError: web3.toUtf8 is not a function" in LoginButtonActions.js.
Maybe, web3.js(ver1.0.0) made toUtf8() method deprecated.(https://web3js.readthedocs.io/en/1.0/web3-utils.html?highlight=toutf8#hextoutf8)
So I fixed this problem like below.
I wish you change source code.

var userName = web3.toUtf8(result)

↓

var userName = web3.utils.hexToUtf8(result)

Error

I getting an error at each page. What happens?

https://github.com/MetaMask/faq/....think-of-metamask-as-a-light-client

Uncaught Error: The MetaMask Web3 object does 
not support synchronous methods like 
eth_mining without a callback parameter. 
See  for details.
    at MetamaskInpageProvider.send (inpage.js:233)
    at s.send (inpage.js:14308)
    at r.mining (inpage.js:14308)
    at derez (<anonymous>:2:6079)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)

remove unused dispatch in callback

returning function with dispatch while you are not dispatching the actual function is redundant.
I don't think it makes sense to have undefined dispatch as a parameter since you are not even using it.
https://github.com/truffle-box/react-auth-box/blob/master/src/util/web3/getWeb3.js#L14

Contract Deployment

Fixed

deploy to heroku

Hi, I tried to deploy react-auth box to Heroku but failed. Any advice or enhancement for this.

Unbox error

Windows 10 settings:
Truffle v3.4.6 (core: 3.4.6)
Solidity v0.4.13 (solc-js)
npm version
{ 'react-auth-box': '0.1.0',
npm: '5.3.0',
ares: '1.10.1-DEV',
cldr: '31.0.1',
http_parser: '2.7.0',
icu: '59.1',
modules: '57',
node: '8.1.3',
openssl: '1.0.2l',
tz: '2017b',
unicode: '9.0',
uv: '1.12.0',
v8: '5.8.283.41',
zlib: '1.2.11' }

$ truffle unbox react-auth
Downloading...
Unpacking...
Setting up...
Error: Command failed: npm install
npm ERR! path C:\projects\dapps\truffle-react\node_modules\fsevents\node_modules\dashdash\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'C:\projects\dapps\truffle-react\node_modules\fsevents\node_modules\dashdash\node_modules'
npm ERR! { Error: EPERM: operation not permitted, scandir 'C:\projects\dapps\truffle-react\node_modules\fsevents\node_modules\dashdash\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, scandir 'C:\projects\dapps\truffle-react\node_modules\fsevents\node_modules\dashdash\node_modules'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'scandir',
npm ERR! path: 'C:\projects\dapps\truffle-react\node_modules\fsevents\node_modules\dashdash\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Rocky\AppData\Roaming\npm-cache_logs\2017-07-29T12_20_11_224Z-debug.log

at ChildProcess.exithandler (child_process.js:270:12)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
at maybeClose (internal/child_process.js:897:16)
at Socket.stream.socket.on (internal/child_process.js:340:11)
at emitOne (events.js:115:13)
at Socket.emit (events.js:210:7)
at Pipe._handle.close [as _onclose] (net.js:549:12)

Jest tests fail

After unboxing, then compiling and migrating my contracts, Jest tests fail on npm run test

node v7.1.0
truffle v3.4.11
solidiy v0.4.15

 FAIL  src/App.test.js
  ● renders without crashing

    Invariant Violation: Could not find "store" in either the context or props of "Connect(HiddenOnlyAuth(Component))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(HiddenOnlyAuth(Component))".

      at invariant (node_modules/invariant/invariant.js:42:15)
      at new Connect (node_modules/react-redux/lib/components/connectAdvanced.js:134:33)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:292:18
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:73:12)
      at ReactCompositeComponentWrapper._constructComponentWithoutOwner (node_modules/react-dom/lib/ReactCompositeComponent.js:291:16)
      at ReactCompositeComponentWrapper._constructComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:282:19)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:185:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35)
      at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44)
      at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35)
      at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44)
      at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35)
      at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44)
      at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35)
      at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:102:32)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:141:20)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:124:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:141:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:60:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:95:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:317:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:399:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:420:23)
      at Object.<anonymous>.it (src/App.test.js:7:48)

 FAIL  scripts/test.js
  ● Test suite failed to run

    SyntaxError: Identifier 'jest' has already been declared

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:442:13)

Test Suites: 2 failed, 2 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.729s
Ran all test suites.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

Invalid JSON RPC response: ""

NB: this issue was opened initially at Truffle by @Pascal1990 - relocating it here because it looks like it's specific to the react-auth-box (although it may not be).

• I've asked for help in the Truffle Gitter before filing this issue.

---

Issue

What the issue is, in broad strokes.

Steps to Reproduce

• install the truffle react-auth-truffle Unbox
• configuratre the truffle.js

module.exports = {
  migrations_directory: "./migrations",
  networks: {
    development: {
      host: "localhost",
      port: 8545,
      network_id: "*" // Match any network id
    }
  }
};

I using "ganache-cli" on the same port, but I try to downloag "geth.exe --rpc" and run on the same port 8545 but still not workin

// Get current ethereum wallet.
I thinks the problem was here in this function

web3.eth.getCoinbase((error, coinbase) => {
        // Log errors, if any.
        if (error) {
          console.error(error);
        }

Please provide the shortest amount of steps to reproduce your issue.

Expected Behavior

the login and signup should work

What you expected to happen.

Actual Results : inside the console

Error: Invalid JSON RPC response: ""
Stack trace:
InvalidResponse@http://localhost:3000/static/js/bundle.js:54327:17
HttpProvider.prototype.sendAsync/request.onreadystatechange@http://localhost:3000/static/js/bundle.js:59498:26
SignUpFormActions.js:27
Error: Invalid JSON RPC response: ""
errors.js:35

What actually happened. Please give examples and support it with screenshots, copied output or error messages.

Environment

• Operating System: windows
• Truffle version: last version
• Ethereum client:
• node version:
• npm version:

Why does it cost to login?

CryptoKitties didn't charge a transaction fee to sign in, so why does this?

Is this built differently?

Login doesn't work

I've sign up and login button doesn't do anything. Is there anything I'm missing?
I've added a random name on signup and nothing happens when I click login. I do get the popup from MetaMask to submit the transaction once I click signup, i submit then nothing happens and login doesn't do anything...

Any suggestions are greatly appreciated.
Many thanks

Synchronous XMLHttpRequest on the main thread is deprecated

httpprovider.js:61 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

How can I get rid of this by setting web3 to async?

Have tried by passing a callback function in the call to web3's functions as suggested by the web3 docs but is not working.

Will appreciate any help.

Warning: Throw is deprecated in favour of "revert()", "require()", and "assert()"

I have raised a pull request that fixes this warning. It can be found here.

Update contract constructors

Solidity has deprecated defining constructors with the same name as the contract. This warning applies to Ownable.sol and Killable.sol.

Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.
  function Ownable() {
  ^ (Relevant source part starts here and spans across multiple lines).
,/home/josh/dev/react-auth-box/contracts/zeppelin/ownership/Ownable.sol:13:3: Warning: No visibility specified. Defaulting to "public". 
  function Ownable() {
  ^ (Relevant source part starts here and spans across multiple lines).
,/home/josh/dev/react-auth-box/contracts/zeppelin/ownership/Ownable.sol:22:3: Warning: No visibility specified. Defaulting to "public". 
  function transferOwnership(address newOwner) onlyOwner {
  ^ (Relevant source part starts here and spans across multiple lines).
,/home/josh/dev/react-auth-box/contracts/zeppelin/lifecycle/Killable.sol:12:3: Warning: No visibility specified. Defaulting to "public". 
  function kill() onlyOwner {
  ^ (Relevant source part starts here and spans across multiple lines).

Deploy to ropsten

Hi, I would deploy the box to ropsten. the code works fine in localhost but I got his error in ropsten:

The contract is deployed but impossible to connect to via js code

vRtx5LtC6D1enY0g6x0k:1 POST https://ropsten.infura.io/xxxxxxx
main.js:36 Error: Invalid JSON RPC response: ""
at Object.InvalidResponse (inpage.js:1)
at XMLHttpRequest.r.onreadystatechange (inpage.js:1)

Here is the begeninng of login function :

let web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/vRtx5LtC6D1enY0g6x0k"));

/////let web3 = store.getState().web3.web3Instance
web3.eth.defaultAccount = web3.eth.accounts[0];

// Double-check web3's status.
if (typeof web3 !== 'undefined') {

  // Using truffle-contract we create the authentication object.
  const authentication = contract(AuthenticationContract)

  /////const authentication =  web3.eth.contract(AuthenticationContract,'0x3661a5a703696eb2702f9feba51da416e97a39a2')

How to receive web3 in Dashboard component?

How can the web3 object stored in the redux store store be retrieved from inside the Dashboard Component?

Pass web3 to Dashboard as a props from inside index.js?

Cannot run

I try to run it inside docker image.
But I receive error

Fetching Web3 init on main thread

If I try to get Web3 object not using Redux store, it works perfectly fine and I don't get any errors:
if I use it with 'https://ropsten.infura.io/metamask'
I cannot initialize it, I get errors, 405 POST , Invalid JSON rpc response
I assume it has something to do with the way web3 is being fetched.
I guess Redux store is trying to use it on main thread and for some reason is not ok to do this way.
httpprovider.js:61 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated

The same thing happens when I just run this repo with metamask.
It breaks initialization of web3.

Error: Invalid JSON RPC response: {"id":1,"jsonrpc":"2.0"} 

Truffle unbox error

Hi,

My truffle version is 3.0.5. On running 'truffle unbox react-auth', I get the following :

Downloading...
Error: A Truffle project already exists at the destination. Stopping to prevent overwriting data.
at /home/shivam/.npm-global/lib/node_modules/truffle/build/cli.bundled.js:206243:13
at
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:611:11)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:578:3

Any idea what could be going wrong?

Can I make my own truffle box?

Hi, I don't like the way react-auth-box is structured and I'd like to add new defaults.

Can I create my own truffle box so that it can be installed from the command line?

Thanks!!! :)

Cannot assign to read only property 'authData' of object '#<Object>'

Remove this line:

this.props.authData = authData

in Dashboard.js...

it causes:

TypeError: Cannot assign to read only property 'authData' of object '#'

Authentication not working

Authentication, signing up doesn't seem to work for me.
This might be the issue: https://github.com/truffle-box/truffle-box-auth/blob/master/contracts/Authentication.sol#L27

I believe signup and update shouldn't have the payable modifier.