Description
The Setup
I have an Angular application which is hosted by a Spring Boot application. This application is deployed with Cloud Run on GCP which means the domain is not running under project-name.firebase.com, but instead under something.run.app
Since the web-app is mobile-focused, I am required to handle sign-ins via redirect. Hence, I am following redirect best practices from the documentation.
Note: I am actually not sure why I have to do this. Logging in form the localhost always used to work. The reason why I am doing all this is actually production. I wasn't able to login on the production deployment which led me down the rabbit hole of "how to best practive on redirects".
There, option 3 suggests to proxy any /__/auth requests, which is what I am doing by configuring my Spring Boot server as a proxy for any requsts on said paths:
spring:
cloud:
gateway:
routes:
- id: firebase-auth
uri: "xxxxxxxxxx.firebaseapp.com"
predicates:
- Path: "/__/auth/**"Since I don't know how to validate Firebase Authenticator Emulator JWTs, I am using a (live) development project, an actual Firebase Project, during local development.
For local development and testing, I am eventually required to set the authDomain to localhost:8008, the address of the local Spring Boot application.
/**
* Local (development) environment
*/
const API_BASE = 'localhost:8080';
export const environment = {
production: false,
apiBaseUrl: `https://${API_BASE}`,
firebase: {
config: {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
authDomain: `${API_BASE}`,
projectId: "xxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxx"
}
}
};The Problem
However, the application crashes right on startup with the following error:
main.ts:6 ERROR FirebaseError: Firebase: Error (auth/argument-error).
at createErrorInternal (index-3363a72a.js:476:40)
at _assert (index-3363a72a.js:480:15)
at index-3363a72a.js:9425:13
at Component.instanceFactory (index-3363a72a.js:9440:10)
at Provider.getOrInitializeService (index.esm2017.js:290:39)
at Provider.initialize (index.esm2017.js:234:31)
at initializeAuth (index-3363a72a.js:594:27)
at angular-fire.js:227:48
at angular-fire.js:160:59
This error only occurs if I am specifying the port number on the URL. Setting authDomain to just localhost or 0.0.0.0, won't crash the app. However, in this case I am not able to sign-in as the server requires port 8080.
I have tried to prepare a StackBlitz example, but for some reason I am unable to import browserPopupRedirectResolver, browserSessionPersistence and indexedDBLocalPersistence because why not?! which means I am unable to provide a reproducable example at this point.
The Question
How can I fix this issue and make it work?