First commit

Author: chenkie

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Auth0, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,326 @@
+# Redux JWT Authentication Sample
+
+This is a sample of how to implement JWT authentication in React and [Redux](https://github.com/rackt/redux) apps. It uses Auth0's [NodeJS JWT Authentication Sample](https://github.com/auth0/nodejs-jwt-authentication-sample) to authenticate users and retrieve quotes from a protected endpoint.
+
+The sample is well-informed by the official [Redux examples](https://github.com/rackt/redux/tree/master/examples).
+
+## Installation
+
+Clone the repo and run the installation commands, each in a new terminal window.
+
+```bash
+npm run server
+
+# New terminal window
+npm start
+```
+
+## Important Snippets
+
+Users are authenticated by making a `fetch` request to `localhost:3001/sessions/create`. We have actions setup for this.
+
+```js
+// actions.js
+
+// There are three possible states for our login
+// process and we need actions for each of them
+export const LOGIN_REQUEST = 'LOGIN_REQUEST'
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
+export const LOGIN_FAILURE = 'LOGIN_FAILURE'
+
+function requestLogin(creds) {
+  return {
+    type: LOGIN_REQUEST,
+    isFetching: true,
+    isAuthenticated: false,
+    creds
+  }
+}
+
+function receiveLogin(user) {
+  return {
+    type: LOGIN_SUCCESS,
+    isFetching: false,
+    isAuthenticated: true,
+    id_token: user.id_token
+  }
+}
+
+function loginError(message) {
+  return {
+    type: LOGIN_FAILURE,
+    isFetching: false,
+    isAuthenticated: false,
+    message
+  }
+}
+
+// Three possible states for our logout process as well.
+// Since we are using JWTs, we just need to remove the token
+// from localStorage. These actions are more useful if we
+// were calling the API to log the user out
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
+export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'
+
+function requestLogout() {
+  return {
+    type: LOGOUT_REQUEST,
+    isFetching: true,
+    isAuthenticated: true
+  }
+}
+
+function receiveLogout() {
+  return {
+    type: LOGOUT_SUCCESS,
+    isFetching: false,
+    isAuthenticated: false
+  }
+}
+
+// Calls the API to get a token and
+// dispatches actions along the way
+export function loginUser(creds) {
+  
+  let config = {
+    method: 'POST',
+    headers: { 'Content-Type':'application/x-www-form-urlencoded' },
+    body: `username=${creds.username}&password=${creds.password}`
+  }
+  
+  return dispatch => {
+    // We dispatch requestLogin to kickoff the call to the API
+    dispatch(requestLogin(creds))
+    return fetch('http://localhost:3001/sessions/create', config)
+      .then(response =>
+        response.json()
+        .then(user => ({ user, response }))
+      ).then(({ user, response }) =>  {
+        if (!response.ok) {
+          // If there was a problem, we want to
+          // dispatch the error condition
+          dispatch(loginError(user.message))
+          return Promise.reject(user)
+        }
+        else {
+          // If login was successful, set the token in local storage
+          localStorage.setItem('id_token', user.id_token)
+          
+          // Dispatch the success action
+          dispatch(receiveLogin(user))
+        }
+      }).catch(err => console.log("Error: ", err))
+  }
+}
+
+// Logs the user out
+export function logoutUser() {
+  return dispatch => {
+    dispatch(requestLogout())
+    localStorage.removeItem('id_token')
+    dispatch(receiveLogout())
+  }
+}
+```
+
+We also have actions for retreiving the quotes that uses an API middleware.
+
+```js
+// middleware/api.js
+
+const BASE_URL = 'http://localhost:3001/api/'
+
+function callApi(endpoint, authenticated) {
+  
+  let token = localStorage.getItem('id_token') || null
+  let config = {}
+  
+  if(authenticated) {
+    if(token) {
+      config = {
+        headers: { 'Authorization': `Bearer ${token}` }
+      }
+    } else {
+      throw "No token saved!"
+    }
+  }
+  
+  return fetch(BASE_URL + endpoint, config)
+    .then(response =>
+      response.text()
+      .then(text => ({ text, response }))
+    ).then(({ text, response }) => {
+      if (!response.ok) {
+        return Promise.reject(text)
+      }
+      
+      return text
+    }).catch(err => console.log(err))
+}
+
+export const CALL_API = Symbol('Call API')
+
+export default store => next => action => {
+  
+  const callAPI = action[CALL_API]
+  
+  // So the middleware doesn't get applied to every single action
+  if (typeof callAPI === 'undefined') {
+    return next(action)
+  }
+  
+  let { endpoint, types, authenticated } = callAPI
+  
+  const [ requestType, successType, errorType ] = types
+  
+  // Passing the authenticated boolean back in our data will let us distinguish between normal and secret quotes
+  return callApi(endpoint, authenticated).then(
+    response =>
+      next({
+        response,
+        authenticated,
+        type: successType
+      }),
+    error => next({
+      error: error.message || 'There was an error.',
+      type: errorType
+    })
+  )
+}
+```
+
+```js
+// actions.js
+
+// Uses the API middlware to get a quote
+export function fetchQuote() {
+  return {
+    [CALL_API]: {
+      endpoint: 'random-quote',
+      types: [QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE]
+    }
+  }
+}
+
+// Same API middlware is used to get a 
+// secret quote, but we set authenticated
+// to true so that the auth header is sent
+export function fetchSecretQuote() {
+  return {
+    [CALL_API]: {
+      endpoint: 'protected/random-quote',
+      authenticated: true,
+      types: [QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE]
+    }
+  }
+}
+```
+
+The reducers return new objects with the data carried by the actions.
+
+```js
+// reducers.js
+
+import { combineReducers } from 'redux'
+import { 
+  LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS,
+  QUOTE_REQUEST, QUOTE_SUCCESS, QUOTE_FAILURE
+} from './actions'
+
+// The auth reducer. The starting state sets authentication
+// based on a token being in local storage. In a real app,
+// we would also want a util to check if the token is expired.
+function auth(state = {
+    isFetching: false,
+    isAuthenticated: localStorage.getItem('id_token') ? true : false
+  }, action) {
+  switch (action.type) {
+    case LOGIN_REQUEST:
+      return Object.assign({}, state, {
+        isFetching: true,
+        isAuthenticated: false,
+        user: action.creds
+      })
+    case LOGIN_SUCCESS:
+      return Object.assign({}, state, {
+        isFetching: false,
+        isAuthenticated: true,
+        errorMessage: ''
+      })
+    case LOGIN_FAILURE:
+      return Object.assign({}, state, {
+        isFetching: false,
+        isAuthenticated: false,
+        errorMessage: action.message
+      })
+    case LOGOUT_SUCCESS:
+      return Object.assign({}, state, {
+        isFetching: true,
+        isAuthenticated: false
+      })
+    default:
+      return state
+    }
+}
+
+// The quotes reducer
+function quotes(state = {
+    isFetching: false,
+    quote: '',
+    authenticated: false
+  }, action) {
+  switch (action.type) {
+    case QUOTE_REQUEST:
+      return Object.assign({}, state, {
+        isFetching: true
+      })
+    case QUOTE_SUCCESS:
+      return Object.assign({}, state, {
+        isFetching: false,
+        quote: action.response,
+        authenticated: action.authenticated || false
+      })
+    case QUOTE_FAILURE:
+      return Object.assign({}, state, {
+        isFetching: false
+      })
+    default:
+      return state
+  }
+}
+
+// We combine the reducers here so that they
+// can be left split apart above
+const quotesApp = combineReducers({
+  auth,
+  quotes
+})
+
+export default quotesApp
+```
+
+## 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 Auth0 Account
+
+1. Go to [Auth0](https://auth0.com) and click Sign Up.
+2. Use Google, GitHub or Microsoft Account to login.
+
+## Author
+
+[Auth0](https://auth0.com)
+