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

@apostrophecms/login-recaptcha

v1.2.0

Published

Adds reCAPTCHA v3 to Apostrophe login pages

Downloads

145

Readme

This login verification module adds a reCAPTCHA check when any user logs into the site. It uses reCAPTCHA v3, which means that the test is invisible aside from a reCAPTCHA logo at the bottom of the screen.

Installation

To install the module, use the command line to run this command in an Apostrophe project's root directory:

npm install @apostrophecms/login-recaptcha

Usage

Instantiate the reCAPTCHA login module in the app.js file:

require('apostrophe')({
  shortName: 'my-project',
  modules: {
    '@apostrophecms/login-recaptcha': {}
  }
});

The other requirement is to add reCAPTCHA site and secret keys to the @apostrophecms/login module (not this module). This module adds functionality to that module (it "improves" it, in Apostrophe speak), so most configuration should be directly on the core login module.

// modules/@apostrophecms/login/index.js
module.exports = {
  options: {
    recaptcha: {
      site: 'ADD YOUR SITE KEY',
      secret: 'ADD YOUR SECRET KEY'
    }
  }
};

Once configured, reCAPTCHA verification should work on all login attempts.

Content security headers

If your site has a content security policy, including if you use the Apostrophe Security Headers module, you will need to add additional configuration to use this module. This module adds a script tag to the site's head tag fetching reCAPTCHA code. That reCAPTCHA code also constructs an iframe. The external script and iframe use the www.google.com and www.gstatic.com domains, so we need to allow resources from that domain.

If you are using the Apostrophe Security Headers module, add the following policy configuration for that module:

module.exports = {
  options: {
    policies: {
      'login-recaptcha': {
        'script-src': 'www.google.com www.gstatic.com',
        'frame-src': 'www.google.com'
      },
      // Any other policies...
    }
  }
};

If your content security policy is configured some other way, add www.google.com to the frame-src directive and www.google.com www.gstatic.com to the script-src directive.