Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to lazy load reCAPTCHA v3 site key

See original GitHub issue


I’m submitting a:

  • bug report
  • feature request
  • question / support request
  • other


Currently the v3 site key can only be provided by the RECAPTCHA_V3_SITE_KEY injection token which is of type string. It would be nice to have the ability to lazy load the site key (for example via a REST call) and assign it to the ReCaptchaV3Service once it’s loaded.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:15
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

DethArielcommented, Jul 23, 2021

There is now an idiomatic way to achieve that with Angular, which is using APP_INITIALIZER. The approach is demonstrated in this Stackblitz demo. In essence, here’s what’s being done there:

// config.service.ts
import { Injectable } from '@angular/core';

  providedIn: 'root'
export class ConfigService {
  public recaptchaSiteKeyV2: string | null = null;
  public recaptchaSiteKeyV3: string | null = null;

  public async loadConfig(): Promise<void> {
    const { siteKeyV2, siteKeyV3 } = await fetchConfig(/* some API call */);
    this.recaptchaSiteKeyV2 = siteKeyV2;
    this.recaptchaSiteKeyV3 = siteKeyV3;

// app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { RECAPTCHA_SETTINGS, RecaptchaSettings, RECAPTCHA_V3_SITE_KEY } from 'ng-recaptcha';

import { ConfigService } from './config.service';

function appLoadFactory(config: ConfigService) {
  return () =>
    config.loadConfig().then(() => console.log(`config resolved`, config));

  providers: [
      provide: RECAPTCHA_V3_SITE_KEY,
      useFactory: (config: ConfigService) => {
        return config.recaptchaSiteKeyV3;
      deps: [ConfigService]
      provide: RECAPTCHA_SETTINGS,
      useFactory: (config: ConfigService): RecaptchaSettings => {
        return { siteKey: config.recaptchaSiteKeyV2 };
      deps: [ConfigService]
      provide: APP_INITIALIZER,
      useFactory: appLoadFactory,
      deps: [ConfigService],
      multi: true
export class AppModule {}
ayush013commented, Oct 23, 2020

Hi @DethAriel,

The idea is to conditionally load the RECAPTCHA_V3_SITE_KEY (from an API call preferably) and then useValue for the provider.

We have something similar in Angular using APP_INITIALIZER. It enables us to use a certain value from config instead of hardcoding it in the module and services.

{ provide: APP_INITIALIZER, useFactory: initApp, multi: true, deps: [ConfigService] },

Full example here

Read more comments on GitHub >

github_iconTop Results From Across the Web

Loading reCAPTCHA - Google Developers
This document discusses best practices for loading the reCAPTCHA script tag. This information is applicable to both reCAPTCHA v2 and v3.
Read more >
Ability to lazy load reCAPTCHA v3 site key - Bountysource
Description. Currently the v3 site key can only be provided by the RECAPTCHA_V3_SITE_KEY injection token which is of type string . It would...
Read more >
Improve page performance lazy loading reCaptcha
After searching online for some ways to improve the situation, I found this article which explained how to solve all my issues. The...
Read more >
Improve web performance lazy loading reCaptcha
A super quick guide explaining how you can improve your Lighthouse score and overall web performance by lazy loading reCaptcha only when ...
Read more >
Load reCAPTCHA dynamically - javascript - Stack Overflow
body> ; div id="captcha_container"> ; div> ; input type="button" id="MYBTN" value="MYBTN"> ; script src="
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found