# angular-passport

> Angular module for PassportJS login and API auth. Strategies: Basic, JWT & Hash

Latest version **1.0.6** (published 2017-02-09) · MIT (Freely you received, freely give. , Mt10:8) license · 0 weekly downloads

## Install

```sh
npm install angular-passport
pnpm add angular-passport
yarn add angular-passport
bun add angular-passport
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2017-02-09 |
| First published | 2016-09-14 |
| Weekly downloads | 0 |
| License | MIT (Freely you received, freely give. , Mt10:8) |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sasa Mikodanic |
| Maintainers | smikodanic |
| Keywords | angular, passportjs, npm, angular-passport, ngpassport |

## Links

- npm: https://www.npmjs.com/package/angular-passport
- Repository: https://github.com/smikodanic/angular-passport
- Homepage: https://github.com/smikodanic/angular-passport#readme
- Issues: https://github.com/smikodanic/angular-passport/issues
- npm.io page: https://npm.io/package/angular-passport

## Dependencies (8)

- [rimraf](https://npm.io/package/rimraf.md) ^2.5.4
- [browserify](https://npm.io/package/browserify.md) ^13.1.0
- [gulp-header](https://npm.io/package/gulp-header.md) ^1.8.8
- [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^2.0.0
- [gulp-compass](https://npm.io/package/gulp-compass.md) ^2.1.0
- [gulp-htmlmin](https://npm.io/package/gulp-htmlmin.md) ^2.0.0
- [vinyl-buffer](https://npm.io/package/vinyl-buffer.md) ^1.0.0
- [vinyl-source-stream](https://npm.io/package/vinyl-source-stream.md) ^1.1.0

## Alternatives

- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2017-02-09
- 1.0.5 — 2016-10-19
- 1.0.4 — 2016-10-19
- 1.0.3 — 2016-09-21
- 1.0.2 — 2016-09-16
- 1.0.1 — 2016-09-16
- 1.1.6 — 2016-09-14
- 1.1.5 — 2016-09-14
- 1.1.4 — 2016-09-14
- 1.1.3 — 2016-09-14
- 1.1.2 — 2016-09-14
- 1.1.1 — 2016-09-14
- 1.1.0 — 2016-09-14
- 1.0.0 — 2016-09-14

## README

# angular-passport
> Angular module for PassportJS login and API auth. Strategies: **Basic, JWT, Hash**

## Installation
`npm install angular-passport`

## Prerequisites
Include these modules in your app because they are required for `angular-passport` to work properly:
- ngCookies (<a href="https://docs.angularjs.org/api/ngCookies">https://docs.angularjs.org/api/ngCookies</a>)
- ui.router (<a href="https://github.com/angular-ui/ui-router">https://github.com/angular-ui/ui-router</a>)

	```javascript
	var clientApp = angular.module('clientApp', [
	    'ui.router',
	    'ngCookies',
	    'ngPassport.basicStrategy',
	    // 'ngPassport.JWTStrategy',
	    // 'ngPassport.hashStrategy'
	]);
	```


## Usage
### If you use Browserify

```javascript
var ngPassportBasic = require('angular-passport').ngPassportBasic;

/* configure */
ngPassportBasic.constant('NGPASSPORT_CONF_BASIC', {
    // API_BASE_URL: 'http://192.168.1.101:9005',
    API_BASE_URL: 'http://localhost:9005',
    API_AUTH_PATHNAME: '/examples/auth/passport/basicstrategy',
    URL_AFTER_SUCCESSFUL_LOGIN: '/examples-spa/login/basic/page1',
    URL_AFTER_LOGOUT: '/examples-spa/login/basic/form'
});
```

### If you include it into HTML file (compiled version)

```javascript
<script src="... /angular-passport/dist/js/ngPassport.js"></script>
<script>
    ngPassportHash.constant('NGPASSPORT_CONF_HASH', {
        API_BASE_URL: 'http://localhost:9005',
        API_AUTH_PATHNAME: '/examples/auth/passport/hashstrategy-gethash',
        URL_AFTER_SUCCESSFUL_LOGIN: '/examples-spa/login/hash/page1',
        URL_AFTER_LOGOUT: '/examples-spa/login/hash/form'
    });
</script>
```

---

## Directives
There are 2 directives in `angular-passport` to generate:

- **Login Form**

	```html
	<ngpassport-form></ngpassport-form>
	```

	```html
	<ngpassport-form templateurl="myBootstrapForm.html"></ngpassport-form>

	<!-- override default form template -->
	<script type="text/ng-template" id="myBootstrapForm.html">

	   <div>
	   		<form action="#" method="POST" enctype="application/x-www-form-urlencoded" class="form-horizontal">

				<div class="form-group">
					<label for="username" class="col-sm-4 control-label">username:</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" ng-init="username='john'" ng-model="username">
					</div>
				</div>

				<div class="form-group">
					<label for="password" class="col-sm-4 control-label">password:</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" ng-init="password='test'" ng-model="password">
					</div>
					<div class="col-sm-3">
						<input type="button" value="Login Basic" class="btn btn-success" ng-click="login()">
					</div>
				</div>

			</form>

			<p class="alert alert-danger" ng-if="errMsg">{{errMsg}}</p>
		</div>

	</script>
	```

- **Logout Button**
	```html
	<ngpassport-logout>Logout</ngpassport-logout>
	```

	```html
	<ngpassport-logout template-url="myBootstrapLogout.html">Logout</ngpassport-logout>

	<!-- override default form template -->
	<script type="text/ng-template" id="myBootstrapLogout.html">
	   	<a href="#" style="border:1px solid Gray;font-size:21px;padding:5px;" ng-click="logout()"><span class="glyphicon glyphicon-log-out"></span></a>
	</script>
	```


####Regular HTML
*Notice that you can also use regular HTML tags instead of angular directives. For example:*
```html
<button class="btn btn-success" ng-controller="NgPassportBasicCtrl" ng-click="logout()">Logout</button>
```

or

```html
	<!-- form created by standard HTML tags -->
	<form action="#" method="POST" enctype="application/x-www-form-urlencoded" class="form-horizontal" ng-controller="NgPassportBasicCtrl">

		<div class="form-group">
			<label for="username" class="col-sm-4 control-label">username:</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" ng-init="username='john'" ng-model="username">
			</div>
		</div>

		<div class="form-group">
			<label for="password" class="col-sm-4 control-label">password:</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" ng-init="password='test'" ng-model="password">
			</div>
			<div class="col-sm-3">
				<input type="button" value="Login Basic" class="btn btn-info" ng-click="login()">
			</div>
		</div>

		<p class="alert alert-danger" ng-if="errMsg">{{errMsg}}</p>
	</form>
```

### Protect routes (states) and API endpoints
All API endpoints are protected by default with $http interceptor, so each $http request is added with 'Authorization' header.

Route protection is also very simple. Just add `authRequired: true` inside your state definition, and state will not be accessible if authentication failed.

```javascript
/* state: 'examples-spa_login_jwt_page1'
 * url: /examples-spa/login/jwt/page1
 ************************/
module.exports = function (APPCONF) {
    'use strict';

    return {
        url: '/examples-spa/login/jwt/page1',
        views: {
            '': {
                templateUrl: APPCONF.PATH_DIST_HTML + '/examples-spa/login/jwt/page1/page1.html'
            },
            'topmenu@examples-spa_login_jwt_page1': {
                templateUrl: APPCONF.PATH_DIST_HTML + '/examples-spa/login/jwt/_common/topmenu/topmenu.html',
                controller: 'TopmenuJWTCtrl'
            }
        },

        authRequired: true

    };
};
```

---
---


### Basic Authentication
1. When user type username &amp; password in login form a string 'username:password' is encoded to base64 (john:test  =>  am9objp0ZXN0)
2. A request with header: `Authorization: Basic am9objp0ZXN0` is sent to API.
3. If auth was successful API returns object

	```json
	{
	 "isLoggedIn": true,
	 "msg": "Basic authentication was succcessfull.",
	   "putLocally": {
	   		"username": "john",
	   		"authHeader": "Basic am9objp0ZXN0"
	  	}
	}
	```

4. A cookie 'authAPI' is set with object `putLocally` .
5. Angular sets up interceptor with cookie data and each $http request sent to API is intercepted with
   *'Authorization':'Basic am9objp0ZXN0'* header



###JWT Authentication
1. User type username &amp; password and when Login button is clicked request
 `POST /examples/auth/passport/jwtstrategy-gettoken {username: 'john', password: 'test'}` is sent to API
2. Client receives respond object from API

	```javascript
	{
	  "isLoggedIn": true,
	  "msg": "Login was successful. JWT Token is generated and you can use it in request header to access API. Authorization: JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3YTcyNjk1MzcwYmM1MDk2MmUzNDVmZSIsImlhdCI6MTQ3Mzg2MDgyM30.R-OPMVRUXgZ2RK4iPkmEMWGbKg7iN_zJj1MA1cGBHWY",
	  "putLocally": {
	    "username": "john",
	    "authHeader": "JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3YTcyNjk1MzcwYmM1MDk2MmUzNDVmZSIsImlhdCI6MTQ3Mzg2MDgyM30.R-OPMVRUXgZ2RK4iPkmEMWGbKg7iN_zJj1MA1cGBHWY"
	  }
	}
	```

3. Object `putLocally` is used to create cookie 'authAPI' .
4. Angular sets up interceptor with cookie data and each $http request sent to API is intercepted with 'Authorization': 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3YTcyNjk1MzcwYmM1MDk2MmUzNDVmZSIsImlhdCI6MTQ3Mzg2MDgyM30.R-OPMVRUXgZ2RK4iPkmEMWGbKg7iN_zJj1MA1cGBHWY'


###Hash Authentication
*Notice: Hash string must be stored in database and returned by API on user's successful login*

1. User type username &amp; password and when Login button is clicked request
   `POST /examples/auth/passport/hashstrategy-gethash {username: 'john', password: 'test'}` is sent to API
2. Client receives respond object from API

	```javascript
	{
	  "isLoggedIn": true,
	  "msg": "Login was successful. Now you can use hash to access API endpoints. For example: /examples/auth/passport/hashstrategy/e7b1951a91718085f4382391c31ef175df72addddb",
	  "putLocally": {
	    "username": "john",
	    "hash": "e7b1951a91718085f4382391c31ef175df72addddb"
	  }
	}
	```

3. Object `putLocally` is used to create cookie 'authAPI' .
4. Angular sets up interceptor with cookie data and each $http request sent to API is intercepted by adding suffix to URL
   for example: *GET /examples/auth/passport/hashstrategy/e7b1951a91718085f4382391c31ef175df72addddb*




## Preconditions
1. Directive will send 'username' and 'password' object properties to API: **{username: 'john', password: 'test'}** .
   It is also possible to define some other variable names for example 'user', 'pass' if your API requires so.
2. API response object when username and password are correct must have this format:

	```json
	{
		"isLoggedIn": true,
	 	"msg": "Basic authentication was succcessfull.",
	 	"putLocally": {
	  		"username": "john",
	  		"authHeader": "Basic am9objp0ZXN0"
		}
	}
	```

3. Cookie will be set with 'putLocally' object, so it must have 'username' property.
4. Configuration constants
  - NGPASSPORT_CONF_BASIC
	```javascript
	var ngPassportBasic = require('angular-passport').ngPassportBasic;

	/* configure */
	ngPassportBasic.constant('NGPASSPORT_CONF_BASIC', {
	    // API_BASE_URL: 'http://192.168.1.101:9005',
	    API_BASE_URL: 'http://localhost:9005',
	    API_AUTH_PATHNAME: '/examples/auth/passport/basicstrategy',
	    URL_AFTER_SUCCESSFUL_LOGIN: '/examples-spa/login/basic/page1',
	    URL_AFTER_LOGOUT: '/examples-spa/login/basic/form'
	});

	module.exports = ngPassportBasic;
	```

  - NGPASSPORT_CONF_JWT
	```javascript
	var ngPassportJWT = require('angular-passport').ngPassportJWT;

	/* configure */
	ngPassportJWT.constant('NGPASSPORT_CONF_JWT', {
	    // API_BASE_URL: 'http://192.168.1.101:9005',
	    API_BASE_URL: 'http://localhost:9005',
	    API_AUTH_PATHNAME: '/examples/auth/passport/jwtstrategy-gettoken',
	    URL_AFTER_SUCCESSFUL_LOGIN: '/examples-spa/login/jwt/page1',
	    URL_AFTER_LOGOUT: '/examples-spa/login/jwt/form'
	});

	module.exports = ngPassportJWT;
	```

  - NGPASSPORT_CONF_HASH
  	```javascript
  	var ngPassportHash = require('angular-passport').ngPassportHash;

	/* configure */
	ngPassportHash.constant('NGPASSPORT_CONF_HASH', {
	    API_BASE_URL: 'http://192.168.1.101:9005',
	    // API_BASE_URL: 'http://localhost:9005',
	    API_AUTH_PATHNAME: '/examples/auth/passport/hashstrategy-gethash',
	    URL_AFTER_SUCCESSFUL_LOGIN: '/examples-spa/login/hash/page1',
	    URL_AFTER_LOGOUT: '/examples-spa/login/hash/form'
	});

	module.exports = ngPassportHash;
 	```

---
_Source: https://npm.io/package/angular-passport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._