Basic authentication issue (convert to another process?)

[cklanac]

@oampo @benjaminEwhite,

The dialog box used by basic authentication pops up when incorrect UN/PW submission.

The issue can be fixed by adding failWithError: true to the middleware as follows

const basicAuth = passport.authenticate('basic', { session: false, failWithError: true  });

This allows us to remove the www-authenticate header before sending the response which suppresses the built-in dialog.

app.use(function (err, req, res, next) {
  res.removeHeader('www-authenticate');
  next(err);
});

[cklanac]

Beyond fixing the issue with the above solution, we can consider changing to another form of authentication.

I considered Digest initially, but quickly found that it would be difficult to implement in our projects. The key issue is that digest hashes the password in the browser (hence the name) and if we override it with JS for SPAs and HTML forms then we need to hash the password in JS. So if we decide to switch, I suggest we change to Local. Below is a list of pros/cons

Basic Auth:

• Pros
  • Existing Curriculum, Syllabus, Code, Slides and Demos
  • Known authentication flow, kinks have been worked out
  • Built-in dialog is easily demoed with simple webpage
• Cons
  • Cannot be used with plain HTML form, must override form with JS (or use built-in dialog)
  • Dialog still prompts on incorrect UN/PW
    • Only happens with XMLHttpRequest ($.AJAX), not Fetch API
    • Possible to suppress by removing www-authenticate header

Digest Auth:

• Pros
  • Hashing of UN/PW provides more security. Can be used over HTTP (best practices suggest using HTTPS for everything so this advantage may not matter).
  • Uses the same built-in dialog as Basic Auth, so it is easily demoed with simple webpage.
• Cons
  • Hashed UN/PW is easily cracked (https://youtu.be/V-7M_6en5CM)
  • Uses the same built-in dialog as Basic Auth, so it needs to be overridden for use in a SPA (AJAX and Fetch)
  • Assume the dialog has the same problems with incorrect UN/PW
  • Overridding built-in system requires recreating the hashing and nonce in JS
    • https://stackoverflow.com/q/7159551

Local Auth:

• Pros
  • Follows the same pattern as BasicAuth so it is easy to swapped out
  • Works with plain HTML form POST which can be easily explained and demoed
    • Works well with success and failure redirects
  • Form submit can easily be overridden with JS for SPA
  • Well documented:
    • http://www.passportjs.org/docs/username-password
    • https://github.com/jaredhanson/passport-local
    • https://github.com/passport/express-4.x-local-example
• Cons
  • Not an official authentication specification
  • Requires adding bodyparser.urlencoded() to curriculum and sample repos
  • Arguably not as safe as Digest, requires HTTPS (which we suggest anyway)

[oampo]

Yep, I'm definitely for switching to Local Auth here. Fixes the issues with jQuery AJAX, and is just a simple (actually even a little simpler) than Basic Auth. The non-standardized thing is annoying, but I'm not going to lose any sleep over it.