When deploying the project using Vercel, I included my Firebase security and project details as environment variables on the Vercel dashboard. Authentication works fine during deployment, but there is an error in the console:
@firebase/firestore: Firestore (7.17.2): Unable to connect to Cloud Firestore backend. Connection failed 1 time. Latest error: FirebaseError: [code=invalid-argument]: Project id "my-project-id" is incorrectly formatted: it contains either invalid characters or is too long. Refer to this link for guidance on retrieving a project's id. This usually indicates that your device does not have a stable Internet connection at the moment. The client will function in offline mode until it can establish a successful connection to the backend.
The dependencies listed in package.json are:
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"firebase": "^7.15.5",
"firebase-admin": "^8.12.1",
"js-cookie": "2.2.1",
"next": "latest",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-firebaseui": "4.1.0",
"swr": "0.2.3"
I'm unsure which parts of my code are most relevant.. Here are snippets that work locally but encounter issues when deployed.
(handleSubmit with form)
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) var user = firebase.auth().currentUser;
var db = firebase.firestore();
db.collection("users")
.doc(user.uid)
.collection("clients")
.doc()
.set({
name: values.fullName,
email: values.email,
tel: values.mobile,
postcode: values.postcode,
})
.then(function () {
console.log("Document Succesfully Written");
})
.catch(function (error) {
console.error("Error writing document: ", error);
});
};
(View list of client documents)
const Clients = () => {
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
const db = firebase.firestore();
db.collection("users")
.doc(user.uid)
.collection("clients")
.onSnapshot((snap) => {
const clients = snap.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setClients(clients);
});
} else {
[];
}
});
const [clients, setClients] = useState([]);
return (
<div>
<ul>
{clients.map((client) => (
<li key={client.id}>{client.name}</li>
))}
</ul>
</div>
);
};
export default Clients;