JWT Auth + Token Persist

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "lodash": "^4.17.10",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
@@ -10,6 +12,7 @@
     "react-scripts": "1.1.4",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
+    "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

src/actions/index.js

@@ -1,4 +1,5 @@
 import * as types from '../constants/ActionTypes'
+import { login } from '../utils/Auth'
 
 export const incFirstCounter = _ => ({
   type: types.FIRST_INCREMENT_COUNTER,
@@ -8,3 +9,39 @@ export const assignFirstId = objId => ({
   type: types.FIRST_ASSIGN_ID,
   newId: objId
 })
+
+// auth
+export const reqAuth = _ => {
+  return {
+    type: types.REQUEST_LOGIN,
+  }
+}
+
+export const successAuth = (body) => {
+  return {
+    type: types.SUCCESS_LOGIN,
+    body
+  }
+}
+
+export const failAuth = (body) => {
+  return {
+    type: types.FAILED_LOGIN,
+    body
+  }
+}
+
+export function fetchAuth(user, passwd) {
+  return (dispatch) => {
+    dispatch(reqAuth())
+    return login(user, passwd)
+  }
+}
+
+// token
+export const setToken = (data) => {
+  return {
+    type: types.SET_TOKEN,
+    token: data,
+  }
+}

src/constants/ActionTypes.js

@@ -1,3 +1,9 @@
 
 export const FIRST_INCREMENT_COUNTER = 'FIRST_INCREMENT_COUNTER'
 export const FIRST_ASSIGN_ID = 'FIRST_ASSIGN_ID'
+export const SET_TOKEN = 'SET_TOKEN'
+
+
+export const REQUEST_LOGIN = 'REQUEST_LOGIN'
+export const SUCCESS_LOGIN = 'SUCCESS_LOGIN'
+export const FAILED_LOGIN = 'FAILED_LOGIN'

src/constants/Api.js

@@ -0,0 +1,3 @@
+
+export const URL = process.env.API_URL || '//localhost:8000'
+export const LOGIN = '/api-token-auth/'

src/container/Gone.js

@@ -1,14 +1,29 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import { getToken, loggedIn } from '../reducers/auth'
+import { fetchAuth } from '../actions'
 
-const Main = (props) => (
+const Gone = (props) => (
   <div>
     Gone { props.match.params.id }
 
     <hr />
     <Link to={`/`}>Main</Link>
+
+    <hr />
+    {props.loggedIn ? 'Logged in': 'Nah anonymous'}
+    <hr />
+
+    <button onClick={_ => props.fetchAuth("user", "passwd")}>Login</button>
   </div>
 )
 
 
-export default Main
+const mapStateToProps = state => ({
+  token: getToken(state.auth)
+})
+export default connect(
+  mapStateToProps,
+  { loggedIn, fetchAuth }
+)(Gone)

src/index.js

@@ -4,30 +4,22 @@ import './index.css'
 import App from './App'
 import registerServiceWorker from './registerServiceWorker'
 import { HashRouter } from 'react-router-dom'
-import thunk from 'redux-thunk'
 
-import { createStore, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
-import { createLogger } from 'redux-logger'
-import gruntApp from './reducers'
+import { persistStore } from 'redux-persist'
+import { PersistGate } from 'redux-persist/integration/react'
+import store from './store'
 
 
-const middleware = [ thunk ]
-if (process.env.NODE_ENV !== 'production') {
-  middleware.push(createLogger())
-}
-/* eslint-disable no-underscore-dangle */
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const enhancer = composeEnhancers(
-  applyMiddleware(...middleware)
-)
-const store = createStore(gruntApp, enhancer)
-/* eslint-enable */
+const persistor = persistStore(store)
+
 ReactDOM.render((
   <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
       <HashRouter>
         <App />
       </HashRouter>
+    </PersistGate>
   </Provider>
 ), document.getElementById('root'))
 

src/reducers/auth.js

@@ -0,0 +1,40 @@
+import {
+  SET_TOKEN, REQUEST_LOGIN, SUCCESS_LOGIN, FAILED_LOGIN,
+} from '../constants/ActionTypes'
+
+
+const tokenInitialState = {
+  token: null,
+  fetching: false,
+}
+const token = (state = tokenInitialState, action) => {
+  switch(action.type) {
+    case REQUEST_LOGIN:
+      return {
+        token: null,
+        fetching: true,
+      }
+    case SUCCESS_LOGIN:
+      return {
+        token: action.body.token,
+        fetching: false,
+      }
+    case FAILED_LOGIN:
+      return {
+        token: null,
+        fetching: false,
+      }
+    case SET_TOKEN:
+      return {
+        token: action.token,
+        fetching: false,
+      };
+    default:
+      return state;
+  }
+}
+
+export default token
+
+export const getToken = state => state.token
+export const loggedIn = state => state && state.token == null

src/reducers/index.js

@@ -1,6 +1,8 @@
 import { combineReducers } from 'redux'
 import first from './first'
+import auth from './auth'
 
 export default combineReducers({
-  first
+  auth,
+  first,
 })

src/store.js

@@ -0,0 +1,27 @@
+import thunk from 'redux-thunk'
+import { createStore, applyMiddleware, compose } from 'redux'
+import { createLogger } from 'redux-logger'
+import { persistReducer } from 'redux-persist'
+import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
+
+import gruntApp from './reducers'
+
+const persistConfig = {
+  key: 'root',
+  storage,
+}
+
+const middleware = [ thunk ]
+if (process.env.NODE_ENV !== 'production') {
+  middleware.push(createLogger())
+}
+/* eslint-disable no-underscore-dangle */
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const enhancer = composeEnhancers(
+  applyMiddleware(...middleware),
+)
+const persistedReducer = persistReducer(persistConfig, gruntApp)
+
+const store = createStore(persistedReducer, enhancer)
+
+export default store

src/utils/ApiClient.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+import store from '../store'
+import { URL } from '../config/Api'
+
+export const apiClient = function() {
+  const token = store.getState().token
+  const params = {
+    baseURL: URL,
+    headers: {'Authorization': 'Token ' + token}
+  }
+  return axios.create(params)
+}

src/utils/Auth.js

@@ -0,0 +1,29 @@
+import axios from 'axios'
+import _ from 'lodash'
+import store from '../store'
+import { failAuth, successAuth } from '../actions'
+import { URL, LOGIN } from '../constants/Api'
+
+export function InvalidCredentialsException(message) {
+    this.message = message
+    this.name = 'InvalidCredentialsException'
+}
+
+export function login(username, password) {
+  return axios
+    .post(URL + LOGIN, {
+      username,
+      password
+    })
+    .then(function (response) {
+      store.dispatch(successAuth(response.data))
+    })
+    .catch(function (error) {
+      store.dispatch(failAuth(error))
+      // raise different exception if due to invalid credentials
+      if (_.get(error, 'response.status') === 400) {
+        throw new InvalidCredentialsException(error)
+      }
+      throw error
+    })
+}