App-check use with angular fire

[febg11]

Hi

I am trying to use firebase app check with my angular project. The docs say you need to do this

Add the following initialization code to your application, before you access any Firebase services

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate('abcdefghijklmnopqrstuvwxy-1234567890abcd');

I cant seem to find an easy way of doing this. I have tried using APP_INITIALIZER AND accessing the native firebase js obect using declare var but neither have worked/

I am using angularfire 6.1.5

I am not even sure how to access it. I have also tried importing the newest version of the native firebase js library. This also didnt work.

Sorry if this doesnt meet the criteria its just so new and app-check is so vague nothing comes up when i search for it.

Any help is greatly appreciated

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[febg11]

Version info

Angular:
10.2.5

Firebase:
8.6.0

AngularFire:
6.1.5

[felicksLindgren]

Was just starting to look at this feature as well. Searched a bit in the code and I feel it shouldn't be to hard to implement a extra field for security_token inside firebaseConfig and then reference it here:

angularfire/src/core/firebase.app.module.ts

Line 45 in 3e991a6

const app = (existingApp || zone.runOutsideAngular(() => firebase.initializeApp(options, config as any))) as FirebaseApp;

Just check if token exists then do appCheck otherwise keep going as before.

Maybe I'm way off here, I'm not sure.

[febg11]

It would also be really useful to have an input for the

<script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script>

That we could set in the environment.ts along with the recaptcha key

[abierbaum]

Has anyone found a way to get appcheck working inside an existing angularfire based application?

[febg11]

@abierbaum https://stackoverflow.com/questions/67908846/how-to-initialise-firebase-app-check-in-angular/67976943#67976943

Still seems super hacky as you seem to end up with 2 firebase apps.. It should really go through forRoot

[gongevangen]

https://stackoverflow.com/questions/67908846/how-to-initialise-firebase-app-check-in-angular/67976943#67976943 didn't work for me. Also I found that this feature turned it self off in the firebase console after a day, so maybe it's not really ready yet? Anyway I would love to implement it for my app, so I think Angular should implement support for it.

[alexookah]

any news about it?

[jjgriff93]

Also facing issues with this, would be great to see integration into the AngularFire library to account for app check

[jamesdaniels]

Addressing in #2940

[jamesdaniels]

Added in 7.1.0-rc.0

[MisterMunchkin]

Hi I've been following this issue because I wanted to add ReCaptchaV3 to my existing firebase app. I updated my @angular/fire to 7.1.0-rc.0 and firebase to 9.1.0 and fixed the compat stuff when upgrading but I get these errors:

Error: node_modules/@firebase/app-check/dist/app-check-public.d.ts:87:22 - error TS2420: Class 'CustomProvider' incorrectly implements interface 'AppCheckProvider'.
Type 'CustomProvider' is missing the following properties from type 'AppCheckProvider': getToken, initialize

87 export declare class CustomProvider implements AppCheckProvider {
~~~~~~~~~~~~~~

Error: node_modules/@firebase/app-check/dist/app-check-public.d.ts:171:22 - error TS2420: Class 'ReCaptchaV3Provider' incorrectly implements interface 'AppCheckProvider'.
Type 'ReCaptchaV3Provider' is missing the following properties from type 'AppCheckProvider': getToken, initialize

171 export declare class ReCaptchaV3Provider implements AppCheckProvider {

Version Info

Angular:
12.2.0

firebase:
9.1.0

AngularFire:
7.1.0-rc.0

[jamesdaniels]

How are you importing things? I've seen reports of similar issues, mostly when folk import from [at]firebase/, you should import from [at]angular/fire/ when using with Angular.

[jamesdaniels]

Here's my sample use, app.browser.module.ts app.server.module.ts