firebase / snippets-web

Web snippets for firebase.google.com

Firebase Web Snippets

This repository holds code snippets used in Web documentation on firebase.google.com.

These snippets are part of our documentation and best read in the context of a documentation page rather than used directly. If you're looking to get started with the Firebase Web SDK the best place to start is quickstart-js.

Example

Consider this page: https://firebase.google.com/docs/database/web/lists-of-data

Each snippet in the page is dynamically included from the source in this repository, in this case mostly from this file: https://github.com/firebase/snippets-web/blob/master/database/lists-of-data.js

Each snippet has a "region tag" which is defined by // [START tag] and // [END tag] comments. The code between the tags can be included in our documentation. Keeping the code on GitHub, rather than hard-coded into the HTML of our documentation, allows us to ensure the code is correct and up to date.

Contributing

We love contributions! See CONTRIBUTING.md for guidelines.

Build Status

snippets-web's Issues

Unused function parameter in distributed counter example

snippets-web/firestore/test.solution-counters.js

Lines 25 to 32 in c5bfca3

	function incrementCounter(db, ref, num_shards) {
	// Select a shard of the counter at random
	const shard_id = Math.floor(Math.random() * num_shards).toString();
	const shard_ref = ref.collection('shards').doc(shard_id);
	// Update count
	return shard_ref.update("count", firebase.firestore.FieldValue.increment(1));
	}

The parameter db is unused in this code example. For the same example in other languages, they do not have this parameter, so it is unneeded here.

Session management with service workers & firebase.auth.Auth.Persistence.SESSION

I've gotten session management with service workers to work as per Session management with service workers and this snippet. I've also gotten Session persistence working. What I haven't been able to do is get both working at the same time. If I turn on session persistence (firebase.auth.Auth.Persistence.SESSION) with the FirebaseUI (web), bearer tokens are no longer passed. POC code is here

verification code with two pages

how to make 1 page for input phone number to send verification code and then input verification code on another page?

How to get first "n" elements in collection using v9

to use pagination i must use ordering together, i haven't found a way to get the first "n" elements of a collection and paginate on each page of "n" elements, can you give me an example of how to do this?

CollectionGroup error when i run in TypeScript

I thought i can run my typeScript with the JavaScript code snippet since i am able to for most of the code sample. But i hit a serious roadblock for CollectionGroup sample.

Below is my code

getCollectionGroup() {
    
    var museums = this.db.collectionGroup('landmarks').where('type', '==', 'museum');
    
    museums.get().then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
            console.log(doc.id, ' => ', doc.data());
        });
});

And i get error

Property 'where' does not exist on type 'AngularFirestoreCollectionGroup'.

Where does `googleUser` come from?

snippets-web/snippets/auth-next/google-signin/auth_google_checksameuser.js

Line 15 in 1c4c683

providerData[i].uid === googleUser.getBasicProfile().getId()) {

I know that firebaseUser comes from this ( result.user):

signInWithPopup(auth, provider)
      .then((result) => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token: string | undefined = credential?.accessToken;
        // The signed-in user info.
        const user = result.user;
.....

But where does googleUser come from?

provider not defined

snippets-web/snippets/auth-next/google-signin/auth_google_signin_popup.js

Line 11 in 1c4c683

signInWithPopup(auth, provider)

Variable provider is not defined in this snippet.

Instead of provider, should this be new GoogleAuthProvider() ?

FirebaseError: Expected type 'Ec', but it was: an object

someone explains to me why it is happening

querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

Link dosen't work

The link line 46 dosen't work.

> )]}'

)]}'
{
"id": "1fabcab4a6f89d9143c5483a0a07b9090da8c0dc",
"repo": "cihaz/genel/opengl-taşıma",
"revizyon": "başvurular/etiketler/android-s-v2-beta-3",
"yol": "ana bilgisayar/Android.bp"
}

$

Originally posted by @caniso in caniso/codeql-uboot#3 (comment)

can you teach me how to run these programs

do I just type node .js?

cause when I did it gave me an error

node firebase.js
/home/bb/firebase.js:1
(function (exports, require, module, __filename, __dirname) { import firebase from "firebase/app";
^^^^^^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:73:7)

How to prompt user for credentials?

manage.js has

const user = firebase.auth().currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

user.reauthenticateWithCredential(credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error ocurred
  // ...
});

But what does it mean by prompt the user to re-provide credentials? Does it mean their email and password or...?

No example for collectionGroup for Firestore V9 (modular) in the documentation

I'm upgrading a Firebase app to version 9, and I can't find in the documentation how collectionGroup is used.

This is an example from the current documentation

And here is the corresponding code snippet:

snippets-web/firestore/test.firestore.js

Lines 1089 to 1094 in 1e8f41c

	var museums = db.collectionGroup('landmarks').where('type', '==', 'museum');
	museums.get().then((querySnapshot) => {
	querySnapshot.forEach((doc) => {
	console.log(doc.id, ' => ', doc.data());
	});
	});

---

From the code snippets here on GitHub it seems like it has been already implemented, yet it doesn't appear in the documentation.

snippets-web/snippets/firestore-next/test-firestore/fs_collection_group_query.js

Lines 8 to 14 in 1e8f41c

	import { collectionGroup, query, where, getDocs } from "firebase/firestore";
	const museums = query(collectionGroup(db, 'landmarks'), where('type', '==', 'museum'));
	const querySnapshot = await getDocs(museums);
	querySnapshot.forEach((doc) => {
	console.log(doc.id, ' => ', doc.data());
	});

TypeError: querySnapshot.forEach is not a function

TypeError: querySnapshot.forEach is not a function

import { collection, getDocs } from "firebase/firestore"; 

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

here it says

TypeError: querySnapshot.forEach is not a function

Query condition should be 'country' instead of 'region'

snippets-web/firestore/test.firestore.js

Line 811 in 0888838

citiesRef.where('region', 'in', ['USA', 'Japan']);

should be: citiesRef.where('country', 'in', ['USA', 'Japan']);

Improve accuracy of account linking snippets for Auth

This (old) email thread explains some of the shortcomings with our snippets on this page:
https://groups.google.com/d/msgid/firebase-talk/86666e16-7489-43fd-a357-96b39d56d546%40googlegroups.com?utm_medium=email&utm_source=footer

The file in question is:
https://github.com/firebase/snippets-web/blob/cee9068490fbfb03c123fbda87bc08a73a122520/auth/link-multiple-accounts.js

To quote the thread:

line 128 I believe should be:

repo.delete(prevUserData);

line 153 I don't think is needed or works as it's out of scope

line 140 & the chained logic I'm unsure of. I'm approaching differently since I'm only going from anonymous to permanent & I don't need the anonymous account anymore at this point so I delete it & merge data into the signed in account.

I know you're keeping it brief but I think this could fail if the linked account is already linked so might at least want a note about it 🤷‍♂️ Also I haven't tried in this context, but once you've linked the credential can't you just merge w/out signing in again?

Population Spelling Mistake

There is a spelling mistake (popuation while it would be population) at line 14

snippets-web/snippets/firestore-next/test-firestore/start_doc.js

Lines 8 to 15 in 81fcf30

	import { collection, doc, getDoc, query, orderBy, startAt } from "firebase/firestore";
	const citiesRef = collection(db, "cities");
	const docSnap = await getDoc(doc(citiesRef, "SF"));
	// Get all cities with a population bigger than San Francisco
	const biggerThanSf = query(citiesRef, orderBy("popuation"), startAt(docSnap));
	// ...

How to use modular SDK over CDN?

It looks the documentation now shows importing the Firebase SDK v9 over CDN now.

However the code snippets there show usage with import (I doubt if the snippets are just getting copied from the 'with NPM' tab).

import firebase from "firebase/compat/app";

const firebaseApp = firebase.initializeApp({ /* config */ });

I do see it uses /compat (also in the script URLs) which means it uses the v8 syntax.

I just wanted to confirm if the modular syntax is available for use over CDN on simple HTML JS web apps (not using any framework) as in this question.

Implement FirebaseUI snippets for auth-next

Follow up to #66 this is blocked on getting FirebaseUI support for the alpha SDK.

Custom Object converter getting: Error getting document: TypeError: snapshot is not a function

snippets-web/firestore/test.firestore.js

Lines 202 to 226 in f003ef8

	class City {
	constructor (name, state, country ) {
	this.name = name;
	this.state = state;
	this.country = country;
	}
	toString() {
	return this.name + ', ' + this.state + ', ' + this.country;
	}
	}
	// Firestore data converter
	cityConverter = {
	toFirestore: function(city) {
	return {
	name: city.name,
	state: city.state,
	country: city.country
	}
	},
	fromFirestore: function(snapshot, options){
	const data = snapshot.data(options);
	return new City(data.name, data.state, data.country)
	}
	}

When trying to call read custom object, I'm getting snapshot.data is not a function error

Error getting document: TypeError: snapshot is not a function

Add repository gardener

I need those auto-updated dependencies!

ReCaptcha error: Failed to execute ReferenceError: document is not defined

Hi, I am getting the above error. I am trying to set up recaptcha v3. How many times can we call init()? and execute("login") is login a reserved word?

i have an issue using linkWithCredential(user , AuthCredential)

Firebase Auth JS V9

Description :

in this line of snippet code the documentation shows calling linkWithCredential(user , OAuthCredential) instead of linkWithCredential(user , AuthCredential)
the incompatibility between AuthCredential and OAuthCredential produce an error of
credential._linkToIdToken is not a function . i could'nt find any solution to link and account when 'auth/account-exists-with-different-credential' produced . since it's not clear how to handle this case in V9 without produces the previous Error

snippets-web/snippets/auth-next/link-multiple-accounts/auth_merge_accounts.js

Line 35 in fdc51dd

return linkWithCredential(prevUser, credential)

Error on firebase require in node JS

I'm trying to use firebase auth in the backend for authentification i tried to follow the firebase documentation to import these functions which does not work for nodeJS

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    Signed in 
    const user = userCredential.user;
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;  });

i tried to change the into a const ... = require() instead of an import
but now i'm getting this error
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

if i use the old version with firebase 8 requiring firebase i'm getting this error,
[Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" - Firebase](https://stackoverflow.com/questions/69200493/error-err-package-path-not-exported-no-exports-firebase)

i'm trying to create a user in a express app endpoint:

   app.post('/signup', (req, res) => {
    const newUser = {
        email: req.body.email,
        password: req.body.password,
        confirmPassword: req.body.confirmPassword,
        handle: req.body.handle,
    }

    createUserWithEmailAndPassword(auth, newUser.email, newUser.password)
        .then(data => {
            return res.status(201).json({ message: `user${data.user.uid} signed up succesfully` })
        })
        .catch(err => {
            console.error(err)
            return res.status(500).json({ error: err.code })
        })
   })

How can i solve my problem ??

RTDB Lists of Data uses incorrect snippets

On https://firebase.google.com/docs/database/web/lists-of-data, three additional snippets reference rtdb_get_reference from /database/index.js instead of rtdb_social_push, rtdb_social_listen_children, and rtdb_social_recent respectively (from /database/lists-of-data.js).

Unclear that tests actually validate their results?

snippets-web/firestore/test.solution-counters.js

Line 49 in c5bfca3

describe("firestore-solution-counters", () => {

In the test group that starts at the above line, it isn't clear to me that the results of the tests are actually being tested? What validates that the counters are created? What validates that the incremented value is correct?

بورا 35432

snippets-web/auth/email.js

Lines 11 to 20 in cd15fbe

	firebase.auth().signInWithEmailAndPassword(email, password)
	.then((userCredential) => {
	// Signed in
	var user = userCredential.user;
	// ...
	})
	.catch((error) => {
	var errorCode = error.code;
	var errorMessage = error.message;
	});

Move from lerna to pnpm

See:
firebase/functions-samples#872

Saves space and time.

restaurant spelling error

snippets-web/firestore/test.firestore.js

Line 1034 in f8bd3b9

var ref = db.collection('resaurants').doc('arinell-pizza');

Add compilation checks to 'installations'

Follow up to #34

Couldn't get the compiler to see firebase.installations()

Adding data to cloud firestore using Merge

in the link - https://firebase.google.com/docs/firestore/manage-data/add-data see screenshot attached, in visual studio code, it says setWithMerge is undefined.

What is 'db' in get_multiple_all.js?

🤔

How to use Google Access Token to call Google Drive API

I’m using Firebase Authentication mechanism and the scope I have provided https://www.googleapis.com/auth/drive

While running application, it asked for user login along with user's consent for Google drive access. After successful authentication it returns a Firebase Id Token.

In the next step application requires to access user's Google Drive. As I know Google Drive API requires OAuth Access token while application has Firebase Token.

https://www.googleapis.com/drive/v3/files

My questions is: How to generate OAuth Access token which is capable to access user's Google drive? OR Is there any alternate solution for this?

File upload to firebase via web fails for files with larger file-size

The code mentioned in the below link uploads a file to firebase storage:
https://github.com/firebase/snippets-web/blob/4b496235d2db433354ebb8084d59eba1263769a6/storage/upload-files.js
This works fine for smaller sized files. But fails when we try to upload files greater than 80MB. Th allowed limit is 5TB. So the file size is within the allowed range. When I try to upload a larger sized file, it uploads successfully till 99% with all the preflight requests being successful. But when the last chunk gets uploaded , the request fails with CORS error even though all the required permissions are granted and the same code works fine for smaller file sizes. Also, the last preflight request is also successful. So, how to resolve this issue?

Transactions snippet missing return statement?

snippets-web/snippets/firestore-next/test-firestore/transaction_promise.js

Line 21 in 26569c2

transaction.update(sfDocRef, { population: newPop });

Should there be a return newPop in there before the else statement?

Documentation on Handling account-exists-with-different-credential Errors is obsolete

Documentation on Handling account-exists-with-different-credential Errors is obsolete
https://firebase.google.com/docs/auth/web/google-signin#expandable-1

Is it intended that email is now gotten from error.customData.email?

FirebaseError

snippets-web/snippets/firestore-next/test-firestore/fs_collection_group_query_data_setup.js

Lines 8 to 53 in fdc51dd

	import { collection, doc, setDoc } from "firebase/firestore";
	const citiesRef = collection(db, 'cities');
	await Promise.all([
	setDoc(doc(citiesRef, 'SF', 'landmarks'), {
	name: 'Golden Gate Bridge',
	type: 'bridge'
	}),
	setDoc(doc(citiesRef, 'SF', 'landmarks'), {
	name: 'Legion of Honor',
	type: 'museum'
	}),
	setDoc(doc(citiesRef, 'LA', 'landmarks'), {
	name: 'Griffith Park',
	type: 'park'
	}),
	setDoc(doc(citiesRef, 'LA', 'landmarks'), {
	name: 'The Getty',
	type: 'museum'
	}),
	setDoc(doc(citiesRef, 'DC', 'landmarks'), {
	name: 'Lincoln Memorial',
	type: 'memorial'
	}),
	setDoc(doc(citiesRef, 'DC', 'landmarks'), {
	name: 'National Air and Space Museum',
	type: 'museum'
	}),
	setDoc(doc(citiesRef, 'TOK', 'landmarks'), {
	name: 'Ueno Park',
	type: 'park'
	}),
	setDoc(doc(citiesRef, 'TOK', 'landmarks'), {
	name: 'National Museum of Nature and Science',
	type: 'museum'
	}),
	setDoc(doc(citiesRef, 'BJ', 'landmarks'), {
	name: 'Jingshan Park',
	type: 'park'
	}),
	setDoc(doc(citiesRef, 'BJ', 'landmarks'), {
	name: 'Beijing Ancient Observatory',
	type: 'museum'
	})
	]);

Invalid document reference. Document references must have an even number of segments, but cities/SF/landmarks has 3.

The google auth isn't up to date with the new Version 9

I'm Working on a project and I need to learn the new Firebase service launched with version 9.
What I saw was an older version.

https://github.com/firebase/snippets-web/blob/master/auth/google-signin.js

Misleading/incorrect example for firestore querying

Example from https://firebase.google.com/docs/firestore/query-data/queries#web-v8_4 is incorrect or misleading.

snippets-web/firestore/test.firestore.js

Lines 859 to 861 in 6d42e41

	citiesRef.where("state", "==", "CA");
	citiesRef.where("population", "<", 100000);
	citiesRef.where("name", ">=", "San Francisco");

This example shows that you can chain query methods but it is incorrect. Query class is immutable, correct example will be

let citiesRef = firestore.collection('cities');

citiesRef = citiesRef.where("state", "==", "CA");
citiesRef = citiesRef.where("population", "<", 100000);
citiesRef = citiesRef.where("name", ">=", "San Francisco");

Please check this main issue googleapis/nodejs-firestore#483

Add a simple linter for snippets

Should check basic things like:

• Consistent use of " vs '
• Consistent use of (parens) => for single-argument arrow functions

Should not attempt to adjust indentation or line breaks anywhere, snippets often need to break those conventions.

Wrong function call referenced in docs

snippets-web/functions/emulator-suite.js

Line 6 in 466e8c7

firebase.functions().useEmulator("localhost", 5001);

Should be:

firebase.functions().useFunctionsEmulator("localhost", 5001);

Link to function def in official SDK docs

how to link to phone Auth?

I see you show how to create login and link to other Auth providers, but how do we link a phone Auth method to an existing user?

var alovelaceDocumentRef = db.collection('users').doc('alovelace');

snippets-web/firestore/test.firestore.js

Line 158 in a5f8550

var alovelaceDocumentRef = db.collection('users').doc('alovelace');

add_ada_lovelace.js missing `db` declaration

I think this line is missing from add_ada_lovelace.js:

const db = getFirestore();

Add More Info to Readme

Hello, I cannot find information explaining how to utilize this repo neither in the readme nor in the snippets.md.

I believe this repository would benefit from some elaboration. I wanted to offer a PR myself, but I can't even figure out how to implement this, or if this hosts to a VSC extension.

Thank you either way, I have added this potent repo to my watch list. 🙇🏼‍♂️

How do you limit documents when using getDocs?

im trying to limit the documents i get, I am using ,limit after collection in the getdocs function. It's not working. Please tell me the right way
const querySnapshot = await getDocs(
collection(db, collectionName.Name),
limit(20)
);

where does "db" come from?

Almost all the docs do this, I have no idea where "db" came from. I'm also not sure if I should be using web9 or nodejs, but it's often a lot of samples are missing one or both, or are less clearly labeled.

snippets-web/snippets/firestore-next/test-firestore/transaction.js

Lines 8 to 23 in 1c4c683

	import { runTransaction } from "firebase/firestore";
	try {
	await runTransaction(db, async (transaction) => {
	const sfDoc = await transaction.get(sfDocRef);
	if (!sfDoc.exists()) {
	throw "Document does not exist!";
	}
	const newPopulation = sfDoc.data().population + 1;
	transaction.update(sfDocRef, { population: newPopulation });
	});
	console.log("Transaction successfully committed!");
	} catch (e) {
	console.log("Transaction failed: ", e);
	}

How do i add a field of type 'reference' or 'geopoint' to a doc? This example is missing from the documentation

snippets-web/firestore/test.firestore.js

Lines 296 to 312 in fd06c85

	var docData = {
	stringExample: "Hello world!",
	booleanExample: true,
	numberExample: 3.14159265,
	dateExample: firebase.firestore.Timestamp.fromDate(new Date("December 10, 1815")),
	arrayExample: [5, true, "hello"],
	nullExample: null,
	objectExample: {
	a: 5,
	b: {
	nested: "foo"
	}
	}
	};
	db.collection("data").doc("one").set(docData).then(() => {
	console.log("Document successfully written!");
	});

Snippet not correct, missing initializeApp()

Hi, this snippet:

snippets-web/snippets/functions-next/emulator-suite/fb_functions_emulator_connect.js

Lines 8 to 12 in e2a9d33

	import { getApp } from "firebase/app";
	import { getFunctions, connectFunctionsEmulator } from "firebase/functions";
	const functions = getFunctions(getApp());
	connectFunctionsEmulator(functions, "localhost", 5001);

brings the error line 11:
No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

is it normal? cause it is indeed fixed if the function is added it works

Wrong field in Querying and Filtering example

The in and array-contains-any example has the wrong code for the Web (js) language, it should be:

citiesRef.where('country', 'in', ['USA', 'Japan']);

Not:

snippets-web/firestore/test.firestore.js

Line 811 in 0888838

citiesRef.where('region', 'in', ['USA', 'Japan']);