How do I implement firebase app-check in my Angular 12 application

Question

I've tried the solutions provided in this question

Here's my code

// firebase-init.ts
import firebase from 'firebase/app';

import 'firebase/app-check';

import { environment } from 'src/environments/environment';

const app = firebase.initializeApp(environment.firebase);
const appCheck = app.appCheck();

appCheck.activate('KEY_HERE');

And here's my import to app.module.ts

// app.module.ts
import './firebase-init'

I'm using Angular Universal for Server Side Rendering. Please help. What I'm I doing wrong?

Answer 1

By the look of it it seems you are using the DEBUG TOKEN VALUE (generated in the console). Try using reCaptcha key and see if that resolves the issue.

Replace this: appCheck.activate('6LeatjUbAAAAAGn_iRsWgEFyf-lubXOUkaqyEJLJ');

With this: appCheck.activate('reCAPTCHA secret key');

Hint: click on the app row instead of context menu icon (three dots). It will slide down another row where you can see the reCaptcha button.