Updated Lock to be 10.18

README.md

@@ -127,30 +127,55 @@ function receiveLogout() {
 
 // Opens the Lock widget and
 // dispatches actions along the way
+const lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN');
+
 export function login() {
-  const lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN');
   return dispatch => {
-    lock.show((err, profile, token) => {
-      if(err) {
-        dispatch(lockError(err))
-        return
-      }
-      localStorage.setItem('profile', JSON.stringify(profile))
-      localStorage.setItem('id_token', token)
-      dispatch(lockSuccess(profile, token))
-    })
+    lock.show()
   }
 }
 
+export function authenticate(){
+  return dispatch => {
+    lock.on("authenticated", function(authResult) {
+      // Use the token in authResult to getUserInfo() and save it to localStorage
+      lock.getUserInfo(authResult.accessToken, function(error, profile) {
+        if (error) {
+          // Handle error
+          return dispatch(lockError(error));
+        }
+        localStorage.setItem('profile', JSON.stringify(profile))
+        localStorage.setItem('id_token', authResult.accessToken)
+        return dispatch(lockSuccess(profile,authResult.accessToken));
+      });
+    });
+  }
+}
 // Logs the user out
 export function logoutUser() {
   return dispatch => {
     dispatch(requestLogout())
     localStorage.removeItem('id_token')
+    localStorage.removeItem('profile')
     dispatch(receiveLogout())
   }
 }
 ```
+We now need a listener on the main App file
+
+autheticate needs to be included from the actions and called within the Constructor
+
+```js
+/// containers/App.js
+
+import { loginUser, fetchQuote, fetchSecretQuote, authenticate } from '../actions'
+
+  constructor(props) {
+    super(props);
+    this.props.dispatch(authenticate());
+  }
+
+```
 
 We also have actions for retreiving the quotes that uses an API middleware.
 

actions.js

@@ -33,18 +33,28 @@ function lockError(err) {
 
 // Opens the Lock widget and
 // dispatches actions along the way
+const lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN');
+
 export function login() {
-  const lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN');
   return dispatch => {
-    lock.show((err, profile, token) => {
-      if(err) {
-        dispatch(lockError(err))
-        return
-      }
-      localStorage.setItem('profile', JSON.stringify(profile))
-      localStorage.setItem('id_token', token)
-      dispatch(lockSuccess(profile, token))
-    })
+    lock.show()
+  }
+}
+
+export function authenticate(){
+  return dispatch => {
+    lock.on("authenticated", function(authResult) {
+      // Use the token in authResult to getUserInfo() and save it to localStorage
+      lock.getUserInfo(authResult.accessToken, function(error, profile) {
+        if (error) {
+          // Handle error
+          return dispatch(lockError(error));
+        }
+        localStorage.setItem('profile', JSON.stringify(profile))
+        localStorage.setItem('id_token', authResult.accessToken)
+        return dispatch(lockSuccess(profile,authResult.accessToken));
+      });
+    });
   }
 }
 
@@ -78,6 +88,7 @@ export function logoutUser() {
   return dispatch => {
     dispatch(requestLogout())
     localStorage.removeItem('id_token')
+    localStorage.removeItem('profile')
     dispatch(receiveLogout())
   }
 }

containers/App.js

@@ -1,11 +1,15 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { loginUser, fetchQuote, fetchSecretQuote } from '../actions'
+import { loginUser, fetchQuote, fetchSecretQuote, authenticate } from '../actions'
 import Login from '../components/Login'
 import Navbar from '../components/Navbar'
 import Quotes from '../components/Quotes'
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.props.dispatch(authenticate());
+  }
 
   render() {
     const { dispatch, quote, isAuthenticated, errorMessage, isSecretQuote } = this.props

index.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
     <!-- Auth0Lock script -->
-    <script src="//cdn.auth0.com/js/lock-7.12.min.js"></script>
+    <script src="//cdn.auth0.com/js/lock/10.18.0/lock.min.js"></script>
   </head>
   <body>
     <div class="todoapp" id="root"></div>

package.json

@@ -16,7 +16,7 @@
     "redux-thunk": "^0.1.0"
   },
   "devDependencies": {
-    "auth0-lock": "^8.2.3",
+    "auth0-lock": "^10.18.0",
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
     "babel-plugin-react-transform": "^1.1.0",