first commit

Author: chenkie

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    },
+    "production": {
+      "presets": []
+    },
+    "test": {
+      "presets": []
+    }
+  }
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.env
+npm-debug.log
+dist
+.DS_Store

README.md

@@ -0,0 +1,17 @@
+# React Authentication for Front End Masters
+
+## Running the App
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Start the app:
+
+```bash
+npm start
+```
+
+The app will be served at `localhost:3000`.

karma.conf.js

@@ -0,0 +1,40 @@
+var argv = require('yargs').argv;
+var path = require('path');
+
+var webpackConfig = require('./webpack.config');
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['mocha', 'chai'],
+    files: [
+      'tests.webpack.js'
+    ],
+
+    preprocessors: {
+      // add webpack as preprocessor
+      'tests.webpack.js': ['webpack', 'sourcemap'],
+    },
+
+    webpack: webpackConfig,
+    webpackServer: {
+      noInfo: true
+    },
+
+    plugins: [
+      'karma-mocha',
+      'karma-chai',
+      'karma-webpack',
+      'karma-phantomjs-launcher',
+      'karma-spec-reporter',
+      'karma-sourcemap-loader'
+    ],
+
+    reporters: ['spec'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    browsers: ['PhantomJS'],
+    singleRun: !argv.watch
+  })
+};

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "auth0-react-sample",
+  "version": "1.0.0",
+  "description": "A minimal reactJS sample application showing auth0 integration",
+  "repository": "https://github.com/auth0-samples/auth0-react-sample",
+  "license": "MIT",
+  "scripts": {
+    "start": "npm-run-all --parallel dev-server",
+    "dev-server": "NODE_ENV=development cross-env hjs-dev-server",
+    "clean": "rimraf dist",
+    "build": "npm run clean && cross-env NODE_ENV=production webpack",
+    "publish_pages": "gh-pages -d dist",
+    "ghpages": "npm run build && npm run publish_pages",
+    "test": "cross-env NODE_ENV=test karma start karma.conf.js",
+    "test:watch": "npm run test -- --watch"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.3.6",
+    "babel-core": "^6.7.7",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-es2015-modules-umd": "^6.8.0",
+    "babel-polyfill": "^6.7.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "^6.7.2",
+    "chai": "^3.5.0",
+    "chai-enzyme": "^0.4.2",
+    "cheerio": "^0.20.0",
+    "cross-env": "^1.0.8",
+    "css-loader": "^0.23.1",
+    "cssnano": "^3.5.2",
+    "dotenv": "^2.0.0",
+    "enzyme": "^2.2.0",
+    "expect": "^1.18.0",
+    "file-loader": "^0.8.5",
+    "gh-pages": "^0.11.0",
+    "hjs-webpack": "^8.1.0",
+    "jasmine-core": "^2.4.1",
+    "json-loader": "^0.5.4",
+    "karma": "^0.13.22",
+    "karma-chai": "^0.1.0",
+    "karma-jasmine": "^0.3.8",
+    "karma-mocha": "^1.0.1",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.4.5",
+    "npm-run-all": "^2.3.0",
+    "phantomjs-polyfill": "0.0.2",
+    "phantomjs-prebuilt": "^2.1.7",
+    "postcss-loader": "^0.9.1",
+    "precss": "^1.4.0",
+    "prettyjson": "^1.1.3",
+    "react-addons-test-utils": "^15.0.2",
+    "sinon": "^1.17.4",
+    "style-loader": "^0.13.1",
+    "transform-loader": "^0.2.3",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.0",
+    "yargs": "^4.7.1"
+  },
+  "dependencies": {
+    "auth0-lock": "^10.2.2",
+    "bootstrap": "^3.3.7",
+    "classnames": "^2.2.5",
+    "express-jwt": "^5.0.0",
+    "jwt-decode": "^2.1.0",
+    "md5": "^2.2.1",
+    "react": "^15.3.1",
+    "react-bootstrap": "^0.30.0-rc.1",
+    "react-dom": "^15.3.1",
+    "react-router": "^2.8.0",
+    "react-router-bootstrap": "^0.23.1"
+  }
+}

scripts/prepublish.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+echo "=> Compiling..."
+echo ""
+rm -rf ./dist
+NODE_ENV=production ./node_modules/.bin/webpack
+echo ""
+echo "=> Complete"

src/app.css

@@ -0,0 +1,18 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import 'bootstrap/dist/css/bootstrap.css'
+import './app.css'
+
+import App from 'containers/App/App'
+
+import {browserHistory} from 'react-router'
+import makeRoutes from './routes'
+
+const routes = makeRoutes()
+
+const mountNode = document.querySelector('#root');
+ReactDOM.render(
+  <App history={browserHistory}
+        routes={routes} />,
+mountNode)

src/app.js

@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react'
+import { Router } from 'react-router'
+
+class App extends React.Component {
+  static contextTypes = {
+    router: PropTypes.object
+  }
+
+  static propTypes = {
+    history: PropTypes.object.isRequired,
+    routes: PropTypes.element.isRequired
+  }
+
+  get content() {
+    return (
+      <Router
+        routes={this.props.routes}
+        history={this.props.history} />
+    )
+  }
+
+  render () {
+     return (
+       <div style={{ height: '100%' }}>
+         {this.content}
+       </div>
+     )
+   }
+}
+
+export default App

src/containers/App/App.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+
+import App from './App'
+import styles from './styles.module.css'
+
+describe('<App />', () => {
+  let wrapper
+  let history = {}
+  beforeEach(() => {
+    wrapper =
+      shallow(<App history={history}/>)
+  })
+
+  it('has a Router component', () => {
+    expect(wrapper.find('Router'))
+      .to.have.length(1)
+  })
+
+  it('passes a history prop', () => {
+    const props = wrapper.find('Router').props();
+
+    expect(props.history)
+      .to.be.defined
+  })
+
+})

src/containers/App/App.spec.js

@@ -0,0 +1,3 @@
+.wrapper {
+  display: flex;
+}

src/containers/App/styles.module.css

@@ -0,0 +1,16 @@
+import React from 'react'
+import {browserHistory, Router, Route, Redirect} from 'react-router'
+
+import makeMainRoutes from './views/Main/routes'
+
+export const makeRoutes = () => {
+  const main = makeMainRoutes()
+
+  return (
+    <Route path=''>
+      {main}
+    </Route>
+  )
+}
+
+export default makeRoutes

src/routes.js

@@ -0,0 +1,4 @@
+:root {
+  --topbar-height: 80px;
+  --padding: 25px;
+}

src/styles/base.css

@@ -0,0 +1,7 @@
+:root {
+  --dark: #404040;
+  --light-gray: #a2a2a2;
+  --white: #ffffff;
+  --highlight: #48b5e9;
+  --heading-color: var(--highlight);
+}

src/styles/colors.css

@@ -0,0 +1,7 @@
+@custom-media --screen-phone (width <= 35.5em);
+@custom-media --screen-phone-lg (width > 35.5em);
+
+@custom-media --screen-sm var(--screen-phone) and (width < 48em);
+@custom-media --screen-md (width >= 48em) and (width < 64em);
+@custom-media --screen-lg (width >= 64em) and (width < 80em);
+@custom-media --screen-xl (width >= 80em);

src/styles/queries.css

@@ -0,0 +1,88 @@
+import { EventEmitter } from 'events'
+import { isTokenExpired } from './jwtHelper'
+import { browserHistory } from 'react-router'
+import jwtDecode from 'jwt-decode'
+
+import { API_URL } from './constants'
+
+export default class AuthService extends EventEmitter {
+  constructor() {
+    super()
+
+    // binds login functions to keep this context
+    this.login = this.login.bind(this)
+  }
+
+  _doAuthentication(endpoint, values) {
+    return this.fetch(`${API_URL}/${endpoint}`, { 
+      method: 'POST', 
+      body: JSON.stringify(values),
+      headers: { 'Content-Type': 'application/json' }
+    })
+  }
+
+  login(user, password) {
+    return this._doAuthentication('users/authenticate', { user, password })
+  }
+
+  signup(username, email, password) {
+    return this._doAuthentication('users', { username, email, password })
+  }
+
+  isAuthenticated() {
+    // Checks if there is a saved token and it's still valid
+    const token = localStorage.getItem('token')
+    if (token) {
+      return !isTokenExpired(token)
+    } else {
+      return false
+    }
+  }
+
+  isAdmin() {
+    return jwtDecode(this.getToken()).scope === 'admin'
+  }
+
+  finishAuthentication(token) {
+    localStorage.setItem('token', token)
+  }
+
+  getToken() {
+    // Retrieves the user token from localStorage
+    return localStorage.getItem('token')
+  }
+
+  logout() {
+    // Clear user token and profile data from localStorage
+    localStorage.removeItem('token')
+  }
+
+  _checkStatus(response) {
+    // raises an error in case response status is not a success
+    if (response.status >= 200 && response.status < 300) {
+      return response
+    } else {
+      var error = new Error(response.statusText)
+      error.response = response
+      return error
+    }
+  }
+
+  fetch(url, options) {
+    // performs api calls sending the required authentication headers
+    const headers = {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    }
+
+    if (this.isAuthenticated()) {
+      headers['Authorization'] = 'Bearer ' + this.getToken()
+    }
+
+    return fetch(url, {
+      headers,
+      ...options
+    })
+    .then(response => response.json())
+  }
+}

src/utils/AuthService.js

@@ -0,0 +1 @@
+export const API_URL = 'https://user-authentication-api-ocokqryugz.now.sh/api'