I have a Firebase Realtime Database with this data
And the security rules
{
"rules": {
".read": "auth.uid != null",
".write": "auth.uid != null"
}
}
In my react app, I track the current user in the application context that also uses onAuthStateChanged
const [authUser, setAuthUser] = useState(null);
...
const signIn = (email, password) => signInWithEmailAndPassword(firebaseAuth, email, password);
const currUser = () => authUser;
const authStateChange = authState => {
if (!authState) setAuthUser(null);
else {
setAuthUser(authState);
}
}
useEffect(() => {
const unsubscribe = firebaseAuth.onAuthStateChanged(user => {
authStateChange(user);
setLoading(false);
});
return unsubscribe; // cleanup function on unmount
}, []);
...
When a user signs in, this code runs to sign the user in with the authenticator
const context = useAppContext();
...
// handle form submit
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
context.signIn(data.get('email'), data.get('password'))
.then(userCredential => {
router.push('/');
})
.catch(err => {
console.log(JSON.stringify(err));
setError({ code: err.code });
});
};
For actually accessing the database, I set up this code using axios to allow cross-origin access and using authToken params.
import axios from 'axios';
// create axios instance that sends to firebase rtdb
const instance = axios.create({
baseURL: process.env.NEXT_PUBLIC_FIREBASE_DB_URL, // firebase rtdb url
headers: {
'Access-Control-Allow-Origin': '*'
}
});
// all requests require params since requests will need user ID token for authorization
const params = {
authToken: null
}
export const getUser = async (id, authToken) => {
params.authToken = authToken;
return instance.get(`/users/${id}.json`, {
params: params
});
}
So when I actually put this all together and just get the one test data in users/test.json, I call the function to get the current user ID token with a forced refresh, then use the axios calls
import { getUser } from "../lib/firebase/rtdb";
...
const context = useAppContext();
if (context.currUser()) {
// add user to realtime database users document
context.currUser().getIdToken(true)
.then(idTokenString => {
getUser('test', idTokenString).then(res => console.log(res.data));
})
}
Even after using a fresh token, I get a permission denied error (code 401).
Am I clearly doing something wrong?
