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

@authillo/frontend-js

v0.0.11

Published

Frontend package to help accelerate authillo integration for javascript (or typescript) based frontends

Downloads

17

Readme

frontend-js

Frontend package to help accelerate authillo integration for javascript (or typescript) based frontends

Initialization

  1. Create Your platform

  2. Install @authillo/frontend-js

    Install the npm package by running the following command npm i @authillo/frontend-js
  3. Import the Authillo package

    We recommend that you import Authillo at the beginning of your frontend javascript code execution (you'll likely call this function in an index.(some-file-extension) file )
    import { Authillo } from "@authillo/frontend-js";
  4. Initialize Authillo Instance

    Initialize your Authillo instance with your platform’s configuration by calling the initialize function as outlined below
    Authillo.initialize({
    	clientId: "your_client_id",
    	defaultRedirectUri: "your_default_redirect_uri",
    });

Login or Verify a user

  1. Initialize your instance

    Ensure you've completed all the tasks in the initialization steps above

  2. Perform Authorization Request

    Perform the Authorization Request by calling the Authillo.begin() function with the relevant information you’d like the user to verify. During the Authorization request, the user will be redirected to authillo’s website to perform the relevant verifications

    Authillo.begin(["face"]);
  3. Handle User Returning

    We then redirect the user back to your site at the redirect_uri that you provided during the Authorization Request step (or to the defaultRedirectUri that you specified during Authillo.initialize() )

    • In this step, you’ll want to grab the authorizationCode and state parameters from the querystring parameters. For convenience, we’ve created a utility function that parses the parameters for you and returns them as a javascript object

    • const { code, state } = Authillo.parseResultsFromQueryString();
  4. Perform Token Request

    • Send a request from your frontend to your backend that includes the following information
      • the authorizationCode (stored in the code variable in the above code snippet)
      • the state (stored in the state variable in the above code snippet)
    • In your backend, perform the token request as outlined in authillo’s documentation
  5. Perform User Info Request

    • Once you’ve received tokens, you can perform a userInfo request as outlined in authillo’s documentation
  6. Return JWT

    • Return the user’s ID token to the frontend