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

@roveroniandrea/webauth-wizardry

v1.0.4

Published

This repository contains experiments related to authentication and authorization between web server and clients.

Downloads

4

Readme

Web-auth Wizardry

This repository contains experiments related to authentication and authorization between web server and clients.

Why

Main purpose of this repo is to better understand how different authentication flows work, to experiment with them, and (possibly) to provide some ready-to-use code to ~~steal~~ borrow and past in other projects.

Disclaimer

THE OWNER OF THIS REPOSITORY DISCLAIMS ANY RESPONSIBILITY FOR THE USE OR CONSEQUENCES OF USING THIS CODE. IT IS RECOMMENDED TO CAREFULLY EVALUATE AND ADAPT THE CODE TO YOUR OWN NEEDS AND SECURITY STANDARDS.

High level flow

This repo will start by using PassportJS and some of its Strategies. In order to be as clean and easy to understand as possible, this code will try to separate things that can be made independently, giving flexibility to use different flows and/or integrating them together.

Main ares will be:

  • Authentication: Allows a user to receive a trusted identity. In order to do so, the user needs to resolve a challenge, its data needs to be created or fetched from the database, and optionally some other checks can be applied.

    This will be further divided into some steps:

    • Authenticating: Providing some sort of "proof" regarding the user that wants to sign-in, like a username/password or third party providers
    • Data fetching and constraints: Retrieving user infos from a database and applying optional checks, like banned users or already active sessions
    • Providing the identity to the client: Now that the server has asserted the user identity, it needs to make so that the client can make further request with this identity. For this scope, JWT and/or cookies can be used. In addition, this identity needs to be retrived on every request
  • Authorization: On each request made by the client, the server needs to assert that the user (or the identity) has the required permissions to access a certain resource, or to call that endpoint, or in general to do any action.

Building

To build only the src files (without tests) run npm run build. This starts building following tsconfig.build.json config, that specifies to exclude test folder. This also generates .d.ts files and sourcemaps as it extends tsconfig.json. NOTE: An additional rm -rf dist command is performed before build in order to clean the dist directory in case different build configuration had different build outputs

Testing

Tests are in test/ folder. To run them, use npm run test. This is configured to first build both the src and test folder using npm run build-test as pretest task, that builds with tsconfig.json file, that includes test folder into the build, in addition with generating .d.ts files and sourcemaps.

Optionally, you can use the VS Code Run test configuration that allows you to use the debugger. This is configured to launch test/index.spec.ts file, using npm: build-test as pre-launch task.

Additionally, use docker-compose up to create a container for Redis and Nginx

Why Docker, Redis, Nginx?

These are dependencies for the test server. Redis is used for authentication's data, while Nginx is used as a reverse proxy for a FE. The npm package is just the src folder. Everything else is used for setting up a testing BE and reverse proxy

Testing with a FE?

FE is currently on a separate repository. For a complete FE + BE + Redis + Nginx testing, the following configurations are set:

  • FE runs on http://localhost:5173, set by Vite config, and calls BE by same origin /api path
  • BE runs on http://localhost:3000, set by Express
  • Nginx listend at port :80 and proxies request both to :5173 and /api to :3000
  • Redis listens at port :6379 and Redis Insight at 8001

See dependencies

To see dependencies between each file, you may run the following command: npx ts_dependency_graph --start src/index.ts --graph_folder | dot -T svg > dependencygraph.svg

TODO: Some dependencies might be moved to devDependencies

Publishing

To publish, run npm publish (optionally with --dry-run flag to just simulate publishing and list all published files).

Package.json files property specifies that only dist files should be published, along with package.json and readme that are always added. Additionally, prepublishOnly script first builds the project (test excluded). This script replaces the deprecated prepublish script.

publishConfig property defines package's access level.

Resources used

For openId:

For Nginx as reverse proxy: