joshgeller/react-redux-jwt-auth-example

Sample project showing possible authentication flow using React, Redux, React-Router, and JWT

react-redux-jwt-auth-example's Issues

Cannot GET /protected on Refresh or manual URL entry

Thanks for putting this example together!! this has been a massive help!!

There's an issue with redux-router, when use use a link node to navigate, there's no issues, but if you attempt to enter the url localhost:3000/protected or hit refresh you get "Cannot GET /protected".

I guess this issue could be merged with "Rewrite using redux-simple-router" as i guess react-router-redux is the optimal approach?

Is there a quick fix in the meantime?

I'm a bit of a noob but if no one minds I could try to write a react-router-redux fork?

.env file not found

there is an error

code format.

react-redux-jwt-auth-example/src/actions/index.js

Line 2 in 8e1e58f

import {LOGIN_USER_REQUEST, LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER, FETCH_PROTECTED_DATA_REQUEST, RECEIVE_PROTECTED_DATA} from '../constants';

i think formatting it this way could be better, for readability

import {
  LOGIN_USER_REQUEST,
  LOGIN_USER_FAILURE,
  LOGIN_USER_SUCCESS,
  LOGOUT_USER,
  FETCH_PROTECTED_DATA_REQUEST,
  RECEIVE_PROTECTED_DATA
} from '../constants';

How are you accessing localStorage?

Josh, I cloned this down. How are you getting access to localStorage? Is that from phantom? When I try that in my react project I get undefined so figure it's gotta be phantom (or I could use casper probably):

import 'babel-core/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './containers/Root';
import configureStore from './store/configureStore';
import {loginUserSuccess} from './actions';

const target = document.getElementById('root');
const store = configureStore(window.__INITIAL_STATE__);

const node = (
    <Root store={store} />
);

let token = localStorage.getItem('token');
if (token !== null) {
    store.dispatch(loginUserSuccess(token));
}

ReactDOM.render(node, target);

A link for the code

Could you please add a link to the appropriate file and code line for each of these steps?

1. The original action creator parses the server response and dispatches success or failure actions accordingly (link here)
2. Success actions trigger an update of the auth state, passing along the token and any decoded data from the JWT payload (link here)
3. A higher-order authentication component receives the new auth state as props (link here)

comparison to use of "onEnter"

hi josh,

thanks for the example!

wondering if you can contrast your approach to that suggested by the rackt guys:

http://stackoverflow.com/a/32905508/2371903
https://github.com/rackt/react-router/tree/master/examples/auth-flow

best,
tony.

How can i run app ?

Hi,
I am new in react and want to explore your example.

I have followed below steps.

Running the Example Locally

1. git clone https://github.com/joshgeller/react-redux-jwt-auth-example.git
2. npm install
3. export NODE_ENV=development
4. node server.js

I have cloned repo and run npm install, but didn't get another two commands.

Can you please let me know how and where i can set export NODE_ENV=development and how to use node server.js.

Thanks.
Viren Dave

node server.js

$ node server.js
module.js:339
throw err;
^

Error: Cannot find module './build/webpack/undefined'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)

Uncaught Error: imports[1] for react-transform-catch-errors does not look like a React component.

I encountered the error Uncaught Error: imports[1] for react-transform-catch-errors does not look like a React component.
I resolved the issue by removing the ^ from "redbox-react": "^1.0.4", in package.json, as mentioned in the SO post.
http://stackoverflow.com/questions/37895944/react-transform-catch-errors-does-not-look-like-a-react-component#

Shall I issue a PR? Or is there a better solution?

How to use react-toolbox?

Hi, thanks for putting this together. While there are a pile of starter projects and react/redux boilerplate repos out there, my hope is to start with this one on a project as I'm interested in baking the security in as early as possible.

I've titled this issue exactly the same as this one in a different repo, as it's the exact same problem - I'm trying to implement react-toolbox and am getting lots of errors. @davezuko does a good job of documenting the required fixes for his repo. I tried a few things including adding...

webpackConfig.resolve = { extensions: ['', '.jsx', '.scss', '.js', '.json'], modulesDirectories: [ 'node_modules', path.resolve(__dirname, './node_modules') ] };

...to /build/webpack/development.js. This seemed to get rid of all the errors but one:

{ [Error: ENOENT: no such file or directory, open '.env'] errno: -2, code: 'ENOENT', syscall: 'open', path: '.env' }

Beyond that error, there is still the loading of the .scss to deal with.

I'm new to webpack and am guessing that the webpack config is chosen from the environment variable, but beyond that I'm unsure how to properly hook up react-toolbox. Putting the resolve block above in each deployment file doesn't seem very DRY for starters. Can you provide some guidance given the way this project's webpack configuration is set up?

Any help would be much appreciated.
Thanks

login doesn't work

Upon attempting to login I get:

"Authentication Error: 404 Not Found"

This is after:

git clone
cd 
npm install 
npm run dev

Why do you call a payload data a token?

Here is an operation from https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/actions/index.js#L63.

In decoded varibale in not a token. It is only a payload object which is only one third of a token.

let decoded = jwtDecode(response.token); // decoded in not a token. It is a payload object only!
dispatch(loginUserSuccess(response.token));

And in loginUserSuccess action you have:

export function loginUserSuccess(token) {
  localStorage.setItem('token', token); // why token? It is not a token, it is a payload object
  return {
    type: LOGIN_USER_SUCCESS,
    payload: {
      token: token
    }
  }
}

Why do you call a payload data a token?

require('react/addons') is deprecated

Receiving the following warning in the Chrome dev console:
Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

AuthenticatedComponent#checkAuth uses previous props when called from `componentWillReceiveProps`

If the isAuthenticated state changes, checkAuth is called but uses the previous props. checkAuth should accept props as a parameter.

storing tokens in local storage can lead to Cross-Site Scripting XSS attacks

You should store them in secure, HTTPS-only cookies. This prevents Cross-Site Scripting XSS attacks.
How to Use JWTs Securely

.env file not found

I'm working on this manual

1. git clone https://github.com/joshgeller/react-redux-jwt-auth-example.git
2. npm install
3. export NODE_ENV=development
4. node server.js

and get this trouble after step 4

➜ workspace: git clone https://github.com/joshgeller/react-redux-jwt-auth-example.git ➜ workspace: cd react-redux-jwt-auth-example ➜ react-redux-jwt-auth-example git:(master): npm install ... ➜ react-redux-jwt-auth-example git:(master): export NODE_ENV=development ➜ react-redux-jwt-auth-example git:(master): node server.js { Error: ENOENT: no such file or directory, open '.env' at Object.fs.openSync (fs.js:558:18) at Object.fs.readFileSync (fs.js:468:33) at Object.config (/Users/user/workspace/react-redux-jwt-auth-example/node_modules/dotenv/lib/main.js:30:37) at Object.<anonymous> (/Users/user/workspace/react-redux-jwt-auth-example/config/index.js:5:8) at Module._compile (module.js:571:32) at normalLoader (/Users/user/workspace/react-redux-jwt-auth-example/node_modules/babel-core/lib/api/register/node.js:199:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/user/workspace/react-redux-jwt-auth-example/node_modules/babel-core/lib/api/register/node.js:216:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) errno: -2, code: 'ENOENT', syscall: 'open', path: '.env' } ==> 🌎 Listening on port 3000. Open up http://localhost:3000/ in your browser. webpack built 54cbad467471f8bcf70c in 5390ms

Unit testing components

I was surprised to see that the boilerplate only contained unit tests for the actions, with no test coverage at the component level.

Then I started writing the component tests..

Does anyone have some boilerplate samples that they have gotten to work unit testing the smart components?

I'm brand new to React (this is my first real project) but I really would like to get unit tests working for components. I've spent some time researching it but all the responses were pretty disjointed to me, and I really just want a basic example of how to unit test a component, a component with this stuff at the bottom of it:

reactMixin(TimeBox.prototype, React.addons.LinkedStateMixin);

const mapStateToProps = (state) => ({
edit : state.storeHours.edithours,
hours : state.storeHours.hours
});

const mapDispatchToProps = (dispatch) => ({
actions : bindActionCreators(actionCreators, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(TimeBox);

Currently when I run my test against this component I receive:
TypeError: Cannot read property 'LinkedStateMixin' of undefined

This would be akin to testing the ProtectedView component from the boilerplate.

Thank you very much in advance!

why index.js is needed in each folder

Hi,

I am not sure why we need a index.js in each of the folders (actions, routes, views).

For ex: we have views/HomeView.js and we are doing export default in it.

Why do we need to explicitly do export HomeView in index.js ??

Thanks

Why do you duplicate functionality? Why don't you use Presentational Components?

Did you read this? http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components

It looks like you didn't.

Why do you combine Presentational Component with Container Component? If you do intentionally, could you please elaborate on your decission? Or just tell us you coudn't find any better way to design the auth system.

You have two chained Container Components. And for both of them you call connect. And both of them make web requests. Don't you think that they duplicate the same functionality?

ProtectedView component is not a view (or presentation component). It is a Container Component.
requireAuthentication function returns AuthenticatedComponent which is a Container Component as well.

And then you do this. You pass one Container Component to another Container Component and make both of them do web requests:

requireAuthentication(ProtectedView)

Why?

User is always redirected

I have used the HOC component to wrap a protected route. However, I am having an issue with it because it seems to be just redirecting the user to the login page, since it immediately checks the isAuthenticated flag before the response from the server has resolved. How have you managed to work around this?

Should AuthenticatedComponent be a container components?

Hi, I'm new to react. I've started to learn it a few days ago and as I wrote in the title and considering that a component should be dumb and shouldn't be aware of the redux state, why isn't it in the containers folder?

Can I ask that how is it going about your new version of this respository

Look forward to your soonest reply.

Suggestion: use of package.json instead of index.js

Hi All

I'd like to propose the use of package.json instead of index.js (i've already done this on my copy of the project.)

I found it was confusing having four files open all called index.js

so for example by renaming to containers.js and creating the file package.json with
{ "name": "containers", "version": "0.0.0", "private": true, "main": "./containers.js" }

It's far less confusing.

Other tweaks for clarity is using the naming convention "<

>Title", i.e.
ViewHome, ViewLogin...
ReducerAuth, ReducerData...

Use express-jwt

Using express-jwt would reduce the amount of the boilerplate code in the ./server.js.

https://github.com/auth0/express-jwt

how to use it with getcomponent using system import?

Make reducers pure

Thanks for this awesome example!

I noticed one small detail that could be improved. As far as I understand redux, side effects should be moved to action creators, instead of happening in the reducer. For this reason all modifications to localStorage should happen in the action creators (in the actions folder) instead of in the reducer.

Is there a reason you decided to do it another way?
Would you accept a PR changing this? Not sure whether I get around to doing it though.

How to handle different redirects for different states of user

I am trying to find a good system to redirect to /login for unauthenticated requests, but my app requires 2 stages of auth and I want to have a different redirect depending on how the JWT decodes, or on a status code.

For example, a user can register his/her email/password to login and generate a jwt. That's stage one, but then they need to do another step of registration by joining or creating a group. If they don't belong to a group they should get redirected to this /register route. Ideally if a user ever leaves the group they'll be redirected to this register route upon any subsequent request.

Is it possible to handle this with this module? Thanks!

Rewrite using redux-simple-router

This appears to be the preferred routing library now, https://github.com/acdlite/redux-router#for-a-more-stable-official-binding-between-redux-and-react-router-try-redux-simple-router.

Example fails on startup with Node 5.10

After clean git clone and npm install, and running under Node 5.10, I receive the following error:

/tmp/react-redux-jwt-auth-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126
      if (!option) this.log.error("Unknown option: " + alias + "." + key, ReferenceError);
                           ^

TypeError: Cannot read property 'error' of undefined
    at OptionManager.mergeOptions (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:28)
    at OptionManager.addConfig (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:107:10)
    at OptionManager.findConfigs (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:168:35)
    at OptionManager.init (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:12)
    at compile (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/api/register/node.js:117:22)
    at normalLoader (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/api/register/node.js:199:14)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/agooch/Projects/programming/Playground/react-redux-jwt-auth-example/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)

Any ideas on what the problem is? Is there a last known good version of Node where this example runs correctly?

Many thanks in advance!