npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

authentication-popups

v0.0.8

Published

Server and client utils for implementing popup-based authentication flows

Downloads

28

Readme

authentication-popups

Build Status Code Climate Test Coverage Dependency Status Download Status Slack Status

Server and client utils for implementing popup-based authentication flows

Installation

npm install authentication-popups --save

Documentation

This package includes a few useful tools for implementing popup-based OAuth login flows. It contains utility functions for the browser and middleware for the server.

Using the Client Utils

There are two client utilities: one to assist with opening popups, and another to assist in cross-window communication.

openLoginPopup(url, options)

Opens a centered popup window at the given url.

import openLoginPopup from 'authentication-popups';

openLoginPopup('/auth/github');
  1. url {String}: The URL of the new window.
  2. options {Object}: optional - allows for customizing the width and height of the popup window.

The default options are:

  • width: 1024,
  • height: 630

authAgent

An EventEmitter automatically assigned as a global at window.authAgent to allow popup windows to send information back to the main window. Both windows must be on the same domain for this to work.

Usage in the primary application window:

// Adds 
import 'authentication-popups';

function doSomethingWithToken (token) {
	// Do something with the token
}

window.authAgent.on('login', doSomethingWithToken);

The doSomethingWithToken function will run when the 'login' event is emitted on window.authAgent.

Usage in the popup window on the same domain:

var token = readCookie('feathers-jwt');

// Trigger the 'login' event on the main window's `authAgent`
window.opener.authAgent.emit('login', token);

authAgent.on(eventName, handler)

Adds an event listener to the authAgent whose handler runs every time the event with given eventName is triggered.

  1. eventName {String}: The name of the event to subscribe to.
  2. handler {Function}: A function to be executed to handle the event.

authAgent.once(eventName, handler)

Adds an event listener to the authAgent whose handler runs only once when the event with given eventName is triggered.

  1. eventName {String}: The name of the event to subscribe to.
  2. handler {Function}: A function to be executed to handle the event.

authAgent.off(eventName, handler)

Removes a handler function from the authAgent

  1. eventName {String}: The name of the event to unsubscribe from.
  2. handler {Function}: A reference to a previously-subscribed function to be unsubscribed.

`authAgent.emit(eventName, args)

Triggers the event attached to the provided eventName and calls the subscribed handlers with the args.

  1. eventName {String}: The name of the event to trigger.
  2. args {any}: arguments to be passed to event handlers, usually authentication-related information (like a JSON Web Token).

Using the Express Middleware

The Express middleware is meant to be registered as the success callback of a Feathers authentication workflow.

successHandler(options|cookieName)

Creates Express middleware that handles successful auth by returning an HTML page that:

  • Pulls the token from the cookie location.
  • Sends the token to the parent window through the authAgent.
  • Closes the popup window.
var successHandler = require('authentication-popups/middleware');

// Pass an object containing a `name` attribute.
var options = app.get('cookie');
app.get('/auth/success', successHandler(options));

// Or pass a string for the cookie name.
app.get('/auth/success', successHandler('feathers-jwt'));
  1. options {Object}: An object with a name attribute.
  2. cookieName {String}: The cookie name.

License

Copyright (c) 2016

Licensed under the MIT license.