Callable functions with custom region not working, Unauthenticated error
- Dominant language
- TypeScript
- Stars
- 7.8k
- Forks
- 2.2k
- Avg merge
- 22h 28m
- Merged PRs (30d)
- 6
Description
### Version info
**Angular:**
15.2.2
**Firebase:**
9.23.0
**AngularFire:**
7.6.1
### How to reproduce these conditions
**Steps to set up and reproduce**
1. Create angular 15 project
2. Add angularfire
3. Create callable functions with custom region
### Debug output
** Errors in the JavaScript console **
```
main.fc6d01fc3332ae31.js:1 ERROR Error: Uncaught (in promise): Error: FirebaseError: Unauthenticated
Error: FirebaseError: Unauthenticated
```
** Output from `firebase.database().enableLogging(true);` **
How/where do I enable this?
Callable function:
```
import { region } from 'firebase-functions';
export const getInvoicesPerQuarter= region('europe-west1')
.https.onCall(async (data: { id: string; invoiceNumber: string }, context) => {
...
})
```
app.module.ts:
```
provideFunctions(() => {
const functions = getFunctions(getApp(), 'europe-west1');
// const functions = getFunctions();
if (environment.useEmulators) {
connectFunctionsEmulator(functions, 'localhost', 5001);
}
return functions;
}),
```
firebase.json:
```
{
"hosting": [
{
"rewrites": [
{
"source": "/getInvoicesPerQuarter",
"function": "getInvoicesPerQuarter"
}
]
},
```
angular component:
```
import { Functions, httpsCallableData } from '@angular/fire/functions';
const getInvoicesPerQuarterCallable: (data: {
year: number;
quarter: number;
}) => Observable = httpsCallableData<
{ year: number; quarter: number },
string
>(this.functions, 'getInvoicesPerQuarter');
const result = await firstValueFrom(
getInvoicesPerQuarterCallable({ year, quarter }),
);
```
Calling this callable function works in the emulator.
I deploy this to firebase.
I doesn't work on production and I get the Unauthenticated error.
I already contacted firebase support but everything looks fine and they say it's an AngularFire issue and can't help me.
Functions are V1.
Contributor guide
Research direction
Review the callable function definition, app.module.ts, firebase.json, and the Angular component using httpsCallableData, comparing the configured europe-west1 region with the deployed production setup. Reproduce the production call and trace why it returns Unauthenticated; done means the deployed V1 callable works from the Angular application without that error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, firebase, typescript
- Domain
- api, backend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100