Init which work with DRF-jwt

9 years ago · 62ddf4ff64
25 changed files with 673 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+npm-debug.log
--- a/Readme.md
+++ b/Readme.md
@ -0,0 +1,39 @@
+# 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](https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/)
+
+## Using it
+
+Clone this repository as well as [the server](https://github.com/auth0/nodejs-jwt-authentication-sample) 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](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](https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/)
+
+## 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](https://auth0.com/whitehat) details the procedure for disclosing security issues.
+
+## License
+
+MIT
+
+## What is Auth0?
+
+Auth0 helps you to:
+
+* Add authentication with [multiple authentication sources](https://docs.auth0.com/identityproviders), 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](https://docs.auth0.com/mysql-connection-tutorial)**.
+* Add support for **[linking different user accounts](https://docs.auth0.com/link-accounts)** with the same user.
+* Support for generating signed [Json Web Tokens](https://docs.auth0.com/jwt) 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](https://docs.auth0.com/rules).
+
+## Create a free account in Auth0
+
+1. Go to [Auth0](https://auth0.com) and click Sign Up.
+2. Use Google, GitHub or Microsoft Account to login.
--- a/build/.gitignore
+++ b/build/.gitignore
@ -0,0 +1 @@
+*
--- a/index.css
+++ b/index.css
@ -0,0 +1 @@
+@import 'bootstrap';
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>React Browserify SPA seed</title>
+  <link rel="stylesheet" type="text/css" href="build/build.css">
+</head>
+<body>
+  <!-- content section -->
+  <section id="content"></section>
+
+  <!-- Initialize SPA -->
+  <script type="text/javascript" src="build/build.js"></script>
+</body>
+</html>
--- a/metadata.json
+++ b/metadata.json
@ -0,0 +1,9 @@
+{
+  "name": "A Single Page App without a Framework",
+  "type": "sample",
+  "tags": [
+    "web",
+    "javascript",
+    "single-page-app"
+  ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,60 @@
+{
+  "name": "react-browserify-spa-seed",
+  "version": "0.0.1",
+  "description": "Seed project for React, Browserify, Rework SPAs",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:mgonto/react-browserify-spa-seed.git"
+  },
+  "authors": [
+    "Martin Gontovnikas <martin@gon.to> (http://gon.to/)"
+  ],
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
+  "scripts": {
+    "start": "npm run build && serve .",
+    "build": "npm run build-js && npm run build-css",
+    "watch": "npm run watch-js & npm run watch-css & serve .",
+    "test": "npm run lint -s && npm run build",
+    "build-css": "rework-npm index.css | cleancss -o build/build.css",
+    "build-js": "browserify --extension=.jsx --extension=.js src/app.jsx | uglifyjs > build/build.js",
+    "watch-js": "watchify --extension=.jsx --extension=.js src/app.jsx -o build/build.js --debug --verbose",
+    "watch-css": "nodemon -e css --ignore build/build.css --exec 'rework-npm index.css -o build/build.css'",
+    "lint-eslint": "eslint .",
+    "lint-jscs": "jscs .",
+    "lint": "npm run lint-eslint && npm run lint-jscs"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mgonto/react-browserify-spa-seed/issues"
+  },
+  "homepage": "https://github.com/mgonto/react-browserify-spa-seed",
+  "dependencies": {
+    "bootstrap": "^3.3.0",
+    "flux": "^2.0.1",
+    "jwt-decode": "^1.1.0",
+    "react": "^0.13",
+    "react-mixin": "^1.1.0",
+    "react-router": "^0.13.2",
+    "reqwest": "^1.1.5",
+    "when": "^3.7.2"
+  },
+  "devDependencies": {
+    "babelify": "^6.1.0",
+    "browser-sync": "^2.1.6",
+    "browserify": "^8.0.3",
+    "clean-css": "^3.1.9",
+    "eslint": "^0.14.1",
+    "nodemon": "^1.5.0",
+    "rework": "^1.0.1",
+    "rework-npm": "^1.0.0",
+    "rework-npm-cli": "^0.1.1",
+    "serve": "^1.4.0",
+    "uglify-js": "^2.4.15",
+    "watchify": "^2.1.1"
+  }
+}
--- a/src/actions/LoginActions.js
+++ b/src/actions/LoginActions.js
@ -0,0 +1,28 @@
+import AppDispatcher from '../dispatchers/AppDispatcher.js';
+import {LOGIN_USER, LOGOUT_USER} from '../constants/LoginConstants.js';
+import RouterContainer from '../services/RouterContainer'
+
+export default {
+  loginUser: (jwt) => {
+    var savedJwt = localStorage.getItem('jwt');
+    
+    AppDispatcher.dispatch({
+      actionType: LOGIN_USER,
+      jwt: jwt
+    });
+    
+    if (savedJwt !== jwt) {
+      var nextPath = RouterContainer.get().getCurrentQuery().nextPath || '/';
+
+      RouterContainer.get().transitionTo(nextPath);
+      localStorage.setItem('jwt', jwt);
+    }
+  },
+  logoutUser: () => {
+    RouterContainer.get().transitionTo('/login');
+    localStorage.removeItem('jwt');
+    AppDispatcher.dispatch({
+      actionType: LOGOUT_USER
+    });
+  }
+}
--- a/src/actions/QuoteActions.js
+++ b/src/actions/QuoteActions.js
@ -0,0 +1,11 @@
+import AppDispatcher from '../dispatchers/AppDispatcher.js';
+import {QUOTE_GET} from '../constants/QuoteConstants.js';
+
+export default {
+  gotQuote: (quote) => {
+    AppDispatcher.dispatch({
+      actionType: QUOTE_GET,
+      quote: quote
+    })
+  }
+}
--- a/src/app.jsx
+++ b/src/app.jsx
@ -0,0 +1,31 @@
+import React from 'react';
+import Router, {Route} from 'react-router';
+import AuthenticatedApp from './components/AuthenticatedApp'
+import Login from './components/Login';
+import Signup from './components/Signup';
+import Home from './components/Home';
+import Quote from './components/Quote';
+import RouterContainer from './services/RouterContainer';
+import LoginActions from './actions/LoginActions';
+
+var routes = (
+  <Route handler={AuthenticatedApp}>
+    <Route name="login" handler={Login}/>
+    <Route name="signup" handler={Signup}/>
+    <Route name="home" path="/" handler={Home}/>
+    <Route name="quote" handler={Quote}/>
+  </Route>
+);
+
+var router = Router.create({routes});
+RouterContainer.set(router);
+
+let jwt = localStorage.getItem('jwt');
+if (jwt) {
+  LoginActions.loginUser(jwt);
+}
+
+router.run(function (Handler) {
+  React.render(<Handler />, document.getElementById('content'));
+});
+
--- a/src/components/AuthenticatedApp.jsx
+++ b/src/components/AuthenticatedApp.jsx
@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+import LoginStore from '../stores/LoginStore'
+import { Route, RouteHandler, Link } from 'react-router';
+import AuthService from '../services/AuthService'
+
+export default class AuthenticatedApp extends React.Component {
+  constructor() {
+    super()
+    this.state = this._getLoginState();
+  }
+
+  _getLoginState() {
+    return {
+      userLoggedIn: LoginStore.isLoggedIn()
+    };
+  }
+
+  componentDidMount() {
+    this.changeListener = this._onChange.bind(this);
+    LoginStore.addChangeListener(this.changeListener);
+  }
+
+  _onChange() {
+    this.setState(this._getLoginState());
+  }
+
+  componentWillUnmount() {
+    LoginStore.removeChangeListener(this.changeListener);
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <nav className="navbar navbar-default">
+          <div className="navbar-header">
+            <a className="navbar-brand" href="/">React Flux app with JWT authentication</a>
+          </div>
+          {this.headerItems}
+        </nav>
+        <RouteHandler/>
+      </div>
+    );
+  }
+
+  logout(e) {
+    e.preventDefault();
+    AuthService.logout();
+  }
+
+  get headerItems() {
+    if (!this.state.userLoggedIn) {
+      return (
+      <ul className="nav navbar-nav navbar-right">
+        <li>
+          <Link to="login">Login</Link>
+        </li>
+        <li>
+          <Link to="signup">Signup</Link>
+        </li>
+      </ul>)
+    } else {
+      return (
+      <ul className="nav navbar-nav navbar-right">
+        <li>
+          <Link to="home">Home</Link>
+        </li>
+        <li>
+          <Link to="quote">Quote</Link>
+        </li>
+        <li>
+          <a href="" onClick={this.logout}>Logout</a>
+        </li>
+      </ul>)
+    }
+  }
+}
--- a/src/components/AuthenticatedComponent.jsx
+++ b/src/components/AuthenticatedComponent.jsx
@ -0,0 +1,49 @@
+import React from 'react';
+import LoginStore from '../stores/LoginStore';
+
+export default (ComposedComponent) => {
+  return class AuthenticatedComponent extends React.Component {
+
+    static willTransitionTo(transition) {
+      if (!LoginStore.isLoggedIn()) {
+        transition.redirect('/login', {}, {'nextPath' : transition.path});
+      }
+    }
+
+    constructor() {
+      super()
+      this.state = this._getLoginState();
+    }
+
+    _getLoginState() {
+      return {
+        userLoggedIn: LoginStore.isLoggedIn(),
+        user: LoginStore.user,
+        jwt: LoginStore.jwt
+      };
+    }
+
+    componentDidMount() {
+      this.changeListener = this._onChange.bind(this);
+      LoginStore.addChangeListener(this.changeListener);
+    }
+
+    _onChange() {
+      this.setState(this._getLoginState());
+    }
+
+    componentWillUnmount() {
+      LoginStore.removeChangeListener(this.changeListener);
+    }
+
+    render() {
+      return (
+      <ComposedComponent
+        {...this.props}
+        user={this.state.user}
+        jwt={this.state.jwt}
+        userLoggedIn={this.state.userLoggedIn} />
+      );
+    }
+  }
+};
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@ -0,0 +1,8 @@
+import React from 'react';
+import AuthenticatedComponent from './AuthenticatedComponent'
+
+export default AuthenticatedComponent(class Home extends React.Component {
+  render() {
+    return (<h1>Hello {this.props.user ? this.props.user.username : ''}</h1>);
+  }
+});
--- a/src/components/Login.jsx
+++ b/src/components/Login.jsx
@ -0,0 +1,44 @@
+import React from 'react/addons';
+import ReactMixin from 'react-mixin';
+import Auth from '../services/AuthService'
+
+export default class Login extends React.Component {
+
+  constructor() {
+    super()
+    this.state = {
+      user: '',
+      password: ''
+    };
+  }
+
+  login(e) {
+    e.preventDefault();
+    Auth.login(this.state.user, this.state.password)
+      .catch(function(err) {
+        alert("There's an error logging in");
+        console.log("Error logging in", err);
+      });
+  }
+
+  render() {
+    return (
+      <div className="login jumbotron center-block">
+        <h1>Login</h1>
+        <form role="form">
+        <div className="form-group">
+          <label htmlFor="username">Username</label>
+          <input type="text" valueLink={this.linkState('user')} className="form-control" id="username" placeholder="Username" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
+          <input type="password" valueLink={this.linkState('password')} className="form-control" id="password" ref="password" placeholder="Password" />
+        </div>
+        <button type="submit" className="btn btn-default" onClick={this.login.bind(this)}>Submit</button>
+      </form>
+    </div>
+    );
+  }
+}
+
+ReactMixin(Login.prototype, React.addons.LinkedStateMixin);
--- a/src/components/Quote.jsx
+++ b/src/components/Quote.jsx
@ -0,0 +1,47 @@
+import React from 'react';
+import AuthenticatedComponent from './AuthenticatedComponent';
+import QuoteStore from '../stores/QuoteStore.js';
+import QuoteService from '../services/QuoteService.js';
+
+export default AuthenticatedComponent(class Quote extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getQuoteState();
+    this._onChange = this._onChange.bind(this);
+  }
+
+  componentDidMount() {
+    if (!this.state.quote) {
+      this.requestNextQuote();
+    }
+
+    QuoteStore.addChangeListener(this._onChange);
+  }
+
+  componentWillUnmount() {
+    QuoteStore.removeChangeListener(this._onChange);
+  }
+
+  _onChange() {
+    this.setState(this.getQuoteState());
+  }
+
+  requestNextQuote() {
+    QuoteService.nextQuote();
+  }
+
+  getQuoteState() {
+    return {
+      quote: QuoteStore.quote
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>{this.state.quote}</h1>
+        <button className="btn btn-primary" type="button" onClick={this.requestNextQuote}>Next Quote</button>
+      </div>
+    );
+  }
+});
--- a/src/components/Signup.jsx
+++ b/src/components/Signup.jsx
@ -0,0 +1,49 @@
+import React from 'react/addons';
+import ReactMixin from 'react-mixin';
+import Auth from '../services/AuthService'
+
+export default class Signup extends React.Component {
+
+  constructor() {
+    super()
+    this.state = {
+      user: '',
+      password: '',
+      extra: ''
+    };
+  }
+
+  signup(e) {
+    e.preventDefault();
+    Auth.signup(this.state.user, this.state.password, this.state.extra)
+      .catch(function(err) {
+        alert("There's an error logging in");
+        console.log("Error logging in", err);
+      });
+  }
+
+  render() {
+    return (
+      <div className="login jumbotron center-block">
+        <h1>Signup</h1>
+        <form role="form">
+        <div className="form-group">
+          <label htmlFor="username">Username</label>
+          <input type="text" valueLink={this.linkState('user')} className="form-control" id="username" placeholder="Username" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
+          <input type="password" valueLink={this.linkState('password')} className="form-control" id="password" ref="password" placeholder="Password" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="extra">Extra</label>
+          <input type="text" valueLink={this.linkState('extra')} className="form-control" id="password" ref="password" placeholder="Some extra information" />
+        </div>
+        <button type="submit" className="btn btn-default" onClick={this.signup.bind(this)}>Submit</button>
+      </form>
+    </div>
+    );
+  }
+}
+
+ReactMixin(Signup.prototype, React.addons.LinkedStateMixin);
--- a/src/constants/LoginConstants.js
+++ b/src/constants/LoginConstants.js
@ -0,0 +1,8 @@
+var BASE_URL = 'http://rocket.dev/';
+export default {
+  BASE_URL: BASE_URL,
+  LOGIN_URL: BASE_URL + 'api-token-auth/',
+  SIGNUP_URL: BASE_URL + 'users',
+  LOGIN_USER: 'LOGIN_USER',
+  LOGOUT_USER: 'LOGOUT_USER'
+}
--- a/src/constants/QuoteConstants.js
+++ b/src/constants/QuoteConstants.js
@ -0,0 +1,6 @@
+var BASE_URL = 'http://rocket.dev/';
+export default {
+  BASE_URL: BASE_URL,
+  QUOTE_URL: BASE_URL + 'account/',
+  QUOTE_GET: 'QUOTE_GET'
+}
--- a/src/dispatchers/AppDispatcher.js
+++ b/src/dispatchers/AppDispatcher.js
@ -0,0 +1,3 @@
+import { Dispatcher } from 'flux';
+
+export default new Dispatcher();
--- a/src/services/AuthService.js
+++ b/src/services/AuthService.js
@ -0,0 +1,46 @@
+import request from 'reqwest';
+import when from 'when';
+import {LOGIN_URL, SIGNUP_URL} from '../constants/LoginConstants';
+import LoginActions from '../actions/LoginActions';
+
+class AuthService {
+
+  login(username, password) {
+    return this.handleAuth(when(request({
+      url: LOGIN_URL,
+      method: 'POST',
+      crossOrigin: true,
+      type: 'json',
+      data: {
+        username, password
+      }
+    })));
+  }
+
+  logout() {
+    LoginActions.logoutUser();
+  }
+
+  signup(username, password, extra) {
+    return this.handleAuth(when(request({
+      url: SIGNUP_URL,
+      method: 'POST',
+      crossOrigin: true,
+      type: 'json',
+      data: {
+        username, password, extra
+      }
+    })));
+  }
+
+  handleAuth(loginPromise) {
+    return loginPromise
+      .then(function(response) {
+        var jwt = response.token;
+        LoginActions.loginUser(jwt);
+        return true;
+      });
+  }
+}
+
+export default new AuthService()
--- a/src/services/QuoteService.js
+++ b/src/services/QuoteService.js
@ -0,0 +1,27 @@
+import request from 'reqwest';
+import when from 'when';
+import {QUOTE_URL} from '../constants/QuoteConstants';
+import QuoteActions from '../actions/QuoteActions';
+import LoginStore from '../stores/LoginStore.js';
+
+class QuoteService {
+
+  nextQuote() {
+
+    request({
+      url: QUOTE_URL,
+      method: 'GET',
+      crossOrigin: true,
+      headers: {
+        'Authorization': 'Bearer ' + LoginStore.jwt
+      }
+    })
+    .then(function(response) {
+      console.log(response);
+      QuoteActions.gotQuote(response);
+    });
+  }
+
+}
+
+export default new QuoteService()
--- a/src/services/RouterContainer.js
+++ b/src/services/RouterContainer.js
@ -0,0 +1,5 @@
+var _router = null;
+export default {
+  set: (router) => _router = router,
+  get: () => _router
+}
--- a/src/stores/BaseStore.js
+++ b/src/stores/BaseStore.js
@ -0,0 +1,29 @@
+import { EventEmitter } from 'events';
+import AppDispatcher from '../dispatchers/AppDispatcher';
+
+export default class BaseStore extends EventEmitter {
+
+  constructor() {
+    super();
+  }
+
+  subscribe(actionSubscribe) {
+    this._dispatchToken = AppDispatcher.register(actionSubscribe());
+  }
+
+  get dispatchToken() {
+    return this._dispatchToken;
+  }
+
+  emitChange() {
+    this.emit('CHANGE');
+  }
+
+  addChangeListener(cb) {
+    this.on('CHANGE', cb)
+  }
+
+  removeChangeListener(cb) {
+    this.removeListener('CHANGE', cb);
+  }
+}
--- a/src/stores/LoginStore.js
+++ b/src/stores/LoginStore.js
@ -0,0 +1,44 @@
+import {LOGIN_USER, LOGOUT_USER} from '../constants/LoginConstants';
+import BaseStore from './BaseStore';
+import jwt_decode from 'jwt-decode';
+
+
+class LoginStore extends BaseStore {
+
+  constructor() {
+    super();
+    this.subscribe(() => this._registerToActions.bind(this))
+    this._user = null;
+    this._jwt = null;
+  }
+
+  _registerToActions(action) {
+    switch(action.actionType) {
+      case LOGIN_USER:
+        this._jwt = action.jwt;
+        this._user = jwt_decode(this._jwt);
+        this.emitChange();
+        break;
+      case LOGOUT_USER:
+        this._user = null;
+        this.emitChange();
+        break;
+      default:
+        break;
+    };
+  }
+
+  get user() {
+    return this._user;
+  }
+
+  get jwt() {
+    return this._jwt;
+  }
+
+  isLoggedIn() {
+    return !!this._user;
+  }
+}
+
+export default new LoginStore();
--- a/src/stores/QuoteStore.js
+++ b/src/stores/QuoteStore.js
@ -0,0 +1,33 @@
+import {QUOTE_GET} from '../constants/QuoteConstants';
+import {LOGOUT_USER} from '../constants/LoginConstants';
+import BaseStore from './BaseStore';
+
+class QuoteStore extends BaseStore {
+
+  constructor() {
+    super();
+    this.subscribe(() => this._registerToActions.bind(this))
+    this._quote = '';
+  }
+
+  _registerToActions(action) {
+    switch(action.actionType) {
+      case QUOTE_GET:
+        this._quote = action.quote;
+        this.emitChange();
+        break;
+      case LOGOUT_USER:
+        this._quote = null;
+        this.emitChange();
+        break;
+      default:
+        break;
+    };
+  }
+
+  get quote() {
+    return this._quote;
+  }
+}
+
+export default new QuoteStore();