New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
oauth2-popup-flow
Advanced tools
oauth2-popup-flow - npm Package Compare versions
Comparing version 0.1.1 to 1.0.0
| { | ||
| "name": "oauth2-popup-flow", | ||
| "version": "0.1.1", | ||
| "version": "1.0.0", | ||
| "description": "A very simple oauth2 implicit flow library that uses window.open.", | ||
@@ -5,0 +5,0 @@ "main": "./dist/oauth2-popup-flow.js", |
| ``` | ||
| ____ _ _ ___ | ||
| / __ \ /\ | | | | |__ \ | ||
| ____ _ _ ___ | ||
| / __ \ /\ | | | | |__ \ | ||
| | | | | / \ _ _| |_| |__ ) | | ||
| | | | |/ /\ \| | | | __| '_ \ / / | ||
| | |__| / ____ \ |_| | |_| | | |/ /_ | ||
| | | | |/ /\ \| | | | __| '_ \ / / | ||
| | |__| / ____ \ |_| | |_| | | |/ /_ | ||
| \____/_/ \_\__,_|\__|_| |_|____| | ||
| /$$$$$$$ | ||
| | $$__ $$ | ||
| | $$ \ $$ /$$$$$$ /$$$$$$ /$$ /$$ /$$$$$$ | ||
| /$$$$$$$ | ||
| | $$__ $$ | ||
| | $$ \ $$ /$$$$$$ /$$$$$$ /$$ /$$ /$$$$$$ | ||
| | $$$$$$$//$$__ $$ /$$__ $$| $$ | $$ /$$__ $$ | ||
@@ -16,10 +16,10 @@ | $$____/| $$ \ $$| $$ \ $$| $$ | $$| $$ \ $$ | ||
| | $$ | $$$$$$/| $$$$$$$/| $$$$$$/| $$$$$$$/ | ||
| |__/ \______/ | $$____/ \______/ | $$____/ | ||
| | $$ | $$ | ||
| | $$ | $$ ______ _ | ||
| |__/ |__/ | ____| | | ||
| |__/ \______/ | $$____/ \______/ | $$____/ | ||
| | $$ | $$ | ||
| | $$ | $$ ______ _ | ||
| |__/ |__/ | ____| | | ||
| | |__ | | _____ __ | ||
| | __| | |/ _ \ \ /\ / / | ||
| | | | | (_) \ V V / | ||
| |_| |_|\___/ \_/\_/ | ||
| | | | | (_) \ V V / | ||
| |_| |_|\___/ \_/\_/ | ||
| ``` | ||
@@ -29,26 +29,30 @@ | ||
| ## A very simple oauth2 implicit grant flow library<br>with no dependencies that uses `window.open`. | ||
| ### A very simple oauth2 implicit grant flow library<br>with no dependencies that uses `window.open`. | ||
| * Simplicity as a feature—only 189 SLOC. | ||
| * No dependencies. | ||
| * Easily integrates with React, Angular, Vue etc. | ||
| * Never interrupt or reload the state of your client to login. | ||
| * To get a token, call `oauth2PopupFlow.token()` which returns a `Promise<string>` of the token. | ||
| * To get the payload, call `oauth2PopupFlow.tokenPayload()` which returns a `Promise<TokenPayload>`. | ||
| * Statically typed API via Typescript for use within Javascript or Typescript. | ||
| - Simplicity as a feature—only 209 SLOC. | ||
| - No dependencies. | ||
| - Easily integrates with React, Angular, Vue etc. | ||
| - Never interrupt or reload the state of your client to login. | ||
| - To get a token, call `oauth2PopupFlow.token()` which returns a `Promise<string>` of the token. | ||
| - To get the payload, call `oauth2PopupFlow.tokenPayload()` which returns a `Promise<TokenPayload>`. | ||
| - Statically typed API via Typescript for use within Javascript or Typescript. | ||
| ## Why the popup? | ||
| ### Why the popup? | ||
| If the user isn't logged in, the typical OAuth2 implicit grant flow forwards the user to the authorization server's login page (separate from your app) and then redirects them back. The issue with this is that it requires the app to be reloaded in order to grab a token. This reload complicates your application and may result in lost work due to the app reloading. | ||
| The popup is a simple solution that allows the 9e load the hosted login page that keep the state of your application. | ||
| The popup is a simple solution that allows the user to load the hosted login page and come back to your app while keeping the state of your application. | ||
| ## This library is great if: | ||
| ### This library is great if: | ||
| * You already use the implicit grant | ||
| * Your authorization server typically doesn't prompt the user to login | ||
| * You want the user to automatically be logged in and authenticated in your application | ||
| - You already use the implicit grant | ||
| - Your authorization server typically doesn't prompt the user to login | ||
| - You want the user to automatically be logged in and authenticated in your application | ||
| # Usage | ||
| ## Usage | ||
| ``` | ||
| npm install --save oauth2-popup-flow | ||
| ``` | ||
| ```ts | ||
@@ -59,6 +63,6 @@ import { OAuth2PopupFlow } from 'oauth2-popup-flow'; | ||
| interface TokenPayload { | ||
| exp: number, | ||
| other: string, | ||
| stuff: string, | ||
| username: string, | ||
| exp: number; | ||
| other: string; | ||
| stuff: string; | ||
| username: string; | ||
| } | ||
@@ -113,2 +117,11 @@ | ||
| getInfoFromToken().then(username => console.log({ username })); | ||
| // also implements EventTarget so you can add event listeners for `login` and `logout` | ||
| auth.addEventListener('login', () => { | ||
| console.log('user was logged in'); | ||
| }); | ||
| auth.addEventListener('logout', () => { | ||
| console.log('user was logged out'); | ||
| }); | ||
| ``` | ||
@@ -118,12 +131,12 @@ | ||
| ## Examples (WIP) | ||
| ### Examples (work-in-progress, contributions welcome) | ||
| * [No framework](./examples/vanilla) | ||
| * [Angular](./examples/angular) | ||
| * [React + React Router](./examples/react) | ||
| - [No framework](./examples/vanilla) | ||
| - [Angular](./examples/angular) | ||
| - [React + React Router](./examples/react-example) | ||
| ## Requirements | ||
| ### Requirements | ||
| * [`String.prototype.startsWith`][0] (you may need a polyfill if you're targeting IE etc) | ||
| - [`String.prototype.startsWith`][0] (you may need a polyfill if you're targeting IE etc) | ||
| [0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.1%
219436
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by10.4%
138
No dependency changes