I'm able to authorize the Firebase app from my existing Electron app using firebase.auth().signInWithCustomToken. The promise for this method resolves and I'm able to obtain the current authorized user with firebase.auth().currentUser.uid.
At this point I must technically be able to write to /users/<currentUser>. However calling the userRef.set() and userRef.update() methods does not update the database reference and fails silently (both the callback and the promise from these methods do not resolve and there is no error thrown).
What is strange is that the exact same code works in a different, newly created Electron app. My code looks like below:
const writeToFirebase = (customToken) => {
syncApp.auth().signInWithCustomToken(customToken).then(user => {
const userId = firebase.auth().currentUser.uid; // this is successfull
const userRef = firebase.database().ref("/users/" + userId);
userRef.set({data: data}, () => { //callback does not trigger });
userRef.update({data: data})
.then(() => {//promise does not resolve})
.catch(err) => {// promise is not rejected either! }
});
}
Any pointers on how to go about debugging this would be helpful.
I discovered the problem. It's unlikely anybody else would have the same issue, but if you do, take a look at the userAgent value in your browserWindow.loadURL in Electron.
Mine was set to an Android mobile device & Firebase was not setting/updating due to this reason. I presume the Firebase server reacts differently when it sees a mobile userAgent and I was using the Firebase JS SDK and not the Android SDK which caused the issue.
Related
In short: Is there some kind of cold start when connecting to Firestore directly from Client SDK
Hey. I'm using Firestore client sdk in Andoid and IOS application through #react-native-firebase.
Everything works perfectly but I have noticed weird behavior I haven't found explanation.
I have made logging to see how long it takes from user login to retrieve uid corresponding data from Firestore and this time has been ~0.4-0.6s. This is basically the whole onAuthStateChanged workflow.
let userLoggedIn: Date;
let userDataReceived: Date;
auth().onAuthStateChanged(async (user) => {
userLoggedIn = new Date();
const eventsRetrieved = async (data: UserInformation) => {
userDataReceived = new Date();
getDataDuration = `Get data duration: ${(
(userDataReceived.getTime() - userLoggedIn.getTime()) /
1000
).toString()}s`;
console.log(getDataDuration)
// function to check user role and to advance timing logs
onUserDataReceived(data);
};
const errorRetrieved = () => {
signOut();
authStateChanged(false);
};
let unSub: (() => void) | undefined;
if (user && user.uid) {
const userListener = () => {
return firestore()
.collection('Users')
.doc(user.uid)
.onSnapshot((querySnapshot) => {
if (querySnapshot && querySnapshot.exists) {
const data = querySnapshot.data() as UserInformation;
data.id = querySnapshot.id;
eventsRetrieved(data);
} else errorRetrieved();
});
};
unSub = userListener();
} else {
if (typeof unSub === 'function') unSub();
authStateChanged(false);
}
});
Now the problem. When I open the application ~30-50 minutes after last open the time to retrieve uid corresponding data from Firestore will be ~3-9s. What is this time and why does it happen? And after I open the application right after this time will be low again ~0.4-0-6s.
I have been experiencing this behavior for weeks. It is hard to debug as it happens only on build application (not in local environments) and only between +30min interval.
Points to notice
The listener query (which I'm using in this case, I have used also simple getDoc function) is really simple and focused on single document and all project configuration works well. Only in this time interval, which seems just like cold start, the long data retrieval duration occurs.
Firestore Rules should not be slowing the query as subsequent request are fast. Rules for 'Users' collection are as follows in pseudo code:
function checkCustomer(){
let data =
get(/databases/$(database)/documents/Users/$(request.auth.uid)).data;
return (resource.data.customerID == data.customerID);
}
match /Users/{id}{
allow read:if
checkUserRole() // Checks user is logged in and has certain customClaim
&& idComparison(request.auth.uid, id) // Checks user uid is same as document id
&& checkCustomer() // User can read user data only if data is under same customer
}
Device cache doesn't seem to affect the issue as application's cache can be cleaned and the "cold start" still occurs
Firestore can be called from another environment or just another mobile device and this "cold start" will occur to devices individually (meaning that it doesn't help if another device opened the application just before). Unlike if using Cloud Run with min instances, and if fired from any environment the next calls right after will be fast regardless the environment (web or mobile).
EDIT
I have tested this also by changing listener to simple getDoc call. Same behavior still happens on a build application. Replacing listener with:
await firestore()
.collection('Users')
.doc(user.uid)
.get()
.then(async document => {
if (document.exists) {
const data = document.data() as UserInformation;
if (data) data.id = document.id;
eventsRetrieved(data);
}
});
EDIT2
Testing further there has been now 3-15s "cold start" on first Firestore getDoc. Also in some cases the timing between app open has been only 10 minutes so the minimum 30 min benchmark does not apply anymore. I'm going to send dm to Firebase bug report team to see things further.
Since you're using React Native, I assume that the documents in the snapshot are being stored in the local cache by the Firestore SDK (as the local cache is enabled by default on native clients). And since you use an onSnapshot listener it will actually re-retrieve the results from the server if the same listener is still active after 30 minutes. From the documentation on :
If offline persistence is enabled and the listener is disconnected for more than 30 minutes (for example, if the user goes offline), you will be charged for reads as if you had issued a brand-new query.
The wording here is slightly different, but given the 30m mark you mention, I do expect that this is what you're affected by.
In the end I didn't find straight answer why this cold start appeared. I ended up changing native Client SDK to web Client SDK which works correctly first data fetch time being ~0.6s (always 0.5-1s). Package change fixed the issue for me while functions to fetch data are almost completely identical.
I am trying to incorporate the Firebase JS SDK into a managed Expo React Native project. I installed Firebase through npm i firebase and I am using the latest version.
The problem is that whenever I start the expo app, through an Android emulator, I, when passing the input from formik into createUserWithEmailAndPassword first get the auth/network-request-failed error message, but after clicking the signup button several times, more than 10, it somehow works. The user is then added to the Firebase console. After this it works flawlessly, and I can create multiple accounts without fail. However, should I restart the app, then I would have to repeat the steps above.
I have divided the main firebase function to a separate file, and imported it.
The exported file:
import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';
import firebaseConfig from './app/config/Firebase/firebaseConfig';
let myApp = initializeApp(firebaseConfig);
const auth = getAuth(myApp);
export function signupEmail(email, password) {
console.log(email, password);
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
console.log('Signed in');
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
}
The main parts of the sign-up file:
function handleSignup(values) {
signupEmail(values.email, values.password);
}
<SubmitButton
style={styles.signupButton}
title='SignUp'
onPress={handleSubmit}
/>
onSubmit={(values) => [handleSignup(values)]}
After pressing Signup I get the email and password printed out, as in the signupEmail function. I get the email and password message whether or not it is successful in the end, which I assume implies the problem doesn't lie with formik, since the data is correctly passed to the signupEmail function. Though, from here it often stands idle, sometimes for more than 10s before the network error message comes up. When it is successful, I think, is always instant.
I also have a print-out auth.currentUser button, which returns null whilst the process is loading, and if successful logs out the expected object. Though, sometimes it logs out the object to an account whose email that I didn't add during the current session. I did also add a Sign Out function which turns the auth.currentUser object into null.
I don't know where to go from here, and would appreciate any help!
This issue seems to be related to the Android emulator, Expo Go on my phone worked without issue.
How do we allow users to choose which browser wallet / provider they use when interacting with web3 websites? This is for basic HTML / WordPress websites not using TypeScript / React, etc.
According to Coinbase Docs, the Coinbase Wallet SDK is not needed: "You can use this provider in your dapp to request users' Ethereum accounts, read on-chain data, and have the user sign messages and transactions, without using the Coinbase Wallet SDK."
https://docs.cloud.coinbase.com/wallet-sdk/docs/injected-provider
Currently, my integration works with MetaMask without issue. However, when trying to choose the Coinbase Wallet (browser extension) as my provider, there doesn't seem to be a way to do so.
If window.ethereum gets set by the Coinbase Wallet extension, there is suppose to be a window.ethereum.providers object. You can then go through each one, find MetaMask or Coinbase, and set the preferred one as the provider:
MetaMask conflicting with Coinbase wallet
However, it seems that MetaMask is has priority over this, and sets window.ethereum WITHOUT the .providers object.
I've attempted to load / find the Coinbase Wallet provider during and after Page Load, but it doesn't seem to exist. Again, I'm assuming MetaMask gets set as the provider before Coinbase injection even exists.
Is there a way to let the user set the provider / wallet that is being used using basic web3 JS?
Have had some testing with this function with coinbase and metamask extensions both installed on chrome. It will open a window for you to choose which wallet you want to connect and then use the first address in that wallet to set the account.
async function getWallet() {
try{
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
let account = accounts[0];
return account
} catch (error) {
console.log(error);
}
}
https://docs.cloud.coinbase.com/wallet-sdk/docs/injected-provider-guidance
const connectWallet = async () => {
if (typeof window.ethereum !== "undefined") {
let provider = window.ethereum;
// edge case if MM and CBW are both installed
if (window.ethereum.providers?.length) {
window.ethereum.providers.forEach(async (p) => {
if (p.isMetaMask) provider = p;
});
}
await provider.request({
method: "eth_requestAccounts",
params: [],
});
}
};
I think the way how implemented your code has some bugs. this code above is clear
I've been attempting to get to the bottom of issues with a Firebase function I'm using to update some aggregate data in Firestore. I set up a simple test bed and found that any attempt to access the data triggers the error:
> Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information.
> at GoogleAuth.getApplicationDefaultAsync (/Users/michael/Documents/htdocs/vue/mjf20/functions/node_modules/google-auth-library/build/src/auth/googleauth.js:160:19)
I've attempted to just copy the entire Firebase config into the initializeApp() function, but it still generates the same error. Here's the entire test code:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.firestore();
exports.postCache = functions.https.onRequest((request, response) => {
console.log("Starting test function");
db.collection('myCollection').doc('myDoc').get()
.then(snap => {
if (!snap.exists) {
console.log('Document not found');
} else {
console.log(snap.data());
response.send(snap.data());
}
})
.catch(error => {
console.log('In catch block');
console.log(error);
response.send(error);
});
});
If I take out the db stuff, the function will work fine. As soon as I add even the simplest firestore request, it generates the error. I've seen this issue asked about before, but the situations seem different, and none of the solutions seems to work. I'm stumped.
The code is perfectly fine.
I have implemented it exactly on my testing project using this tutorial.
I have added your code to index.js and in my firestore I have added collection myCollection with myDoc with just one testing field and deployed using firebase deploy.
Everything works fine. You should focus on your environment and deployment steps to figure out what is the problem. This link that you have in the error is mentioning environment variables. Maybe a case as well.
I hope it will help!
I implemented the signinWithApple button on my Expo app, and it's working perfectly locally when i use the host.exp.Exponent on Services ID in Firebase authentification tab for Apple Sign in.
But when I create a standalone app, and I test it with TestFlight, it doesn't work anymore whether I use host.exp.Exponent, nothing, or my specific app service ID on Services ID.
What am I missing here?
MY CODE :
handleApple = async () => {
const csrf = Math.random().toString(36).substring(2, 15);
const nonce = Math.random().toString(36).substring(2, 10);
try {
const appleCredential = await AppleAuthentication.signInAsync({
requestedScopes: [
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
AppleAuthentication.AppleAuthenticationScope.EMAIL
],
state: csrf,
nonce: nonce
});
const {
identityToken,
fullName,
email
} = appleCredential;
if (identityToken) {
// login with credential
const provider = new firebase.auth.OAuthProvider("apple.com");
const credential = provider.credential({
idToken: identityToken,
rawNonce: nonce,
});
await firebase.auth().signInWithCredential(credential).then(user => {
...
EDIT :
I managed to make it work by using my bundle identifier (which is also my app id) on the Service ID field in firebase.
Error code :
Error: The audience in ID Token [##.app-videos] does not match the expected audience ##.signin.
But now the sign in with Apple on my website breaks.
I manage to make it work when I change the Service Id field to my specific app service ID (found in Identifiers > Services IDs).
So i'm stuck with an app that requires something and a website that requires an other. Why is that?
Should I do something specific when I rebuild my app so that the changes that I made to mu identifiers are taken into account?
I'm using this, is it not enough?
expo build:ios --clear-provisioning-profile
I had the same problem and should solve it in the following way.
You must re-create GoogleService-info.plist in the Firebase console with the same bundleId as in the project in Xcode.