nodestrap-auth

v0.1.1

Published

2 years ago

A NodeJS module that adds Bootstrap based in-page login/password management functionality with user data stored in Parse.

Downloads

0High
0Medium
0Low

vchatterji

parse nodestrap bootstrap login authentication password

Nodestrap Auth

SSO, Localization, Multi-site for NodeJS in 10 lines of code

What is Nodestrap Auth?

As a developer I have often faced the frustration of trying to cleanly separate the front-end marketing markup HTML of a product/site from its user management system.

Furthermore, as new experiments start within a company, the whole process is repeated and there is seldom coherence in the user management strategy across multiple sites.

Ideally, we would want to empower a marketing/design/sales team to make tweaks to the front-end markup and try experiments as quickly as possible. Yet, at the same time, we would like to maintain a coherence in the user management strategy across all product experiments that a company may try.

i.e. one login to rule them all and in the code unite them.

Nodestrap is not OAuth

You might be thinking isn't OAuth the easy solution for this? What about Facebook login or Google etc. Yes there exist multiple solutions to this problem out there. The focus of this project was to support a pluggable architecture and especially make use of Javascript for many things which currently require redirects. Using Javascript, this project attempts an "in page" login strategy as opposed to being directed to a central identity server like in OAuth.

Show me how this works!

Nodestrap works in multi-site and single-site mode. We shall first illustrate the single-site scenario.

In this scenario, you have frontend (let's say in an S3 bucket with CDN). You want to add user management to the HTML.

Let's say the frontend resides at http://localhost:3000 (for illustrative purposes)

We want to add a Login and Register buttons to http://localhost:3000 and also code that shows a user is currently logged in with a drop down menu for the user to return to the account area (http://localhost:5000).

To do this, first modify http://localhost:3000/index.html. A minimal listing is shown below:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/alertify.js/0.3.11/themes/alertify.core.css">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/alertify.js/0.3.11/themes/alertify.default.css">
</head>
<body>
	<div class="nodestrap_unauthenticated" style="display:none">
		<button class="btn btn-primary" onclick="nodestrap.showLogin('http://localhost:5000/app')">Login</button>
		<button class="btn btn-danger" onclick="nodestrap.showRegister('http://localhost:5000/app')">Register</button>
	</div>
	<div class="dropdown nodestrap_authenticated" style="display:none;">
	  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
	    <span class="nodestrap_username"></span>&nbsp;&nbsp;
	    <span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
	    <li role="presentation"><a role="menuitem" tabindex="-1" href="http://localhost:5000/app">Go to account area</a></li>
		<li role="presentation" class="divider"></li>
	    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" onclick="nodestrap.logout('http://localhost:3000')">Logout</a></li>
	  </ul>
	</div>
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="//cdn.jsdelivr.net/alertify.js/0.3.11/alertify.min.js"></script>
	<script src="http://localhost:5000/nodestrap/nodestrap.js" type="text/javascript"></script>
</body>
</html>

The listing above will show two buttons for Login and Register when no user is logged in. Otherwise, it will show a drop down to take the user to the account area or Logout.

The Nuts and Bolts

Modifying a static HTML file was easy enough, now let's see how to configure Node.

We assume you know how to create a Node project using npm init, after you have created the project, install Nodestrap

npm install nodestrap-auth --save

Now create a file index.js with the following minimum configuration.

var express = require('express');
var app = express();
var path = require('path');
var nodestrap = require('nodestrap-auth');

app.set('port', process.env.PORT || 5000);
//Setup local public folder for html
app.use("/", express.static(path.join(__dirname, "public")));

var options = {
	parse: {
		app_id: "........................................",
		app_key:"........................................"
	},
	app_path:path.join(__dirname, "private"),
	login_path:"http://localhost:3000",
	identity_server: "http://localhost:5000"
};

nodestrap(app, options);

//listen up
app.listen(app.get('port'), function(){
  //and... we're live
  console.log('Listening on port ' + app.get('port'));
});

Run the server

node index.js

You should now be able to login from http://localhost:3000

To download the samples shown here, please download the file titled in-page-login-demo.zip which is included in the repository.

More advanced configuration options such as using Redis and localization coming soon....

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Nodestrap Auth

What is Nodestrap Auth?

Nodestrap is not OAuth

Show me how this works!

The Nuts and Bolts