{ "_from": "angular2-jwt-session", "_id": "angular2-jwt-session@0.1.2", "_inBundle": false, "_integrity": "sha1-NEGeeaa4Lxv5UQyzYVERdHTo/Cc=", "_location": "/angular2-jwt-session", "_phantomChildren": {}, "_requested": { "escapedName": "angular2-jwt-session", "fetchSpec": "latest", "name": "angular2-jwt-session", "raw": "angular2-jwt-session", "rawSpec": "", "registry": true, "saveSpec": null, "type": "tag" }, "_requiredBy": [ "#USER", "/" ], "_resolved": "https://registry.npmjs.org/angular2-jwt-session/-/angular2-jwt-session-0.1.2.tgz", "_shasum": "34419e79a6b82f1bf9510cb36151117474e8fc27", "_spec": "angular2-jwt-session", "_where": "/home/parthi/Projects/Petro_Project_4/Petro", "author": { "name": "ratnam" }, "bugs": { "url": "https://github.com/ratnam99/Angular2-JWTSession/issues" }, "bundleDependencies": false, "dependencies": {}, "deprecated": false, "description": "Helper library for handling JWTs in Angular 2+", "devDependencies": { "@angular/common": "^2.4.2||^4.0.0", "@angular/compiler": "^2.4.2||^4.0.0", "@angular/compiler-cli": "^2.4.2||^4.0.0", "@angular/core": "^2.4.2||^4.0.0", "@angular/http": "^2.4.2||^4.0.0", "@angular/platform-browser": "^2.4.2||^4.0.0", "@types/jasmine": "^2.5.46", "@types/js-base64": "^2.1.3", "awesome-typescript-loader": "^3.1.2", "core-js": "^2.3.0", "es6-shim": "^0.35.3", "jasmine-core": "^2.4.1", "karma": "^1.5.0", "karma-chrome-launcher": "^2.0.0", "karma-jasmine": "^1.0.2", "karma-phantomjs-launcher": "^1.0.4", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.3", "phantomjs-prebuilt": "^2.1.7", "reflect-metadata": "^0.1.10", "rxjs": "^5.0.0", "typescript": "~2.1.5", "webpack": "^2.3.1", "zone.js": "~0.7.2||~0.8.5" }, "homepage": "https://github.com/auth0/angular2-jwt-session#readme", "keywords": [ "angular", "angular jwt session", "angular2", "authentication", "jwt", "keep me logged in" ], "license": "MIT", "main": "angular2-jwt.js", "name": "angular2-jwt-session", "optionalDependencies": {}, "peerDependencies": { "@angular/core": "^2.0.0||^4.0.0", "@angular/http": "^2.0.0||^4.0.0", "rxjs": "^5.0.0" }, "readme": "# angular2-jwt-session\n[![Build Status](https://travis-ci.org/ratnam99/Angular2-JWTSession.svg?branch=master)]\n[![npm version](https://img.shields.io/npm/v/angular2-jwt-session.svg)](https://www.npmjs.com/package/angular2-jwt-session) [![license](https://img.shields.io/npm/l/angular2-jwt-session.svg)]\n\n**angular2-jwt-session** is a helper library for working with [JWTs](http://jwt.io/introduction) in your Angular 2 applications. Also it can be used to implement \"Keep me logged in feature\" with the help of local storage and session storage.\n\n\n## Contents\n - [What is this Library for?](#what-is-this-library-for)\n - [Key Features](#key-features)\n - [How to install?](#how-to-install)\n - [Configurations Required](#configurations-required)\n - [Sending Authenticated Requests](#sending-authenticated-requests)\n - [Configuration Options](#configuration-options)\n - [Advanced Configuration](#advanced-configuration)\n - [Sending Per-Request Headers](#sending-per-request-headers)\n - [Using the Observable Token Stream](#using-the-observable-token-stream)\n - [Using JwtHelper in Components](#using-jwthelper-in-components)\n - [Checking Authentication to Hide/Show Elements and Handle Routing](#checking-authentication-to-hideshow-elements-and-handle-routing)\n - [Keep me logged in](#keep-me-logged-in)\n - [Issue Reporting](#issue-reporting)\n - [Author](#author)\n - [License](#license)\n\n## What is this Library for?\n\n**angular2-jwt-session** is a small and unopinionated library that is useful for automatically attaching a [JSON Web Token (JWT)](http://jwt.io/introduction) as an `Authorization` header when making HTTP requests from an Angular 2 app. It also has a number of helper methods that are useful for doing things like decoding JWTs.\n\nThis library does not have any functionality for (or opinion about) implementing user authentication and retrieving JWTs to begin with. Those details will vary depending on your setup, but in most cases, you will use a regular HTTP request to authenticate your users and then save their JWTs in local storage or session storage or in a cookie if successful.\n\n\nThe library comes with several helpers that are useful in your Angular 2 apps.\n\n1. `AuthHttp` - allows for individual and explicit authenticated HTTP requests\n2. `tokenNotExpired` - allows you to check whether there is a non-expired JWT in local storage or session storage. This can be used for conditionally showing/hiding elements and stopping navigation to certain routes if the user isn't authenticated\n\n\nThis library not only attaches a JWT but also can be easily used to implement \"Keep me logged in\", \"Stay signed in\" or \"Remember me\" feature in your web app.\n\n\n\n## Key Features\n\n* Send a JWT on a per-request basis using the **explicit `AuthHttp`** class\n* **Decode a JWT** from your Angular 2 app\n* Check the **expiration date** of the JWT\n* Conditionally allow **route navigation** based on JWT status\n* Implement \"Keep me logged in\" feature\n\n\n## How to Install?\n\n```bash\nnpm install angular2-jwt-session --save\n```\n\n## Configurations Required\n\nCreate a new `auth.module.ts` file with the following code:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { Http, RequestOptions } from '@angular/http';\nimport { AuthHttp, AuthConfig } from 'angular2-jwt-session';\n\nexport function authHttpServiceFactory(http: Http, options: RequestOptions) {\n return new AuthHttp(new AuthConfig(), http, options);\n}\n\n@NgModule({\n providers: [\n {\n provide: AuthHttp,\n useFactory: authHttpServiceFactory,\n deps: [Http, RequestOptions]\n }\n ]\n})\nexport class AuthModule {}\n```\n\nWe added a factory function to use as a provider for `AuthHttp`. This will allow you to configure angular2-jwt-session in the `AuthConfig` instance later on.\n\n\n## Sending Authenticated Requests\n\nIf you wish to only send a JWT on a specific HTTP request, you can use the `AuthHttp` class. This class is a wrapper for Angular 2's `Http` and thus supports all the same HTTP methods.\n\n```ts\nimport { AuthHttp } from 'angular2-jwt-session';\n// ...\nclass App {\n\n someThing: string;\n\n constructor(public authHttp: AuthHttp) {}\n\n getSomething() {\n this.authHttp.get('http://example.com/api/something')\n .subscribe(\n data => this.someThing = data,\n err => console.log(err),\n () => console.log('Request Complete')\n );\n }\n}\n```\n\n\n## Configuration Options\n\n`AUTH_PROVIDERS` gives a default configuration setup:\n\n* Header Name: `Authorization`\n* Header Prefix: `Bearer`\n* Token Name: `token`\n* Token Getter Function: `(() => localStorage.getItem(tokenName) or sessionStorage.getItem(tokenName))`\n* Supress error and continue with regular HTTP request if no JWT is saved: `false`\n* Global Headers: none\n\nIf you wish to configure the `headerName`, `headerPrefix`, `tokenName`, `tokenGetter` function, `noTokenScheme`, `globalHeaders`, or `noJwtError` boolean, you can using `provideAuth` or the factory pattern (see below).\n\n#### Errors\n\nBy default, if there is no valid JWT saved, `AuthHttp` will return an Observable `error` with 'Invalid JWT'. If you would like to continue with an unauthenticated request instead, you can set `noJwtError` to `true`.\n\n#### Token Scheme\n\nThe default scheme for the `Authorization` header is `Bearer`, but you may either provide your own by specifying a `headerPrefix`, or you may remove the prefix altogether by setting `noTokenScheme` to `true`.\n\n#### Global Headers\n\nYou may set as many global headers as you like by passing an array of header-shaped objects to `globalHeaders`.\n\n### Advanced Configuration\n\nYou may customize any of the above options using a factory which returns an `AuthHttp` instance with the options you would like to change.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { Http, RequestOptions } from '@angular/http';\nimport { AuthHttp, AuthConfig } from 'angular2-jwt-session';\n\nexport function authHttpServiceFactory(http: Http, options: RequestOptions) {\n return new AuthHttp(new AuthConfig({\n tokenName: 'token',\n\t\ttokenGetter: (() => sessionStorage.getItem('token')),\n\t\tglobalHeaders: [{'Content-Type':'application/json'}],\n\t}), http, options);\n}\n\n@NgModule({\n providers: [\n {\n provide: AuthHttp,\n useFactory: authHttpServiceFactory,\n deps: [Http, RequestOptions]\n }\n ]\n})\nexport class AuthModule {}\n```\n\n### Sending Per-Request Headers\n\nYou may also send custom headers on a per-request basis with your `authHttp` request by passing them in an options object.\n\n```ts\ngetSomeThing() {\n let myHeader = new Headers();\n myHeader.append('Content-Type', 'application/json');\n\n this.authHttp.get('http://example.com/api/something', { headers: myHeader })\n .subscribe(\n data => this.someThing = data,\n err => console.log(error),\n () => console.log('Request Complete')\n );\n\n // Pass it after the body in a POST request\n this.authHttp.post('http://example.com/api/something', 'post body', { headers: myHeader })\n .subscribe(\n data => this.someThing = data,\n err => console.log(err),\n () => console.log('Request Complete')\n );\n}\n```\n\n### Using the Observable Token Stream\n\nIf you wish to use the JWT as an observable stream, you can call `tokenStream` from `AuthHttp`.\n\n```ts\ntokenSubscription() {\n this.authHttp.tokenStream.subscribe(\n data => console.log(data),\n err => console.log(err),\n () => console.log('Complete')\n );\n}\n```\n\nThis can be useful for cases where you want to make HTTP requests out of observable streams. The `tokenStream` can be mapped and combined with other streams at will.\n\n\n## Using JwtHelper in Components\n\nThe `JwtHelper` class has several useful methods that can be utilized in your components:\n\n* `decodeToken`\n* `getTokenExpirationDate`\n* `isTokenExpired`\n\nYou can use these methods by passing in the token to be evaluated.\n\n```ts\njwtHelper: JwtHelper = new JwtHelper();\n\nuseJwtHelper() {\n var token = localStorage.getItem('token');\n\n console.log(\n this.jwtHelper.decodeToken(token),\n this.jwtHelper.getTokenExpirationDate(token),\n this.jwtHelper.isTokenExpired(token)\n );\n}\n```\n\n\n## Checking Authentication to Hide/Show Elements and Handle Routing\n\nThe `tokenNotExpired` function can be used to check whether a JWT exists in local storage or session storage, and if it does, whether it has expired or not. If the token is valid, `tokenNotExpired` returns `true`, otherwise it returns `false`.\n\n> **Note:** `tokenNotExpired` will by default assume the token name is `token` unless a token name is passed to it, ex: `tokenNotExpired('token_name')`. This will be changed in a future release to automatically use the token name that is set in `AuthConfig`.\n\n```ts\n// auth.service.ts\n\nimport { tokenNotExpired } from 'angular2-jwt-session';\n\nloggedIn() {\n return tokenNotExpired();\n}\n```\n\nThe `loggedIn` method can now be used in views to conditionally hide and show elements.\n\n```html\n \n \n```\n\nTo guard routes that should be limited to authenticated users, set up an `AuthGuard`.\n\n```ts\n// auth-guard.service.ts\n\nimport { Injectable } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { CanActivate } from '@angular/router';\nimport { Auth } from './auth.service';\n\n@Injectable()\nexport class AuthGuard implements CanActivate {\n\n constructor(private authenticate: Auth, private router: Router) {}\n\n canActivate() {\n if(this.authenticate.loggedIn()) {\n return true;\n } else {\n this.router.navigate(['unauthorized']);\n return false;\n }\n }\n}\n```\n\nWith the guard in place, you can use it in your route configuration.\n\n```ts\nimport { AuthGuard } from './auth.guard';\n\nexport const routes: RouterConfig = [\n { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },\n { path: 'unauthorized', component: UnauthorizedComponent }\n];\n```\n\n\n## Keep me logged in\n\nOnce you become aware of the working of this library and how to use it, it becomes very simple to implement the \"Keep me logged in\" or \"stay signed in\" feature in your web app.\n\nFor this, I assume you have done all the above configurations and have generated JWTs. To implement this feature, you need to add a checkbox to your login page and model it with a boolean \"rememberMe\" which is by default false. On checking the checkbox this value changes to true and on unchecking the checkbox it becomes false. This boolean is to be stored in local storage when login button is clicked.\n\nNow comes the logic, when the login button is pressed and rememberMe is true (i.e. checkbox is checked) the JWT is stored in the local storage using `localStorage.setItem(JWT)`. And if the login button is pressed and rememberMe is false (i.e. checkbox is not checked or unchecked) the JWT is stored in the sessionStorage using `sessionStorage.setItem(JWT)`.\n\nAll the other authentications, comparisons during naviagtion or during sending requests are handled by JWTHelper, AuthHttp and AuthConfig.\n\nThe \"Keep me logged in\" feature becomes very simple to implement using this library. \n\n\n\n\n## Issue Reporting\n\nIf you have found a bug or if you have a feature request, please report them at this [repository](https://github.com/ratnam99/Angular2-JWTSession.git) issues section. Please do not report security vulnerabilities on the public GitHub issue tracker.\n\n\n## Author\n\n[Kumar Ratnam Pandey](https://github.com/ratnam99) (Software Developer at [Geekyants](https://geekyants.com/))\n\n\n## License\n\nThis project is licensed under the MIT license.\n", "readmeFilename": "README.md", "repository": { "url": "git+https://github.com/ratnam99/Angular2-JWTSession.git" }, "scripts": { "dev": "tsc --watch", "ngc": "ngc", "prepublish": "tsc", "test": "karma start" }, "types": "./angular2-jwt.d.ts", "typings": "./angular2-jwt.d.ts", "version": "0.1.2" }