Modified to use Auth0 and couch_jwt_auth

softapalvelin · Sep 1, 2015 · 5f8d2db · 5f8d2db
1 parent 027864d
commit 5f8d2db
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,12 @@
-pouchdb-getting-started-todo
+pouchdb-getting-started-todo (Using auth0 and couch_jwt_auth)
 ============================
 
 The source repository for the getting started tutorial for PouchDB
+
+This sample is modified to support Auth0 login and CouchDB [couch_jwt_auth plugin](https://github.com/softapalvelin/couch_jwt_auth). Auth0 login generates JSON Web Token and then the token is added to all requests to CouchDB. couch_jwt_auth validates the token and creates a CouchDB user context for the user if the token is valid. There's no need to add the user to CouchDB users database.
+
+This sample requires that you have added a Auth0 rule that adds 'roles' claim to the token. The roles claim is used by couch_jwt_auth to add roles to CouchDB user context. Sample code for the rule can be found from the [auth0-rule-sample.js](https://github.com/softapalvelin/getting-started-todo/blob/master/auth0-rule-sample.js). Now you can use roles to restrict access to "todos" database to only users with the role "worker".
+
+You must configure CouchDB to use couch_jwt_auth for authentication. Add {couch_jwt_auth, jwt_authentication_handler} to httpd > authentication_handlers configuration. Then configure couch_jwt_auth with the correct information from Auth0. Look [couchdb-sample-local.ini](https://github.com/softapalvelin/getting-started-todo/blob/master/couchdb-sample-local.ini) for sample configuration.
+
+Note: The sample uses Auth0 Popup Mode. It may require some extra configuration in Auth0 console. For example, authentication with Google requires that you obtain Google ClientID and configure it in the [connections menu](https://manage.auth0.com/#/connections/social).
diff --git a/auth0-rule-sample.js b/auth0-rule-sample.js
@@ -0,0 +1,11 @@
+function (user, context, callback) {
+  // add roles to user info
+  user.roles = ["worker"];
+
+  // add scope for JWT request so the roles is returned in the token
+  var scopeMapping = {
+    roles: ["roles"]
+  };
+  context.jwtConfiguration.scopes = scopeMapping;  
+  callback(null, user, context);
+}
diff --git a/couchdb-sample-local.ini b/couchdb-sample-local.ini
@@ -0,0 +1,10 @@
+; ADD couch_jwt_auth TO AUTHENTICATION HANDLERS LIKE THIS:
+;[httpd]
+; authentication_handlers = ... {couch_jwt_auth, jwt_authentication_handler} ...
+
+[jwt_auth]
+  hs_secret = AUTH0_CLIENT_SECRET
+  validated_claims = iss,aud
+; iss claim example: "https://domain123.eu.auth0.com/"
+  validate_claim_iss = ["YOUR_AUTH0_DOMAIN"]
+  validate_claim_aud = ["AUTH0_CLIENT_ID"]
diff --git a/index.html b/index.html
@@ -8,6 +8,12 @@
     <!--[if IE]>
       <script src="style/ie.js"></script>
     <![endif]-->
+
+    <!-- Auth0Lock script -->
+    <script src="//cdn.auth0.com/js/lock-7.5.min.js"></script>
+
+    <!-- Setting the right viewport -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   </head>
   <body>
     <section id="todoapp">
@@ -21,6 +27,7 @@ <h1>todos</h1>
       <footer id="footer">
 	<span id="todo-count"></span>
         <div id="sync-wrapper">
+          <div id="sync-login"><input id="btn-login" type="button" value="Login" /> Click the login button and start syncing</div>
           <div id="sync-success">Currently syncing</div>
           <div id="sync-error">There was a problem syncing</div>
         </div>

diff --git a/js/app.js b/js/app.js
@@ -5,13 +5,17 @@
   var ENTER_KEY = 13;
   var newTodoDom = document.getElementById('new-todo');
   var syncDom = document.getElementById('sync-wrapper');
+  var loginDom = document.getElementById('btn-login');
 
   // EDITING STARTS HERE (you dont need to edit anything above this line)
-
+  // Look Auth0 ClientID and Domain from your Auth0 app settings
+  var lock = new Auth0Lock('CLIENT_ID', 'YOUR_AUTH0_DOMAIN.auth0.com');
+  // Replace with your CouchDB URL. Use https if you are testing outside localhost.
+  var remoteCouchURL = "http://127.0.0.1:5984/todos";
   var db = new PouchDB('todos');
 
   // Replace with remote instance, this just replicates to another local instance.
-  var remoteCouch = 'todos_remote';
+  var remoteCouch = false;
 
   db.changes({
     since: 'now',
@@ -152,6 +156,21 @@
 
   function addEventListeners() {
     newTodoDom.addEventListener('keypress', newTodoKeyPressHandler, false);
+
+    loginDom.addEventListener('click', function() {
+      // 'roles' is custom scope that is added by auth0 rule
+      lock.show({ authParams: { scope: 'openid roles' } }, function(err, profile, id_token) {
+        if (err) {
+          console.log("There was an error in login", err);
+          return;
+        }
+
+        remoteCouch = new PouchDB(remoteCouchURL, {headers: {'Authorization': 'Bearer ' + id_token}});
+        sync();
+      });
+
+      return false;
+    });
   }
 
   addEventListeners();

diff --git a/style/base.css b/style/base.css
@@ -411,6 +411,10 @@ label[for='toggle-all'] {
     display:none;
 }
 
+#sync-login {
+  display: block;
+}
+
 #sync-error, #sync-success {
   display: none;
 }
@@ -421,4 +425,12 @@ label[for='toggle-all'] {
 
 [data-sync-state=error] #sync-error {
   display: block;
+}
+
+[data-sync-state=syncing] #sync-login {
+  display: none;
+}
+
+[data-sync-state=error] #sync-login {
+  display: none;
 }