auth-component - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "auth-component",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "An Authenication Component for DoneJS",
@@ -5,0 +5,0 @@ "main": "src/auth-component.js",

README.md

 # auth-component
-An Authentication Component for DoneJS.
+A Collection of Authentication Tools for DoneJS.
+
+## The `<token-auth>` component
+
+The `token-auth` component makes it easy to implement JWT-based authentication for your application.
+
+```mustache
+<token-auth {^auth}="session"
+    key-location="authToken"
+    login-endpoint="http://localhost:8080/login"
+    username-field="email"
+    {(loading)}="loading"
+    remember-me >
+</token-auth>
+```
+Available attributes include
+ * `key-location` - The name of the location where the token will be stored in either SessionStorage or LocalStorage.
+ * `login-endpoint` - The url used to POST login data.
+ * `username-field` - used customize what parameter is sent to the server. default is `username`. 
+ * `remember-me` - Determines the longevity of the stored token. If enabled, the token will be stored in LocalStorage instead of SessionStorage.
+
+The `token-auth` component includes a loading indicator and a basic login form that overlay your application.  Future improvements will allow you to customize the template.
+
+<img src="token-auth.png" alt="token-auth component"/>
+
+
+## The `<session-auth>` component
+Coming in a future release.
+
+## Which type of authentication should I use?
+JWT auth, when executed correctly, is superior to cookie/session auth in a couple of potentially big ways:
+ - It's more secure.  Due to the way that browsers were designed to handle cookies, they are vulnerable to XSS attacks.  By not using cookies, these cookie-based attacks can be avoided.
+ - It's more efficient.  Many cookie/session auth implementations require more communication with a database server to retrieve user data for the verification process.  JWT tokens store that data inside the encrypted token, which eliminates the extra round trip to the database.
+
+One caveat to using token auth is that DoneJS's server-side rendering will not have access to the token.  This limits the server-side rendered parts of your app to information that is publicly available.  Your templates will still be able to be rendered on the server.  Any user-specific data will need to be requested by the browser.
+
+## Security
+This information isn't a comprehensive guide to security, but hopefully can be helpful in helping you to secure your application. If is other information that you think should be included here, please open an issue or submit a PR.
+
+If you see room for improvement in any of the provided modules, whether in features or in security improvements, please help out the community by opening issues or submitting a PR.

src/auth-spinner/auth-spinner.js

@@ -8,4 +8,3 @@ import Component from 'can/component/';
 export const ViewModel = Map.extend({
-  define: {
-  }
+  type: 'bar'
 });
@@ -12,0 +11,0 @@

src/token-auth/token-auth.js

@@ -47,3 +47,3 @@ import $ from 'jquery';
         }
-        return val;
+        return val.data;
       }
@@ -79,9 +79,34 @@ },
 
+  responseTokenPath: 'token',
+  responseDataPath: 'data',
+
   login(username, password){
-    var self = this, params = {};
+    var self = this;
+
+    this.attr('loggingIn', true);
+    this.attr('loginError', false);
+
+    var params = {};
     params[this.attr('usernameField')] = username;
     params[this.attr('passwordField')] = password;
-    this.sendLogin(params).then(function(response){
-      // console.log('login response: ', response);
+
+    self.sendLogin(params).then(function(response){
+      self.attr('loggingIn', false);
+      // Check for responseTokenPath and responseDataPath.
       self.attr('auth', response);
+
+    }, function(error){
+      self.attr('loggingIn', false);
+
+      var response = error.responseJSON;
+      if (response) {
+        switch(response.code){
+          case 401:
+            var message = response.message || self.attr('loginErrorMessage');
+            setTimeout(function(){
+              self.attr('loginError', message);
+            }, 10);
+            break;
+        }
+      }
     });
@@ -93,2 +118,3 @@ },
     this.sendLogin(params).then(function(response){
+      // Check for responseTokenPath and responseDataPath.
       // console.log('tokenLogin response: ', response);
@@ -99,11 +125,21 @@ self.attr('auth', response);
 
+  loggingIn: false,
+
   usernameField: 'username',
   passwordField: 'password',
 
+  loginErrorMessage: 'Invalid Login',
+  loginErrorClass: 'shake',
+
   sendLogin(params){
     var self = this;
+    // Login Admin by email (POST http://api.mma.dev:8080/login)
     return $.ajax({
+      url: self.attr('loginEndpoint'),
       method: 'POST',
+      headers: {
+        'Accept' : 'application/json',
+        'Content-Type': 'application/json'   
+      },
       contentType: 'application/json',
-      url: self.attr('loginEndpoint'),
       data: JSON.stringify(params)
@@ -110,0 +146,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

152576

increased by559.76%

Number of package files

27

increased by3.85%

Lines of code

207

increased by15%

Number of lines in readme file

41

increased by1266.67%

No dependency changes