If I use expo start, my firestore work fine in Expo Go. But when i use expo start --dev-client it stop working. I already tried using EAS using EAS Migration Guide, but the same error happen.
Here is the Error message:
#firebase/firestore:, Firestore (8.2.2): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
at node_modules/#firebase/logger/dist/index.cjs.js:98:8 in defaultLogHandler
at node_modules/#firebase/logger/dist/index.cjs.js:212:8 in Logger.prototype.error
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:60:8 in P
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:8135:20 in <global>
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:8105:8 in stream.onMessage$argument_0
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:5218:67 in Ds#constructor
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:11781:54 in <global>
#firebase/firestore:, Firestore (8.2.2): Connection, WebChannel transport errored
There is no problem with my connection, because the API in the App is still working.
is there an additional setting for EAS or expo-dev-client?
Here is how i start my firebase
class FirebaseServices {
static handleFirebaseConfig() {
var firebaseConfig = {
apiKey: 'API_KEY',
authDomain: "firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "STORAGE",
messagingSenderId: "ID",
appId: "APP_ID",
measurementId: "ID"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig)
}
else {
app = firebase.app();
}
return app;
}} const db = FirebaseServices.handleFirebaseConfig().firestore()
I solve this using the answer from the thread, by adding experimentalForceLongPolling.
class FirebaseServices {
static handleFirebaseConfig() {
var firebaseConfig = {
apiKey: 'API_KEY',
authDomain: "firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "STORAGE",
messagingSenderId: "ID",
appId: "APP_ID",
measurementId: "ID"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig)
firebase().firestore().settings({
experimentalForceLongPolling: true, // this line
useFetchStreams: false, // and this line
})
}
else {
app = firebase.app();
}
return app;
}
}
const db = FirebaseServices.handleFirebaseConfig().firestore()
And i already upgrade my firebase to v9, so it change to something like this
const app = initializeApp(firebaseConfig);
const firestoreDB = initializeFirestore(app, {
experimentalForceLongPolling: true,
useFetchStreams: false,
})
export const dbFs = getFirestore(app);
Related
Introduction
Hello everyone,
I am trying to implement azure active directory B2c into my nuxt 3 application. Because #nuxtjs/auth-next is not yet working for nuxt 3, I am trying to make my own composable that makes use of the #azure/msal-browser npm package.
The reason I am writing this article is because it is not working. The code I created can be seen below:
Error:
Terminal
[nitro] [dev] [unhandledRejection] BrowserAuthError: non_browser_environment: Login and token requests are not supported in non-browser environments. 21:07:32
at BrowserAuthError.AuthError [as constructor]
Browser console
PerformanceClient.ts:100 Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
at PerformanceClient2.startMeasurement
Code:
file: /composables/useAuth.js
import * as msal from '#azure/msal-browser'
let state = {
applicationInstance: null,
}
export const useAuth = () => {
//config auth
const msalConfig = {
auth: {
clientId: '',
authority: '',
knownAuthorities: [``],
redirectUri: '',
knownAuthorities: ['']
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
}
state.applicationInstance = new msal.PublicClientApplication(msalConfig);
return {
signIn
}
}
const signIn = () => {
//handle redirect
state.applicationInstance
.addEventCallback(event => {
if(event.type == "msal:loginSuccess" && event.payload.account)
{
const account = event.payload.account
state.applicationInstance.setActiveAccount(account)
console.log(account)
}
})
//handle auth redirect
state.applicationInstance
.handleRedirectPromise()
.then(() => {
const account = state.applicationInstance.getActiveAccount()
if(!account) {
const requestParams = {
scopes: ['openid', 'offline_access', 'User.Read'],
}
state.applicationInstance.loginRedirect(requestParams)
}
})
}
file: index.vue
<script setup>
const auth = useAuth();
auth.signIn()
</script>
You need to make sure that you try to login only in the browser because Nuxt runs also server side.
You can check if you are client side with process.client or process.server for server side.
<script setup>
if (process.client) {
const auth = useAuth();
auth.signIn() // Try to sign in but only on client.
}
</script>
NuxtJS/VueJS: How to know if page was rendered on client-side only?
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getMessaging } from "firebase/messaging";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyA0dAgRPZLlgULgnOp2MH_3xtVbWPs03Cg",
authDomain: "u-63f99.firebaseapp.com",
projectId: "u-63f99",
storageBucket: "u-63f99.appspot.com",
messagingSenderId: "884933400988",
appId: "1:884933400988:web:0b7e0e37b0f23da236d059",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const fireStore = getFirestore(app);
const messaging = getMessaging(app);
export { auth, fireStore, messaging };
i'm getting this error, i don't know why messaging service is missing while i installed firebase SDK
your problem is probably because you're testing this on localhost (http).
if you look at the console logs you might notice beside that error something like:
code: 'messaging/unsupported-browser'
and cloud messaging only support https connections so you'd have to make your localhost run on https somehow to get it to work :)
I've used Vue-cli 3 to create a Vue app and I've been trying to incorporate FCM into it. However, I've been working on it for two days and I still cannot get it working.
First, here's my
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase- app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
var config = {
messagingSenderId: "69625964474"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload)
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
}
return self.registration.showNotification(notificationTitle, notificationOptions)
});
```
One solution that sorta works is I moved this file into the public folder and register it in App.vue using
const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}firebase-messaging-sw.js`)
messaging.useServiceWorker(registration)
However, then I'll be having two service workers (the other one from Vue itself).
I tried to modify vue.config.js instead trying to work with Workbox by adding the following config:
module.exports = {
pwa: {
name: 'My App',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'public/firebase-messaging-sw.js'
// ...other Workbox options...
}
}
}
And then register it again in App.vue:
const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}service-worker.js`)
messaging.useServiceWorker(registration)
Then I got the following error instead:
If you are confused by the files I mentioned or how the directory of my project looks like, what I did was simply creating a PWA using vue-cli 3. And I left most of the structure untouched.
And I set up firebase in main.js:
import firebase from '#firebase/app'
Vue.config.productionTip = false
const config = {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_AUTH_DOMAIN,
databaseURL: process.env.VUE_APP_DATABASE_URL,
projectId: process.env.VUE_APP_PROJECT_ID,
storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID
}
firebase.initializeApp(config)
Then in App.vue:
import firebase from '#firebase/app'
import '#firebase/messaging'
const messaging = firebase.messaging()
messaging.usePublicVapidKey('PUBLIC_KEY')
The service worker is by default disabled in development mode, so running it in development will cause an HTML error page to be returned, this is the reason you are getting text/html error
You can find detailed explanation here LINK
How could set the firebase to infinitered/ignite the best way?
I'm starting now and have several doubts however I think you should add a FirebaseConfig.js in the / Config. Right?
My file FirebaseConfig.js now.
import Config from 'react-native-config'**
const firebase = require ( 'firebase');
// Initialize Firebase
import Config from 'react-native-config'
const firebase = require('firebase');
// Initialize Firebase
const firebaseConfig = {
apiKey: Config.FIREBASE_API_KEY,
authDomain: Config.FIREBASE_AUTH_DOMAIN,
databaseURL: Config.FIREBASE_DATABASE_URL,
storageBucket: Config.FIREBASE_STORAGE_BUCKET,
messagingSenderId: Config.FIREBASE_MESSAGING_SENDER_ID
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
I am new to Vue Js and Firebase. I want to learn firebase /firestore db connection ,data in/out but i am not getting any proper documentation or tutorial for the same.Please suggest.
I am using VUE CLI 2.
Create a src/firebaseDb.js file then add the following code to establish the real-time database connection in vue with your Firebase configurations details.
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id"
}
const firebaseApp = firebase.initializeApp(firebaseConfig);
export const db = firebaseApp.firestore();
You can check this link its quite easy
https://www.positronx.io/vue-js-firebase-build-vue-crud-app-with-cloud-firestore/
i have created firebaseConfig.js file and connect to fire store.
import firebase from 'firebase/app'
require('firebase/firestore');
// Initialize Firebase
var config = {
apiKey: "AIzaSyC944Kh9T_Pcdn-kTZ6LywsIUATJBmQNTI",
authDomain: "halo-care-38f05.firebaseapp.com",
databaseURL: "https://halo-care-38f05.firebaseio.com",
projectId: "halo-care-38f05",
storageBucket: "halo-care-38f05.appspot.com",
messagingSenderId: "682838402004"
};
const firestore =firebase.initializeApp(config);
const db = firebase.firestore();
export default db;