React hook for logging in anonymously if no other login method - reactjs

Question

I want to have my users log in automatically anonymously. That's not too difficult to do. However I don't want anonymous logins to override their account logins. That's where I am running into trouble. I can't seem to find the way to do this.
Here is my hook:
import React, { useEffect, useState } from 'react';
import { singletonHook } from 'react-singleton-hook';
import { useAuth, useUser } from 'reactfire';
function SignInAnonymously() {
const auth = useAuth();
const user = useUser();
useEffect(() => {
user.firstValuePromise.then(() => {
if (!user.data) {
auth.signInAnonymously().then(() => {
console.log('Signed in anonymously');
}).catch((e) => console.log(e));
}
});
}, [user.firstValuePromise, user.data]);
return <></>;
}
export default singletonHook(<></>, SignInAnonymously);
The idea is that we get the first value emitted and compare that to the data object. However, it does not work as I would expect. The value emitted even for someone that was signed in returns null. If I comment the hook the user stays logged into their account. I have spent hours on this trying all the properties of the user so any help is appreciated.

Answer 1

Inside the useUser() method of reactfire, they use firebase.auth().currentUser as the initial value of the observable as seen on this line.
As covered in the Firebase Authentication docs:
Note: currentUser might also be null because the auth object has not finished initializing. If you use an observer to keep track of the user's sign-in status, you don't need to handle this case.
By reactfire setting the initial value to currentUser, you will often incorrectly get the first value as null (which means firstValuePromise will also resolve as null) because Firebase Auth hasn't finished initializing yet.
To suppress this behaviour, we need specify a value for initialData to pass in to useUser. I'd love to be able to use undefined, but thanks to this truthy check, we can't do that. So we need some truthy value that we can ignore such as "loading".
Applying this to your component gives:
/**
* A truthy value to use as the initial value for `user` when
* `reactfire` incorrectly tries to set it to a `null` value
* from a still-initializing `auth.currentUser` value.
*
* #see https://stackoverflow.com/questions/67683276
*/
const USER_LOADING_PLACEHOLDER = "loading";
function SignInAnonymously() {
const auth = useAuth();
const user = useUser({ initialData: USER_LOADING_PLACEHOLDER });
useEffect(() => {
if (user.data !== null)
return; // is still loading and/or already signed in
auth.signInAnonymously()
.then(() => console.log('Signed in anonymously'))
.catch((e) => console.error('Anonymous sign in failed: ', e));
}, [user.data]);
return <></>;
}