auth0-blog / react-flux-jwt-authentication-sample

Sample for implementing Authentication with a React Flux app and JWTs

Add authentication to a React Flux app

This is a sample that shows how you can add authentication to a React Flux app. Read more about it in this blog post

Using it

Clone this repository as well as the server for this example.

First, run the server app in the port 3001.

Then, run npm install on this project and run npm run watch to start the app. Then just navigate to http://localhost:3000

How does it work?

To learn more about how this project works and how it has been implemented, please read this blog post

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

License

MIT

What is Auth0?

Auth0 helps you to:

• Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
• Add authentication through more traditional username/password databases.
• Add support for linking different user accounts with the same user.
• Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
• Analytics of how, when and where users are logging in.
• Pull data from other sources and add it to the user profile, through JavaScript rules.

Create a free account in Auth0

1. Go to Auth0 and click Sign Up.
2. Use Google, GitHub or Microsoft Account to login.

react-flux-jwt-authentication-sample's Issues

jwt storage: web-storage vs cookie?

since this sample shows use of local-storage, wondering if auth0 has any stance on web-storage vs cookies for jwt storage as discussed in this article:

https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

?

Get Method with Token Authrization

I followed the fetch function to get data but no luck.

How can i add the authorizaiton code to a GET method?

Update to react-router 1.0

Any chance you guys could update this example for react-router 1.0? The syntax is quite different.

Doing a browser refresh takes to login screen

Hi All,

When i do browser refresh i am getting the login page again.

It looks like when we hit refresh we are sending the JWT token as the User Name and no password.

Did any one have similar issue.

Thanks

isLoggedIn Should Also Check if JWT is Expired

Along the lines of auth0/auth0-angular#146

Uncaught ReferenceError: extraReactMixin is not defined

There is a typo in AuthService.js ( line: 31).
"extraReactMixin" should be "extra"

bug when I build the project

LoginStore.js: Line 9: 'this' is not allowed before super() while parsing file

Intercept API failure due to unauthorized request (e.g. token expired)

It will be nice to see a place in this example where we can intercept API failure due to unauthorized request (e.g. token expired).

Unable to "npm start"

i followed the steps in the readme file, but unfortunately I could not start the project, here is my error log
btw, while install the packages, I noticed some of them were deprecrated

cross-env NODE_ENV=development hjs-dev-server

events.js:141
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:3000
at Object.exports._errnoException (util.js:860:11)
at exports._exceptionWithHostPort (util.js:883:20)
at Server._listen2 (net.js:1234:14)
at listen (net.js:1270:10)
at net.js:1379:9
at GetAddrInfoReqWrap.asyncCallback as callback
at GetAddrInfoReqWrap.onlookup as oncomplete

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v5.0.0
npm ERR! npm v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: cross-env NODE_ENV=development hjs-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'cross-env NODE_ENV=development hjs-dev-server'.
npm ERR! This is most likely a problem with the auth0-react-sample package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development hjs-dev-server
npm ERR! You can get their info via:
npm ERR! npm owner ls auth0-react-sample
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\MyStuff\projects\TagManager\resources\auth0-react-sample-sample\npm-debug.log

C:\MyStuff\projects\TagManager\resources\auth0-react-sample-sample>npm run watch
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "watch"
npm ERR! node v5.0.0
npm ERR! npm v3.3.6

npm ERR! missing script: watch
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\MyStuff\projects\TagManager\resources\auth0-react-sample-sample\npm-debug.log

npm error when launching. "missing script: watch"

This may be obvious to someone more experienced with node, but I'm getting this error when attempting to run in a freshly cloned repo:

/somedir$ npm run watch
npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "watch"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1

npm ERR! missing script: watch
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /somedir/nodejs-jwt-authentication-sample/npm-debug.log

Uncaught ReferenceError: reactMixin is not defined

Hi there,

the project doesn't run as of commit cfeb75b. After npm start the console says Uncaught ReferenceError: reactMixin is not defined249.../services/AuthService @ build.js:15s @ build.js:1(anonymous function) @ build.js:1245../actions/LoginActions @ build.js:15s @ build.js:1e @ build.js:1(anonymous function) @ build.js:1.

Both src/components/Login.jsx and src/components/Home.jsx have calls to reactMixin. I'm not sure, but I guess that after these parts are transformed by babel and reactMixin becomes _reactMixin, that somehow breaks things. Just guessing.

• uname -a Darwin Autechre 14.3.0 Darwin Kernel Version 14.3.0: Mon Mar 23 11:59:05 PDT 2015; root:xnu-2782.20.48~5/RELEASE_X86_64 x86_64
• npm --version 2.10.0
• iojs --version v2.0.2

Composed component child context types

Hi, very good job!

I'm having a problem with authenticated component (composed component) like this:

// ... imports
// We’re wrapping the home with the AuthenticatedComponent
export default AuthenticatedComponent(class Home extends React.Component {
  render() {
     // Here, we display the user information
    return (<h1>Hello {this.props.user.username}</h1>);
  }
});

I need to declare the child context type for the Home component (i'm using material-ui and I need the context for the appearance) but with ES6 + Composed components like yours, I can't do it!

If I use

Home.childContextTypes = {
  muiTheme: React.PropTypes.object
}

Home won't be found... (I know why).

So.. do you know the way to do that?
Thankyou!

How does your watch-css npm script work? I get an error trying to find rework-npm.

I'm trying to issue the watch-css npm script. I get an error saying that rework-npm is not a valid command. I can run rework-npm through command line just fine, though. I don't think nodemon is able to run it, though?

How does the RouterContainer work?

I am implementing this thing piece by piece into an application and I am getting "Cannot read property 'getCurrentQuery' of null".
I went to see the RouterContainer service and it doesn't seem to have a lot in there.
What is this sorcery?

Dispatcher Error

I am getting TypeError: this.$Dispatcher_callbacks[id] is not a function when serving the page.

I am following along your tuts but I am getting the error above. I had to change a few things on my end. Here is the link to the github link: https://github.com/masterfung/react-flux-login