I'm currently working on a file called createCheckoutSession.ts:
import { db } from '../firebase/firebaseInit';
import { collection, addDoc, onSnapshot } from 'firebase/firestore';
import { User } from 'firebase/auth';
export async function createCheckoutSession(user: User) {
console.log('clicked')
const docRef = await addDoc(collection(db, `users/${user?.uid}/checkout_sessions`), {
price: 'price_1Lb3hiKi0c1bV0RosKIhQ699',
success_url: `http://localhost:3000/success`,
cancel_url: `http://localhost:3000/cancel`,
});
console.log(docRef)
onSnapshot(docRef, (snap) => {
console.log('dsfdsfdf')
const { error, url } = snap.data();
console.log(error, 'snap')
if (error) {
// Show an error to your customer and
// inspect your Cloud Function logs in the Firebase console.
alert(`An error occured: ${error.message}`);
}
if (url) {
// We have a Stripe Checkout URL, let's redirect.
window.location.assign(url);
}
});
}
When using vscode, I encountered an error message for this line of code:
const { error, url } = snap.data();Property 'error' does not exist on type 'DocumentData | undefined'.ts(2339)
An error was also displayed in the console:
Uncaught (in promise) FirebaseError: Missing or insufficient permissions.
Here are my security rules that might be related to the issue:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{uid} {
allow read, write: if request.auth.uid == uid;
match /checkout_sessions/{id} {
allow read, write: if request.auth.uid == uid;
}
match /subscriptions/{id} {
allow read: if request.auth.uid == uid;
}
}
match /products/{id} {
allow read: if true;
match /prices/{id} {
allow read: if true;
}
match /tax_rates/{id} {
allow read: if true;
}
}
}
}
I am receiving undefined values for both error and url. Any suggestions on how to resolve this issue?