Build a React App with Firebase Serverless Functions

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • talent.io - Download talent.io’s Tech Salary Report
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
  • okta-react-firebase-serverless-example

    React application with Okta authentication using Firebase functions deployed to Firebase

    git clone --bare https://github.com/oktadev/okta-react-firebase-serverless-example.git cd okta-react-firebase-serverless-example npm ci

  • functions-samples

    Collection of sample apps showcasing popular use cases using Cloud Functions for Firebase

    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>

      Login button> p> div> )} {auth?.currentUser && (

      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;

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • quickstart-android

    Firebase Quickstart Samples for Android

    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>

      Login button> p> div> )} {auth?.currentUser && (

      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;

  • Visual Studio Code

    Visual Studio Code

    Visual Studio Code

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts