Beginner whose tinkering with an angular app connecting to a Firebase RTDB and trying to implement App Check. I'm hoping that I'm missing something simple...
In the Firebase console > settings > App Check > RTDB / App Check request metrics - All my requests show as "Unverified: outdated client requests"
When enforced, I'm getting 401 errors in the browser console when trying to read the DB (which is what I'd expect as my requests were being denied) and when unenforced I can access the RTDB and read/write as expected (so it's not any DB security rules)
Versions: Angular CLI: 13.2.1
Node: 16.12.2
NPM: 8.2.1
OS: Darwin arm64
@angular/fire: 7.2.0
Firebase CLI: 10.1.4
app.module.ts:
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import firebase from 'firebase/compat/app';
import { environment } from '../environments/environment';
...
firebase.initializeApp(environment.firebaseConfig)
console.log("FB: " + environment.firebaseConfig.databaseURL)
const appCheck = firebase.appCheck()
appCheck.activate(RECAPTCHA_V3_SITE_KEY)
console.log("TOKEN")
...
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule,
]
...
providers: [
{
provide: RECAPTCHA_V3_SITE_KEY,
useValue: environment.appCheckSiteKey
}
DB Read function:
getItem(itemUID: string): Observable<PublicItem>{
return this.http.get<PublicItem>(`${this.refURL}/items/${itemUID}/det.json`);
}
When testing I'm ng serve --configuration production
I've (against recommendations) enabled localhost in the captcha domains (yes i will remove this) as well as the domains I'm using, but the issue still occurs when using firebase hosting. I have implemented recaptcha V3 in another area of the app prior to writing the the DB and all this seems to be working correctly.
Database access works when unenforced in Firebase, so I know my environment and db read code is working, I can see the requests in the app check metrics so my public and secret recaptcha keys are correct in my app and Firebase. When hovering over the tool tip for "Unverified: outdated client requests" it says "... typically from an older version of the Firebase SDK before App Check was included in the app " - bust as far as i can tell everything is up to date...
The only errors in the browser console are the 401: Unauthorized
when attemping to access the db URL to pull data.
Sadly my poor angular and web dev skills mean there's a lot I don't understand and am still reverse engineering solutions from here and the documentations, but both are lacking in steps I can understand... Can anyone spot anything? Should I be calling appCheck somewhere else? Is there a token I use when reading? The more I dig the more lost I become...
Thanks