functions-samples
firebase-js-sdk
Our great sponsors
functions-samples | firebase-js-sdk | |
---|---|---|
66 | 87 | |
11,957 | 4,705 | |
0.4% | 0.8% | |
6.8 | 9.3 | |
6 days ago | 1 day ago | |
JavaScript | TypeScript | |
Apache License 2.0 | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
functions-samples
-
Setting up an auto-email micro function for Firebase RTDB
const functions = require("firebase-functions"); // // Create and deploy your first functions // // https://firebase.google.com/docs/functions/get-started // // exports.helloWorld = functions.https.onRequest((request, response) => { // functions.logger.info("Hello logs!", {structuredData: true}); // response.send("Hello from Firebase!"); // });
-
Moving my Android app to Google cloud
Cloud Functions for Firebase - Pros: Aligns to my app which uses Firebase; Cons: have to use Typescript which I have no experience with
-
In One Minute : Firebase
Cloud Functions for Firebase
-
What are Firebase Extensions? How can they speed up your app development?
Cloud Functions are a serverless solution that allows you to run backend code in response to HTTPS requests or even more ⚡ powerfully, in response to events triggered by other Firebase products.
-
I made a website that puts your face on your pet, using Cloud Vision and ML. The results are absurd as they are ridiculous
Have a go at petswitch.com if you wish... I made the original Petswitch almost ten years ago, and it's had mild success since then, including CNET writing an article about it and it receiving the prestigious honour of 'most useless website' in week 41 of 2018, as determined by theuselesswebindex.com. Aside from the obvious question of why I even made this, it was getting pretty creaky – I originally built it with PHP and ImageMagick, with the facial features being manually selected via jQuery UI. So I decided to rebuild the whole thing with a full face-to-pet ML pipeline, on static hosting. To get the human face features, the app renders the upload to a temporary img element. This is a handy way to orient the image correctly via the browser, and saves having to deal with EXIF data. It's then resized, rendered to a canvas element, converted to a base64 string, then sent via fetch to Google's Cloud Vision API, which returns landmark coordinates of the face. I use these coordinates to correct any tilt on the face, mask the eyes and mouth via a mask image, then store each masked element as an additional canvas. Detecting pet faces was trickier. Google, Amazon and Microsoft all offer object detection APIs via transfer learning, and the approach is largely the same: you supply a series of images with bounding boxes around the objects you want to detect, either added via a web interface or uploaded via their API. You train a model online from these supplied images, then the service will return the estimated coordinates of any detected objects in an uploaded image. I found a dataset of both cats and dogs that had been labelled with landmarks on their faces, then wrote a script to convert the landmarks into bounding boxes around their eyes and nose, the dimensions based on a simple formula around the distance between the eyes in each image. All in all it's been trained on about 17,000 images of cats and dogs, and the accuracy seems to be pretty good. I was pleased to discover it actually works pretty well on other pets too. I've also added some friendly pets to the Petswitch family for those that don't have a pet on hand. I decided not to use a framework for this, it's written from scratch using a series of ES6 modules – although I did use Konva to handle the manual selection of facial features if the API can't detect a face. I used ParcelJS as my task runner, and my detection APIs are hosted on Firebase Cloud Functions. Let me know if you have any questions, although I can offer no good explanation for why I created this monstrosity...
-
How do I allow my express REST server to handle multiple concurrent requests (200-500) at the same time?
I would also consider using a serverless entry point for hook ingestion (eg Firebase Functions). That would make the hook and queue process very fast and light. It would auto scale and leave your app infrastructure largely untouched
-
Sending Emails with Firebase
Cloud Functions allow you to access Firebase events directly in your application. This way, you can easily integrate with the Firebase platform and accomplish a wide range of tasks.
-
Google Pay with Firebase extension and Adyen
Cloud Firestore is a NoSQL database part of the Firebase platform: it is designed to support complex JSON-based data structure, advanced querying and multiple languages (NodeJS, Python and Java SDKs). Firestore really stands out when used together with Cloud Functions that allow executing server-side code in response to events like changes in the database or other types of notifications.
-
Build a React App with Firebase Serverless Functions
import React, { useState } from "react"; import { useOktaAuth } from "@okta/okta-react"; import { initializeApp } from "firebase/app"; import { getAuth, signInWithCustomToken, signOut } from "firebase/auth"; import { getFunctions, httpsCallable, connectFunctionsEmulator, } from "firebase/functions"; function Home() { const [reportCardData, setReportCardData] = useState(); const [selectedSemester, setSelectedSemester] = useState("Spring 2022"); const { oktaAuth, authState } = useOktaAuth(); const login = async () => oktaAuth.signInWithRedirect(); const logout = async () => { signOut(auth); oktaAuth.signOut("/"); }; const { REACT_APP_FIREBASE_APIKEY, REACT_APP_FIREBASE_AUTHDOMAIN, REACT_APP_FIREBASE_PROJECTID, REACT_APP_FIREBASE_STORAGEBUCKET, REACT_APP_FIREBASE_MESSAGINGSENDERID, REACT_APP_FIREBASE_APPID, REACT_APP_ENV, } = process.env; const firebaseConfig = { apiKey: REACT_APP_FIREBASE_APIKEY, authDomain: REACT_APP_FIREBASE_AUTHDOMAIN, projectId: REACT_APP_FIREBASE_PROJECTID, storageBucket: REACT_APP_FIREBASE_STORAGEBUCKET, messagingSenderId: REACT_APP_FIREBASE_MESSAGINGSENDERID, appId: REACT_APP_FIREBASE_APPID, }; const app = initializeApp(firebaseConfig); const functions = getFunctions(app); const auth = getAuth(); if (REACT_APP_ENV === "development") { connectFunctionsEmulator(functions, "localhost", 5001); } const getGrades = async () => { const getGradesCall = httpsCallable(functions, "getGrades"); const resp = await getGradesCall({ name: selectedSemester.split(" ")[0], year: selectedSemester.split(" ")[1], }); setReportCardData(resp.data); }; const exchangeOktaTokenForFirebaseToken = async () => { const exchangeToken = httpsCallable( functions, "exchangeOktaTokenForFirebaseToken" ); const resp = await exchangeToken({ accessToken: authState.accessToken.accessToken }); await signInWithCustomToken(auth, resp.data.firebaseToken); }; if (authState?.isAuthenticated) { exchangeOktaTokenForFirebaseToken(); } return (
-
{auth?.currentUser && (
Logout
button>
)}
{!auth?.currentUser && (
Login
button>
)}
li>
ul>
nav>
{!auth?.currentUser && (
In order to use this application you must be logged into your Okta account p>
Please select a semester to get your report card h1>
{ setSelectedSemester(e.target.value); }} > Fall 2021option> Spring 2021option> Fall 2022option> Spring 2022option> select> div> Get Grades button> div> div> {reportCardData && ( <> Name: b> {reportCardData.name} p> School: b> {reportCardData.school} p> Semester: b> {reportCardData.semester} -{" "} {reportCardData.year} p> Course th> Score th> Letter Grade th> tr> thead> {reportCardData.grades.map((grade, i) => { return ( {grade.course}td> {grade.score}td> {grade.letterGrade}td> tr> ); })} tbody> table> )} div> )} A Small demo using Oktaa> to Secure an{" "} Firebase hosted application{" "} a>{" "} with a serverless{" "} functiona> p> By Nik Fishera> p> footer> main> div> ); } export default Home;
-
{auth?.currentUser && (
Logout
button>
)}
{!auth?.currentUser && (
Login
button>
)}
li>
ul>
nav>
{!auth?.currentUser && (
-
Decifer — generate transcripts with ease
Firebase Cloud Functions lets you run backend code in a severless architecture.
firebase-js-sdk
- There's an almost 5-year-old bug in the Firebase js SDK that leaks 2 event listeners every second
-
ReactNative Expo File Based Routing with Firebase Authentication
Auth persistence Issue Firebase SDK - https://github.com/firebase/firebase-js-sdk/issues/6050
-
Adding Firebase Authentication to Your Web Application
Initializing Firebase in a Web Application (check out the previous article or check Firebase docs)
-
How to use Firestore with Redux in a React application
Firebase is a backend-as-a-service platform. One of their products is Firestore, which is a noSQL database. To use it in your app, the recommended approach is to use the Firebase SDK.
-
Cryptee + Google login issues
Incorrect, twice. We're not asking you to trust us, you can verify it yourself, Google Auth's scripts are open source. Here and here. They're also available in our repo as well.
-
Build Refactor: A React app with the new Firebase v9.x Web SDK
The release of version 9 of the Firebase Web SDK has introduced breaking changes in methods for managing users and querying databases. Code written in Firebase v8.x will throw errors when used in v9.x, which calls for refactoring.
- error: socket hang up on firebase functions
-
Tell HN: Stytch Login SaaS Unicorn has common auth vulnerabilities
Yes, Firebase also stores refresh tokens client-side [1]. The trade-off that both Firebase and Stytch are managing when we follow this pattern is the following:
- You can provide a significantly better developer experience and set-up with this architecture. While there are designs that allow 3rd party APIs like ours to set HTTPOnly cookies by proxying the 3rd party APIs as subdomains, this creates new burdens on the developer for minimal gain considering that a XSS attack vector indicates a severe compromise of the application.
- Today, customers that feel strongly about using HTTPOnly session management will opt for a direct integration with our API using one of our back-end client libraries rather than our JS SDK. While we have interest in providing a HTTPOnly solution in the future to interested customers, we’ve decided the default behavior of the existing SDK is better suited for most developers.
[1] https://github.com/firebase/firebase-js-sdk/blob/0b3ca78eb97...
-
RxFire in ReactJS using Firebase Firestore and Authentication
RxFire was created by David East, who is a Firebase Developer Advocate. Although Firebase Blog introduced RxFire in September, 2018 I thought it would be a good point of reference for beginners starting out with both ReactJs and Firebase.For those coming from an Angular background you might be familiar with RxJS and the Angularfire2 package. I know from my experience you MUST learn RxJS if you are going to use Angular on any size application. It can be one of the hardest parts to learn but there are several fantastic tutorials and sites dedicated to how RxJS works.Some of my favorites
-
Deployment not working - using vue3
// Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyBAPHtA2Rqx6szOtMLwSHtagbZVV0rRXCE", authDomain: "vuetest29aug.firebaseapp.com", projectId: "vuetest29aug", storageBucket: "vuetest29aug.appspot.com", messagingSenderId: "777613642842", appId: "1:777613642842:web:0634bc9dc3bbb632eedc63", measurementId: "G-KG6K583J4F" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app);
What are some alternatives?
firebase-admin-node - Firebase Admin Node.js SDK
Firebase Admin SDK for PHP - Unofficial Firebase Admin SDK for PHP
quickstart-android - Firebase Quickstart Samples for Android
expo-cli - Tools for creating, running, and deploying universal Expo and React Native apps
Django - The Web framework for perfectionists with deadlines.
firebase-android-sdk - Firebase Android SDK
dart-pad - An online Dart editor with support for console, web, and Flutter apps
reactfire - Hooks, Context Providers, and Components that make it easy to interact with Firebase.
better-sse - ⬆ Dead simple, dependency-less, spec-compliant server-side events implementation for Node, written in TypeScript.
react-native-examples - 📱 A repo that contains React Native examples most related to articles & tutorials I publish
wordler - find solution to wordle every day and create an issue for each day
djangofire-pwa - PWA de ejemplo de integración de Firebase con Django REST Framework