Ability to lazy load reCAPTCHA v3 site key

Summary

I’m submitting a:

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

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 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.

[DethAriel]

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';

@Injectable({
  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));
}

@NgModule({
  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 {}

[ayush013]

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