Understand Firebase for Web

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Firebase"> <meta property="og:type" content="website"><meta name="theme-color" content="#a8c7fa"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/firebase/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/touchicon-180.png"><link rel="canonical" href="https://firebase.google.com/docs/web/learn-more"><link rel="search" type="application/opensearchdescription+xml" title="Firebase" href="https://firebase.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://firebase.google.com/docs/web/learn-more" /><link rel="alternate" hreflang="x-default" href="https://firebase.google.com/docs/web/learn-more" /><link rel="alternate" hreflang="ar" href="https://firebase.google.com/docs/web/learn-more?hl=ar" /><link rel="alternate" hreflang="bn" href="https://firebase.google.com/docs/web/learn-more?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://firebase.google.com/docs/web/learn-more?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://firebase.google.com/docs/web/learn-more?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://firebase.google.com/docs/web/learn-more?hl=fa" /><link rel="alternate" hreflang="fr" href="https://firebase.google.com/docs/web/learn-more?hl=fr" /><link rel="alternate" hreflang="de" href="https://firebase.google.com/docs/web/learn-more?hl=de" /><link rel="alternate" hreflang="he" href="https://firebase.google.com/docs/web/learn-more?hl=he" /><link rel="alternate" hreflang="hi" href="https://firebase.google.com/docs/web/learn-more?hl=hi" /><link rel="alternate" hreflang="id" href="https://firebase.google.com/docs/web/learn-more?hl=id" /><link rel="alternate" hreflang="it" href="https://firebase.google.com/docs/web/learn-more?hl=it" /><link rel="alternate" hreflang="ja" href="https://firebase.google.com/docs/web/learn-more?hl=ja" /><link rel="alternate" hreflang="ko" href="https://firebase.google.com/docs/web/learn-more?hl=ko" /><link rel="alternate" hreflang="pl" href="https://firebase.google.com/docs/web/learn-more?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://firebase.google.com/docs/web/learn-more?hl=pt-br" /><link rel="alternate" hreflang="pt" href="https://firebase.google.com/docs/web/learn-more?hl=pt" /><link rel="alternate" hreflang="ru" href="https://firebase.google.com/docs/web/learn-more?hl=ru" /><link rel="alternate" hreflang="es" href="https://firebase.google.com/docs/web/learn-more?hl=es" /><link rel="alternate" hreflang="es-419" href="https://firebase.google.com/docs/web/learn-more?hl=es-419" /><link rel="alternate" hreflang="th" href="https://firebase.google.com/docs/web/learn-more?hl=th" /><link rel="alternate" hreflang="tr" href="https://firebase.google.com/docs/web/learn-more?hl=tr" /><link rel="alternate" hreflang="vi" href="https://firebase.google.com/docs/web/learn-more?hl=vi" /><title>Understand Firebase for Web</title> <meta property="og:title" content="Understand Firebase for Web"><meta property="og:url" content="https://firebase.google.com/docs/web/learn-more"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Understand Firebase for Web" } </script> <meta name="gtm_var" data-key="docType" data-value="other"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="firebase-icy-theme" type="article" appearance layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner" keep-tabs-visible> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="firebase" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Firebase"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup.svg" class="devsite-site-logo" alt="Firebase"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown "> <a href="https://firebase.google.com/products-build" track-metadata-eventdetail="https://firebase.google.com/products-build" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - build" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" > Build </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Build" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products-build" track-metadata-position="nav - build" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column firebase-dropdown firebase-dropdown--primary firebase-build"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Build</li> <li class="devsite-nav-description">Get to market quickly and securely with products that can scale globally </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products-build" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products-build" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build" tooltip > <div class="devsite-nav-item-title"> Go to Build </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column firebase-dropdown firebase-dropdown--secondary firebase-build"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Build Products</li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/app-check" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/app-check" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> App Check </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/app-hosting" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/app-hosting" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> App Hosting </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/auth" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/auth" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Authentication </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/functions" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/functions" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Cloud Functions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/storage" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/storage" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Cloud Storage </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/data-connect" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/data-connect" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Data Connect </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/extensions" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/extensions" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/ml" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/ml" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Firebase ML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/firestore" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/firestore" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Firestore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/genkit" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/genkit" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Genkit </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/hosting" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/hosting" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Hosting </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/realtime-database" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/realtime-database" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Realtime Database </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/vertex-ai-in-firebase" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/vertex-ai-in-firebase" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Vertex AI in Firebase </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/generative-ai" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/generative-ai" track-metadata-position="nav - build" track-metadata-module="tertiary nav" track-metadata-module_headline="build products" tooltip > <div class="devsite-nav-item-title"> Generative AI </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://firebase.google.com/products-run" track-metadata-eventdetail="https://firebase.google.com/products-run" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - run" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" > Run </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Run" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products-run" track-metadata-position="nav - run" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column firebase-dropdown firebase-dropdown--primary firebase-run"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Run</li> <li class="devsite-nav-description">Run your app with confidence and deliver the best experience for your users </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products-run" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products-run" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run" tooltip > <div class="devsite-nav-item-title"> Go to Run </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column firebase-dropdown firebase-dropdown--secondary"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Run Products</li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/ab-testing" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/ab-testing" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> A/B Testing </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/app-distribution" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/app-distribution" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> App Distribution </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/cloud-messaging" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/cloud-messaging" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> Cloud Messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/crashlytics" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/crashlytics" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> Crashlytics </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/analytics" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/analytics" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> Google Analytics </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/in-app-messaging" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/in-app-messaging" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> In-App Messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/performance" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/performance" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> Performance Monitoring </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/remote-config" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/remote-config" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> Remote Config </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/test-lab" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/test-lab" track-metadata-position="nav - run" track-metadata-module="tertiary nav" track-metadata-module_headline="run products" tooltip > <div class="devsite-nav-item-title"> Test Lab </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://firebase.google.com/solutions" track-metadata-eventdetail="https://firebase.google.com/solutions" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - solutions" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" > Solutions </a> </tab> <tab > <a href="https://firebase.google.com/pricing" track-metadata-eventdetail="https://firebase.google.com/pricing" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - pricing" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Pricing" track-name="pricing" > Pricing </a> </tab> <tab class="devsite-dropdown devsite-active "> <a href="https://firebase.google.com/docs" track-metadata-eventdetail="https://firebase.google.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/guides" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/guides" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Fundamentals </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/build" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/build" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Build </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/run" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/run" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Run </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/reference" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/reference" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Reference </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/samples" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/samples" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Samples </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://firebase.google.com/community" track-metadata-eventdetail="https://firebase.google.com/community" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > Community </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Community" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/community" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/community/learn" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/community/learn" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Learn </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/community/events" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/community/events" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Events </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/community/stories" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/community/stories" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Stories </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://firebase.google.com/support" track-metadata-eventdetail="https://firebase.google.com/support" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - support" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" > Support </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Firebase" tenant-name="Firebase" > <form class="devsite-search-form" action="https://firebase.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt" >Português</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <a class="devsite-header-link devsite-top-button button gc-analytics-event" href="//console.firebase.google.com" data-category="Site-Wide Custom Events" data-label="Site header link" > Go to console </a> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://firebase.google.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Documentation </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://firebase.google.com/docs" track-metadata-eventdetail="https://firebase.google.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab class="devsite-dropdown devsite-active "> <a href="https://firebase.google.com/docs/guides" track-metadata-eventdetail="https://firebase.google.com/docs/guides" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - fundamentals" track-metadata-module="primary nav" aria-label="Fundamentals, selected" data-category="Site-Wide Custom Events" data-label="Tab: Fundamentals" track-name="fundamentals" > Fundamentals </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Fundamentals" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/guides" track-metadata-position="nav - fundamentals" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Fundamentals" track-name="fundamentals" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/ios/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/ios/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - Apple platforms (iOS+) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/android/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/android/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/web/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/web/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - Web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/flutter/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/flutter/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - Flutter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/cpp/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/cpp/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - C++ </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/unity/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/unity/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - Unity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/admin/setup" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/admin/setup" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Add Firebase - Server environments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/projects/learn-more" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/projects/learn-more" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Manage Firebase projects </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/libraries" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/libraries" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Supported platforms & frameworks </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/emulator-suite" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/emulator-suite" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Use Emulator Suite </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/gemini-in-firebase" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/gemini-in-firebase" track-metadata-position="nav - fundamentals" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> AI assistance with Gemini in Firebase </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://firebase.google.com/docs/build" track-metadata-eventdetail="https://firebase.google.com/docs/build" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - build" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" > Build </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Build" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/build" track-metadata-position="nav - build" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/emulator-suite" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/emulator-suite" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Emulator Suite </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/auth" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/auth" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Authentication </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/app-check" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/app-check" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> App Check </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/data-connect" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/data-connect" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Data Connect </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/firestore" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/firestore" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Firestore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/database" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/database" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Realtime Database </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/storage" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/storage" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Storage </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/rules" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/rules" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Security Rules </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/app-hosting" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/app-hosting" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> App Hosting </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/hosting" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/hosting" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Hosting </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/functions" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/functions" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Cloud Functions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/extensions" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/vertex-ai" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/vertex-ai" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Vertex AI in Firebase </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/genkit" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/genkit" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Genkit </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/ml" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/ml" track-metadata-position="nav - build" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> ML </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://firebase.google.com/docs/run" track-metadata-eventdetail="https://firebase.google.com/docs/run" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - run" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" > Run </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Run" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/run" track-metadata-position="nav - run" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/test-lab" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/test-lab" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Test Lab </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/app-distribution" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/app-distribution" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> App Distribution </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/crashlytics" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/crashlytics" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Crashlytics </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/perf-mon" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/perf-mon" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Performance Monitoring </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/remote-config" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/remote-config" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Remote Config </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/ab-testing" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/ab-testing" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> A/B Testing </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/analytics" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/analytics" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Analytics </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/cloud-messaging" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/cloud-messaging" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Cloud Messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/in-app-messaging" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/in-app-messaging" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> In-App Messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/dynamic-links" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/dynamic-links" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Dynamic Links </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/admob" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/admob" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Google AdMob </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/ads" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/ads" track-metadata-position="nav - run" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Google Ads </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://firebase.google.com/docs/reference" track-metadata-eventdetail="https://firebase.google.com/docs/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> </tab> <tab > <a href="https://firebase.google.com/docs/samples" track-metadata-eventdetail="https://firebase.google.com/docs/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="firebase" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Firebase"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup.svg" class="devsite-site-logo" alt="Firebase"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/products-build" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Build </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" > <span class="devsite-nav-text" tooltip menu="Build"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Build"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/products-run" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Run" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Run </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" > <span class="devsite-nav-text" tooltip menu="Run"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Run"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/solutions" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Solutions" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Solutions </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/pricing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Pricing" track-name="pricing" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pricing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Pricing </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/guides" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Fundamentals" track-name="fundamentals" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fundamentals" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Fundamentals </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Fundamentals" track-name="fundamentals" > <span class="devsite-nav-text" tooltip menu="Fundamentals"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Fundamentals"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/build" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Build </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Build" track-name="build" > <span class="devsite-nav-text" tooltip menu="Build"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Build"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/run" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Run" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Run </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Run" track-name="run" > <span class="devsite-nav-text" tooltip menu="Run"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Run"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/community" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > <span class="devsite-nav-text" tooltip menu="Community"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Community"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support </span> </a> </li> <li class="devsite-nav-item"> <a href="//console.firebase.google.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Go to console" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Go to console </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/docs/guides" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/guides" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/guides" ><span class="devsite-nav-text" tooltip>Fundamentals</span></a></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get started with Firebase</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add Firebase to an app</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/ios/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/setup" ><span class="devsite-nav-text" tooltip>Apple platforms (iOS+)</span></a></li><li class="devsite-nav-item"><a href="/docs/android/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/setup" ><span class="devsite-nav-text" tooltip>Android</span></a></li><li class="devsite-nav-item"><a href="/docs/web/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/setup" ><span class="devsite-nav-text" tooltip>Web</span></a></li><li class="devsite-nav-item"><a href="/docs/flutter/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/flutter/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/flutter/setup" ><span class="devsite-nav-text" tooltip>Flutter</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add Firebase to a game</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/games/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/games/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/games/setup" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/docs/cpp/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/cpp/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/cpp/setup" ><span class="devsite-nav-text" tooltip>C++</span></a></li><li class="devsite-nav-item"><a href="/docs/unity/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/unity/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/unity/setup" ><span class="devsite-nav-text" tooltip>Unity</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/admin/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/admin/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/admin/setup" ><span class="devsite-nav-text" tooltip>Add Firebase to a server</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/projects/api/workflow_set-up-and-manage-project" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/api/workflow_set-up-and-manage-project" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/api/workflow_set-up-and-manage-project" ><span class="devsite-nav-text" tooltip>Set up projects programmatically</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Manage your Firebase projects</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/projects/learn-more" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/learn-more" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/learn-more" ><span class="devsite-nav-text" tooltip>Understand Firebase projects</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Set up development workflows</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/projects/dev-workflows/overview-environments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/dev-workflows/overview-environments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/dev-workflows/overview-environments" ><span class="devsite-nav-text" tooltip>Overview of environments</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/dev-workflows/general-best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/dev-workflows/general-best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/dev-workflows/general-best-practices" ><span class="devsite-nav-text" tooltip>General best practices</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/dev-workflows/general-security-guidelines" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/dev-workflows/general-security-guidelines" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/dev-workflows/general-security-guidelines" ><span class="devsite-nav-text" tooltip>General security guidelines</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/projects/multiprojects" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/multiprojects" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/multiprojects" ><span class="devsite-nav-text" tooltip>Configure multiple projects</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Understand billing</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/projects/billing/firebase-pricing-plans" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/billing/firebase-pricing-plans" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/billing/firebase-pricing-plans" ><span class="devsite-nav-text" tooltip>Firebase pricing plans</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/billing/avoid-surprise-bills" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/billing/avoid-surprise-bills" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/billing/avoid-surprise-bills" ><span class="devsite-nav-text" tooltip>Avoid surprise bills</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/billing/advanced-billing-alerts-logic" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/billing/advanced-billing-alerts-logic" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/billing/advanced-billing-alerts-logic" ><span class="devsite-nav-text" tooltip>Advanced billing alerts & logic</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/projects/api-keys" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/api-keys" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/api-keys" ><span class="devsite-nav-text" tooltip>Learn about API keys for Firebase</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/locations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/locations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/locations" ><span class="devsite-nav-text" tooltip>Learn about locations for products & resources</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/projects/bigquery-export" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/bigquery-export" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/bigquery-export" ><span class="devsite-nav-text" tooltip>Export project data to BigQuery</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/docs/projects/manage-installations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/manage-installations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/manage-installations" ><span class="devsite-nav-text" tooltip>Manage Firebase installations</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/projects/import-segments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/import-segments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/import-segments" ><span class="devsite-nav-text" tooltip>Import segments</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Manage projects programmatically</span> </div></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/projects/api/workflow_set-up-and-manage-project" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/api/workflow_set-up-and-manage-project" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/api/workflow_set-up-and-manage-project" ><span class="devsite-nav-text" tooltip>Use the REST API</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/projects/terraform/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/terraform/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/terraform/get-started" ><span class="devsite-nav-text" tooltip>Use Terraform</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Use the Admin SDK</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/reference/admin/node/firebase-admin.project-management" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/reference/admin/node/firebase-admin.project-management" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/reference/admin/node/firebase-admin.project-management" ><span class="devsite-nav-text" tooltip>Node.js</span></a></li><li class="devsite-nav-item"><a href="/docs/reference/admin/java/reference/com/google/firebase/projectmanagement/package-summary" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/reference/admin/java/reference/com/google/firebase/projectmanagement/package-summary" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/reference/admin/java/reference/com/google/firebase/projectmanagement/package-summary" ><span class="devsite-nav-text" tooltip>Java</span></a></li><li class="devsite-nav-item"><a href="/docs/reference/admin/python/firebase_admin.project_management" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/reference/admin/python/firebase_admin.project_management" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/reference/admin/python/firebase_admin.project_management" ><span class="devsite-nav-text" tooltip>Python</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/projects/provisioning/configure-oauth" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/provisioning/configure-oauth" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/provisioning/configure-oauth" ><span class="devsite-nav-text" tooltip>Configure OAuth identity providers for Firebase Auth</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Manage project access (IAM)</span> </div></li><li class="devsite-nav-item"><a href="/docs/projects/iam/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Roles</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/projects/iam/roles" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/iam/roles-basic" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles-basic" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles-basic" ><span class="devsite-nav-text" tooltip>Owner, Editor, Viewer roles</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Firebase predefined roles</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/projects/iam/roles-predefined" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles-predefined" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles-predefined" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/iam/roles-predefined-all-products" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles-predefined-all-products" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles-predefined-all-products" ><span class="devsite-nav-text" tooltip>Firebase-level roles</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/iam/roles-predefined-category" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles-predefined-category" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles-predefined-category" ><span class="devsite-nav-text" tooltip>Product-category roles</span></a></li><li class="devsite-nav-item"><a href="/docs/projects/iam/roles-predefined-product" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles-predefined-product" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles-predefined-product" ><span class="devsite-nav-text" tooltip>Product-level roles</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/projects/iam/roles-custom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/roles-custom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/roles-custom" ><span class="devsite-nav-text" tooltip>Custom roles</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/projects/iam/permissions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/projects/iam/permissions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/projects/iam/permissions" ><span class="devsite-nav-text" tooltip>Permissions</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Platforms and frameworks</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/libraries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/libraries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/libraries" ><span class="devsite-nav-text" tooltip>Supported platforms & frameworks</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Android</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/android/learn-more" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/learn-more" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/learn-more" ><span class="devsite-nav-text" tooltip>Understand Android + Firebase</span></a></li><li class="devsite-nav-item"><a href="/docs/android/kotlin-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/kotlin-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/kotlin-migration" ><span class="devsite-nav-text" tooltip>Migrate to KTX APIs in the main modules</span></a></li><li class="devsite-nav-item"><a href="/docs/android/android-play-services" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/android-play-services" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/android-play-services" ><span class="devsite-nav-text" tooltip>Dependencies of Firebase Android SDKs on Google Play services</span></a></li><li class="devsite-nav-item"><a href="/docs/android/play-data-disclosure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/play-data-disclosure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/play-data-disclosure" ><span class="devsite-nav-text" tooltip>Prepare for Google Play data disclosure requirements</span></a></li><li class="devsite-nav-item"><a href="/docs/android/troubleshooting-faq" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/troubleshooting-faq" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/troubleshooting-faq" ><span class="devsite-nav-text" tooltip>Troubleshooting & FAQ</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Flutter</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/flutter" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/flutter" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/flutter" ><span class="devsite-nav-text" tooltip>Discover Firebase for Flutter</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Apple platforms (iOS+)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/ios/learn-more" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/learn-more" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/learn-more" ><span class="devsite-nav-text" tooltip>Understand Apple platforms + Firebase</span></a></li><li class="devsite-nav-item"><a href="/docs/ios/installation-methods" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/installation-methods" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/installation-methods" ><span class="devsite-nav-text" tooltip>Installation options</span></a></li><li class="devsite-nav-item"><a href="/docs/ios/swift-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/swift-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/swift-migration" ><span class="devsite-nav-text" tooltip>Migrate to Swift extension APIs in the main modules</span></a></li><li class="devsite-nav-item"><a href="/docs/ios/link-firebase-static-dynamic" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/link-firebase-static-dynamic" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/link-firebase-static-dynamic" ><span class="devsite-nav-text" tooltip>Link Firebase dependencies statically or dynamically</span></a></li><li class="devsite-nav-item"><a href="/docs/ios/app-store-data-collection" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/app-store-data-collection" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/app-store-data-collection" ><span class="devsite-nav-text" tooltip>Prepare for Apple App Store data disclosure requirements</span></a></li><li class="devsite-nav-item"><a href="/docs/ios/supporting-ios-14" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/supporting-ios-14" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/supporting-ios-14" ><span class="devsite-nav-text" tooltip>Supporting iOS 14</span></a></li><li class="devsite-nav-item"><a href="/docs/ios/troubleshooting-faq" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/ios/troubleshooting-faq" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/ios/troubleshooting-faq" ><span class="devsite-nav-text" tooltip>Troubleshooting & FAQ</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Web</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/web/learn-more" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/learn-more" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/learn-more" ><span class="devsite-nav-text" tooltip>Understand Web + Firebase</span></a></li><li class="devsite-nav-item"><a href="/docs/web/modular-upgrade" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/modular-upgrade" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/modular-upgrade" ><span class="devsite-nav-text" tooltip>Upgrade to the modular SDK</span></a></li><li class="devsite-nav-item"><a href="/docs/web/module-bundling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/module-bundling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/module-bundling" ><span class="devsite-nav-text" tooltip>Using module bundlers</span></a></li><li class="devsite-nav-item"><a href="/docs/web/alt-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/alt-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/alt-setup" ><span class="devsite-nav-text" tooltip>Web SDK setup alternatives</span></a></li><li class="devsite-nav-item"><a href="/docs/web/pwa" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/pwa" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/pwa" ><span class="devsite-nav-text" tooltip>Use Firebase in PWAs</span></a></li><li class="devsite-nav-item"><a href="/docs/web/environments-js-sdk" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/web/environments-js-sdk" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/web/environments-js-sdk" ><span class="devsite-nav-text" tooltip>Supported environments for the Firebase JS SDK</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Unity</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/unity/learn-more" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/unity/learn-more" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/unity/learn-more" ><span class="devsite-nav-text" tooltip>Understand Unity + Firebase</span></a></li><li class="devsite-nav-item"><a href="/docs/unity/setup-alternative" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/unity/setup-alternative" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/unity/setup-alternative" ><span class="devsite-nav-text" tooltip>Additional installation options</span></a></li><li class="devsite-nav-item"><a href="/docs/android/integrate-play-games" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/android/integrate-play-games" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/android/integrate-play-games" ><span class="devsite-nav-text" tooltip>Integrate with your Play Games services project</span></a></li><li class="devsite-nav-item"><a href="/docs/unity/troubleshooting-faq" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/unity/troubleshooting-faq" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/unity/troubleshooting-faq" ><span class="devsite-nav-text" tooltip>Troubleshooting & FAQ</span></a></li><li class="devsite-nav-item"><a href="/docs/unity/build-debug-guide" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/unity/build-debug-guide" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/unity/build-debug-guide" ><span class="devsite-nav-text" tooltip>Debugging the game build, install, and run process</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>C++</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/cpp/learn-more" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/cpp/learn-more" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/cpp/learn-more" ><span class="devsite-nav-text" tooltip>Understand C++ + Firebase</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Prototype and test with Emulator Suite</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/emulator-suite" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Connect your app and prototype</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/emulator-suite/connect_and_prototype" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/connect_and_prototype" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/connect_and_prototype" ><span class="devsite-nav-text" tooltip>Get started</span></a></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/connect_auth" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/connect_auth" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/connect_auth" ><span class="devsite-nav-text" tooltip>Connect to the Authentication emulator</span></a></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/connect_rtdb" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/connect_rtdb" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/connect_rtdb" ><span class="devsite-nav-text" tooltip>Connect to the Realtime Database emulator</span></a></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/connect_firestore" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/connect_firestore" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/connect_firestore" ><span class="devsite-nav-text" tooltip>Connect to the Firestore emulator</span></a></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/connect_storage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/connect_storage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/connect_storage" ><span class="devsite-nav-text" tooltip>Connect to the Cloud Storage for Firebase emulator</span></a></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/use_hosting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/use_hosting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/use_hosting" ><span class="devsite-nav-text" tooltip>Use the Hosting emulator</span></a></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/use_app_hosting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/use_app_hosting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/use_app_hosting" ><span class="devsite-nav-text" tooltip>Use the App Hosting emulator</span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/emulator-suite/connect_functions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/connect_functions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/connect_functions" ><span class="devsite-nav-text" tooltip>Connect to the Cloud Functions emulator</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li><li class="devsite-nav-item devsite-nav-beta"><a href="/docs/emulator-suite/use_extensions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/use_extensions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/use_extensions" ><span class="devsite-nav-text" tooltip>Use the Extensions emulator</span><span class="devsite-nav-icon material-icons" data-icon="beta" data-title="Beta" aria-hidden="true"></span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/docs/emulator-suite/install_and_configure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/emulator-suite/install_and_configure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/emulator-suite/install_and_configure" ><span class="devsite-nav-text" tooltip>Install, configure and integrate</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion devsite-nav-new"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>AI assistance with Gemini in Firebase</span><span class="devsite-nav-icon material-icons" data-icon="new" data-title="New!" aria-hidden="true"></span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/gemini-in-firebase" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/gemini-in-firebase" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/gemini-in-firebase" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/gemini-in-firebase/set-up-gemini" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/gemini-in-firebase/set-up-gemini" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/gemini-in-firebase/set-up-gemini" ><span class="devsite-nav-text" tooltip>Set up Gemini in Firebase</span></a></li><li class="devsite-nav-item"><a href="/docs/gemini-in-firebase/try-gemini" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/gemini-in-firebase/try-gemini" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/gemini-in-firebase/try-gemini" ><span class="devsite-nav-text" tooltip>Try Gemini in the Firebase console</span></a></li></ul></div></li> </ul> <ul class="devsite-nav-list" menu="Build" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build </span> </span> </li> <li class="devsite-nav-item"> <a href="/products-build" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Go to Build" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Go to Build </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build Products </span> </span> </li> <li class="devsite-nav-item"> <a href="/products/app-check" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Check" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > App Check </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/app-hosting" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Hosting" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > App Hosting </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/auth" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authentication" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authentication </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/functions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Functions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cloud Functions </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/storage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Storage" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cloud Storage </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/data-connect" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Data Connect" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Data Connect </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/ml" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firebase ML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firebase ML </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/firestore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firestore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firestore </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/genkit" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Genkit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Genkit </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/hosting" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Hosting" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Hosting </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/realtime-database" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Realtime Database" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Realtime Database </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/vertex-ai-in-firebase" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Vertex AI in Firebase" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Vertex AI in Firebase </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/generative-ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Generative AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Generative AI </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Run" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Run </span> </span> </li> <li class="devsite-nav-item"> <a href="/products-run" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Go to Run" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Go to Run </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Run Products </span> </span> </li> <li class="devsite-nav-item"> <a href="/products/ab-testing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: A/B Testing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > A/B Testing </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/app-distribution" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Distribution" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > App Distribution </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/cloud-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Messaging" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cloud Messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/crashlytics" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Crashlytics" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Crashlytics </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/analytics" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Analytics" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Analytics </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/in-app-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: In-App Messaging" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > In-App Messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance Monitoring" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance Monitoring </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/remote-config" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Remote Config" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Remote Config </span> </a> </li> <li class="devsite-nav-item"> <a href="/products/test-lab" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test Lab" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Test Lab </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/guides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fundamentals" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Fundamentals </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/build" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Build </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/run" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Run" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Run </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Community" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/community/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/community/events" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Events" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Events </span> </a> </li> <li class="devsite-nav-item"> <a href="/community/stories" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Stories" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Stories </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Fundamentals" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/ios/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Apple platforms (iOS+)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - Apple platforms (iOS+) </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/web/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - Web </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/flutter/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Flutter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - Flutter </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/cpp/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - C++" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - C++ </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/unity/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Unity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - Unity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/admin/setup" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add Firebase - Server environments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add Firebase - Server environments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/projects/learn-more" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Manage Firebase projects" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Manage Firebase projects </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/libraries" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Supported platforms & frameworks" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Supported platforms & frameworks </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/emulator-suite" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Use Emulator Suite" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Use Emulator Suite </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/gemini-in-firebase" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI assistance with Gemini in Firebase" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI assistance with Gemini in Firebase </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Build" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/emulator-suite" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Emulator Suite" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Emulator Suite </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/auth" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authentication" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authentication </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/app-check" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Check" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > App Check </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/data-connect" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Data Connect" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Data Connect </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/firestore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firestore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firestore </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/database" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Realtime Database" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Realtime Database </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/storage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Storage" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Storage </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/rules" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security Rules" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security Rules </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/app-hosting" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Hosting" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > App Hosting </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/hosting" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Hosting" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Hosting </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/functions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Functions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cloud Functions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/vertex-ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Vertex AI in Firebase" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Vertex AI in Firebase </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/genkit" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Genkit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Genkit </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/ml" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ML </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Run" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/test-lab" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test Lab" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Test Lab </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/app-distribution" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: App Distribution" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > App Distribution </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crashlytics" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Crashlytics" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Crashlytics </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/perf-mon" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance Monitoring" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance Monitoring </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/remote-config" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Remote Config" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Remote Config </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/ab-testing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: A/B Testing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > A/B Testing </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/analytics" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Analytics" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Analytics </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/cloud-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Messaging" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cloud Messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/in-app-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: In-App Messaging" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > In-App Messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/dynamic-links" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Dynamic Links" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Dynamic Links </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/admob" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AdMob" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AdMob </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/ads" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Ads" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Ads </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /styles/docs.css */ .center { text-align: center } /* Used in AdMob code examples */ .oldcode { opacity: .40; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* IE <= 7 */ filter:alpha(opacity=40); } .newcode { font-weight: bold; } /* Device Screenshots */ .deviceshot { max-width: 700px; max-height: 400px; } /* Start Changelog styles */ .badge { position: relative; top: -3px; border-radius: 16px; display: inline-block; width: 110px; height: 32px; line-height: 32px; margin-right: 10px; text-transform: uppercase; font-size: 13px; font-weight: 700; text-align: center; color: var(--tenant-inverted-text-color); } .checklist > ul { padding-left: 125px; } .checklist > ul > li { list-style-type: none; margin-bottom: 22px; } .changelog > ul { padding-left: 0; } .changelog > ul > li { list-style-type: none; margin-bottom: 22px; } .firebase-support-release-page .changelog > ul { list-style-type: none; padding-left: 125px; } .firebase-release-roundup .changelog > ul { list-style-type: disc outside; padding-left: 40px; } .firebase-release-roundup .changelog > ul > li { list-style-type: disc outside; margin-bottom: 12px; } .generic-android::before, .generic-ios::before, .generic-mobile::before, .generic-web::before, .generic-flutter::before, .generic-unity::before, .generic-cpp::before, .generic-all::before, .release-changed::before, .release-deprecated::before, .release-feature::before, .release-fixed::before, .release-important::before, .release-issue::before, .release-removed::before, .release-unchanged::before, .release-android::before, .release-android-bom::before, .release-ios::before, .release-javascript::before, .release-flutter::before, .release-unity::before, .release-cpp::before, .release-admin::before, .release-functions::before, .release-cli::before, .release-rules::before { display: block; float: left; width: 110px; height: 32px; margin-left: -125px; margin-right: 10px; border-radius: 16px; text-transform: uppercase; font-size: 13px; font-weight: 700; text-align: center; color: var(--tenant-inverted-text-color); } .generic-android::before { content: "Android"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #839e2e; } .generic-ios::before { text-transform: none; content: "iOS+"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #003fdd; } .generic-mobile::before { content: "Mobile"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #f4b400; } .generic-web::before { content: "Web"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #7e57c2; } .generic-flutter::before { content: "Flutter"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #29b6f6; } .generic-unity::before { content: "Unity"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #7f6545; } .generic-cpp::before { content: "C++"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #ff8c00; } .generic-all::before { content: "All"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #ccc; } .release-changed::before { content: "changed"; background-color: #ff6961; padding-top: 4px; } .release-deprecated::before { content: "deprecated"; background-color: #d70015; padding-top: 4px; } .release-feature::before { content: "feature"; background-color: #0f9d58; padding-top: 4px; } .release-fixed::before { content: "fixed"; background-color: #4285f4; padding-top: 4px; } .release-important::before { content: "important"; background-color: #d70015; padding-top: 4px; } .release-issue::before { content: "issue"; background-color: #d70015; padding-top: 4px; } .release-removed::before { content: "removed"; background-color: #546e7a; padding-top: 4px; } .release-unchanged::before { content: "no change"; background-color: #ccc; padding-top: 4px; } .release-android::before { content: "Android"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #839e2e; } .release-android-bom::before { content: "Android BoM"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #839e2e; } .release-ios::before { text-transform: none; content: "iOS+"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #003fdd; } .release-javascript::before { content: "JavaScript"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #7e57c2; } .release-flutter::before { content: "Flutter"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #29b6f6; } .release-unity::before { content: "Unity"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #7f6545; } .release-cpp::before { content: "C++"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #ff8c00; } .release-admin::before { content: "Admin"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #909090; } .release-functions::before { content: "Functions"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #2c384a; } .release-cli::before { text-transform: none; content: "CLI"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #f4b400; } .release-rules::before { content: "Rules"; color: var(--tenant-secondary-text-color); border: 5px solid; border-color: #002991; } /* End Changelog styles */ /* Docs Overview page styles */ .docs-android, .docs-ios, .docs-web, .docs-cpp, .docs-unity { height: 64px; width: 64px; margin: 10px 16px 0 -16px; } .firebase-docs-overview .devsite-landing-row h2 { margin: 80px 0 -40px; } .devsite-landing-row-3-up .docs-landing-row-item { width: calc((100% - 80px)/2); display: inline-block; } .docs-landing-icon { font-size: 48px; height: 48px; margin: 11px; width: 48px; } .firebase-reference-list { display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0 0 40px; padding: 0; } .firebase-reference-list-item { -ms-flex: 0 0 50%; flex: 0 0 50%; margin: 40px 0 0; padding: 0; } .firebase-reference-list-item > a { -ms-flex-align: center; align-items: center; display: -ms-flex; display: flex; } .firebase-reference-list-item > a:not(:hover) h3 { color: var(--tenant-primary-text-color); } .firebase-reference-list-item > a:not(:hover) li, .firebase-reference-list-item > a:not(:hover) p { color: var(--tenant-secondary-text-color); } .firebase-reference-list-item .docs-landing-icon { -ms-flex-align: center; align-items: center; background-color: var(--tenant-docs-landing-icon-background, #f5f5f5); border-radius: 50%; -ms-flex: 0 0 88px; flex: 0 0 88px; height: 88px; -ms-justify-content: center; justify-content: center; margin: 0 16px 0 0; padding: 20px; } .firebase-reference-list-item h3 { -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 18px; line-height: 28px; margin: 0; } .firebase-reference-list-item ul { list-style: none; padding: 0; } .docs-android, .docs-ios, .docs-web, .docs-cpp, .docs-unity { height: 88px; width: auto; } .firebase-reference-list-item.docs-android .docs-landing-icon { color: #00bfa5; } .firebase-reference-list-item.docs-cpp .docs-landing-icon { color: #fd8c09; } .firebase-reference-list-item.docs-ios .docs-landing-icon { color: #16aaca; } .firebase-reference-list-item.docs-unity .docs-landing-icon { color: #000; } .firebase-reference-list-item.docs-web .docs-landing-icon { color: #c52062; } .firebase-reference-list-item.docs-http .docs-landing-icon { color: #3f51b5; } @media (max-width: 1000px) { .firebase-reference-list { -ms-flex-direction: column; flex-direction: column; } } /* end Docs Overview page styles */ /* Full-page platform selector for Crashlytics docs */ /* Note: h3 in selector content must include hide-from-toc */ .full-page-selector, .full-page-selector-content { border: none; font-size: inherit; } .full-page-selector > .kd-buttonbar { margin: 32px 0; } .full-page-selector > section { display: none; } .full-page-selector-content > .selected { padding: 0; font-size: inherit; } .full-page-selector-content > .kd-buttonbar { display: none; } .select-page { display: none; } .select-page + .ds-selector-tabs, .after-selection ~ .ds-selector-tabs { border: none; font-size: inherit; } .select-page + .ds-selector-tabs > .kd-buttonbar { margin: 32px 0; } .select-page + .ds-selector-tabs > section { display: none; } .after-selection ~ .ds-selector-tabs > .selected { padding: 0; font-size: inherit; } .after-selection ~ .ds-selector-tabs > section p { line-height: 24px; } .after-selection ~ .ds-selector-tabs > .kd-buttonbar { display: none; } /* End full-page platform selector */ /* Custom beta and alpha indicators */ .devsite-nav-icon[data-icon="alpha"]::before { content: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M13.2,15c-0.3-0.9-0.6-1.7-0.9-2.6L12.1,12c0-0.1-0.1-0.3-0.1-0.4c-1.2,2.1-2.4,2.9-4.5,2.9C4.8,14.5,3,12.6,3,9s1.8-5.5,4.5-5.5c2.1,0,3.4,0.8,4.5,2.9L12.1,6l0.1-0.4c0.4-1.1,0.7-1.9,0.9-2.6h2.2c-0.4,0.8-0.7,1.7-1.2,3.2L14,6.6c-0.3,0.8-0.5,1.6-0.8,2.4c0.3,0.7,0.6,1.5,0.8,2.4l0.1,0.4c0.5,1.5,0.8,2.4,1.2,3.2C15.4,15,13.2,15,13.2,15z M7.5,5.5C5.9,5.5,5,6.5,5,9s0.9,3.5,2.5,3.5C9,12.5,9.9,11.6,11,9C9.9,6.4,9,5.5,7.5,5.5z' fill='%2354617d'/></svg>); } .color-scheme--dark .devsite-nav-icon[data-icon="alpha"]::before { content: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M13.2,15c-0.3-0.9-0.6-1.7-0.9-2.6L12.1,12c0-0.1-0.1-0.3-0.1-0.4c-1.2,2.1-2.4,2.9-4.5,2.9C4.8,14.5,3,12.6,3,9s1.8-5.5,4.5-5.5c2.1,0,3.4,0.8,4.5,2.9L12.1,6l0.1-0.4c0.4-1.1,0.7-1.9,0.9-2.6h2.2c-0.4,0.8-0.7,1.7-1.2,3.2L14,6.6c-0.3,0.8-0.5,1.6-0.8,2.4c0.3,0.7,0.6,1.5,0.8,2.4l0.1,0.4c0.5,1.5,0.8,2.4,1.2,3.2C15.4,15,13.2,15,13.2,15z M7.5,5.5C5.9,5.5,5,6.5,5,9s0.9,3.5,2.5,3.5C9,12.5,9.9,11.6,11,9C9.9,6.4,9,5.5,7.5,5.5z' fill='%239eabc3'/></svg>); } .devsite-nav-icon[data-icon="beta"]::before { content: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M12.2,7.7c1.8,1.2,2.3,3.7,1.1,5.6c-0.7,1.1-2,1.8-3.3,1.8H7v2H5V4c0-1.1,0.9-2,2-2h2.5C11.4,2,13,3.6,13,5.5C13,6.3,12.7,7.1,12.2,7.7z M7,13h3c1.1,0,2-0.9,2-2s-0.9-2-2-2H7V13z M7,7h2.5C10.3,7,11,6.3,11,5.5S10.3,4,9.5,4H7V7z' fill='%2354617d'/></svg>); } .color-scheme--dark .devsite-nav-icon[data-icon="beta"]::before { content: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M12.2,7.7c1.8,1.2,2.3,3.7,1.1,5.6c-0.7,1.1-2,1.8-3.3,1.8H7v2H5V4c0-1.1,0.9-2,2-2h2.5C11.4,2,13,3.6,13,5.5C13,6.3,12.7,7.1,12.2,7.7z M7,13h3c1.1,0,2-0.9,2-2s-0.9-2-2-2H7V13z M7,7h2.5C10.3,7,11,6.3,11,5.5S10.3,4,9.5,4H7V7z' fill='%239eabc3'/></svg>); } .firebase-platform-label { font: 500 12px/24px Roboto,sans-serif; } /* Full-page platform selector dropdown */ /* Note: use menu variables in _elements.html file */ .full-page-selector-dropdown { border: none; position: relative; float: left; display: inline-block; } .full-page-selector-dropdown > .ds-selector-tabs { display: none; position: absolute; min-width: 160px; z-index: 1; } .full-page-selector-dropdown:hover .ds-selector-tabs { display: block; margin: 0; } .full-page-selector-dropdown:hover .kd-tabbutton { display: block; border: none; height: inherit; text-align: left; } .full-page-selector-dropdown:hover .kd-buttonbar { border: none; height: inherit; } .full-page-selector-dropdown h3:hover { color: var(--tenant-inverted-text-color); background-color: #039be5; } .full-page-selector-dropdown:hover .devsite-overflow-menu-button { display: none; } img.white-bg { padding: 5px; border-radius: 2px; background-color: #fff; } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://firebase.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Firebase" > Firebase </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://firebase.google.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://firebase.google.com/docs/guides" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="" > Fundamentals </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/icon.svg" project-support-url="https://firebase.google.com/support/" > <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> Understand Firebase for Web </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>As you're developing a Web app using Firebase, you might encounter unfamiliar concepts, or areas where you need more information to make the right decisions for your project. This page aims to answer those questions or point you to resources to learn more.</p> <p>If you have questions about a topic not covered on this page, visit one of our <a href="/community#join-the-discussion">online communities</a>. We'll also update this page with new topics periodically, so check back to see if we've added the topic you want to learn about.</p> <h2 id="modular-version" data-text="SDK versions: namespaced and modular" tabindex="-1">SDK versions: namespaced and modular</h2> <p>Firebase provides two API surfaces for Web apps:</p> <ul> <li><strong>JavaScript - namespaced.</strong> This is the JavaScript interface that Firebase maintained for many years and is familiar to Web developers with older Firebase apps. Because the namespaced API does not benefit from ongoing new feature support, most new apps should instead adopt the modular API.</li> <li><strong>JavaScript - modular</strong>. This SDK is based on a modular approach that provides reduced SDK size and greater efficiency with modern JavaScript build tools such as <a href="https://webpack.js.org/" class="external">webpack</a> or <a href="https://rollupjs.org/" class="external">Rollup</a>.</li> </ul> <p>The modular API integrates well with build tools that strip out code that isn't being used in your app, a process known as "tree-shaking." Apps built with this SDK benefit from greatly reduced size footprints. The namespaced API, though available as a module, does not have a strictly modular structure and does not provide the same degree of size reduction.</p> <p>Though the majority of the modular API follows the same patterns as the namespaced API, the organization of the code is different. Generally, the namespaced API is oriented towards a namespace and service pattern, while the modular API is oriented toward discrete functions. For example, the namespaced API's dot-chaining, such as <code translate="no" dir="ltr">firebaseApp.auth()</code>, is replaced in the modular API by a single <code translate="no" dir="ltr">getAuth()</code> function that takes <code translate="no" dir="ltr">firebaseApp</code> and returns an <span class="notranslate">Authentication</span> instance.</p> <p>This means that Web apps created with the namespaced API require refactoring in order to take advantage of modular app design. See the <a href="/docs/web/modular-upgrade">upgrade guide</a> for further details.</p> <h3 id="v9-new-apps" data-text="JavaScript - modular API for new apps" tabindex="-1">JavaScript - modular API for new apps</h3> <p>If you're starting on a new integration with Firebase, you can opt into the modular API when you <a href="/docs/web/setup?sdk_version=v9#add-sdks-initialize">add and initialize the SDK</a>.</p> <p>As you develop your app, keep in mind that your code will be organized principally around <strong>functions</strong>. In the modular API, services are passed as the first argument, and the function then uses the details of the service to do the rest. For example:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(firebaseApp); onAuthStateChanged(auth, user => { // Check for user status }); </code></pre> <p>For more examples and details, see the guides for each product area as well as the <a href="/docs/reference/js">the modular API reference documentation</a>.</p> <h2 id="ways-to-add-web-sdks" data-text="Ways to add the Web SDKs to your app" tabindex="-1">Ways to add the Web SDKs to your app</h2> <p>Firebase provides JavaScript libraries for most Firebase products, including <span class="notranslate">Remote Config</span>, <span class="notranslate">FCM</span>, and more. How you add Firebase SDKs to your Web app depends on what tooling you're using with your app (like a module bundler).</p> <p>You can add any of the <a href="#available-libraries">available libraries</a> to your app via one of the supported methods:</p> <ul> <li>npm (for module bundlers)</li> <li>CDN (content delivery network)</li> </ul> <p>For detailed setup instructions, see <a href="/docs/web/setup">Add Firebase to your JavaScript App</a>. The rest of this section contains information to help you choose from the available options.</p> <aside class="note"><strong>Note:</strong><span> We do not recommend creating a new Firebase app with namespaced API libraries, which don't provide optimization such as tree-shaking. Existing apps using the namespaced API can still find details and code snippets in the how-to guides for each product area (for instance, <span class="notranslate">FCM</span> <a href="/docs/cloud-messaging/js/receive">message handling</a> guides).</span></aside> <h3 id="add-sdks-npm" data-text="npm" tabindex="-1">npm</h3> <p>Downloading the Firebase npm package (which includes both browser and Node.js bundles) provides you with a local copy of the Firebase SDK, which may be needed for non-browser applications such as Node.js apps, React Native, or Electron. The download includes Node.js and React Native bundles as an option for some packages. The Node.js bundles are necessary for the server-side rendering (SSR) step of SSR frameworks.</p> <p>Using npm with a module bundler such as <a href="https://webpack.js.org/" class="external">webpack</a> or <a href="https://rollupjs.org/" class="external">Rollup</a> provides optimization options to "tree-shake" unused code and apply targeted polyfills, which can greatly reduce the size footprint of your app. Implementing these features may add some complexity to your configuration and build chain, but various mainstream CLI tools can help mitigate that. These tools include <a href="https://angular.io" class="external">Angular</a>, <a href="https://reactjs.org" class="external">React</a>, <a href="https://vuejs.org/" class="external">Vue</a>, <a href="https://nextjs.org/" class="external">Next</a>, and others.</p> <p>In summary:</p> <ul> <li>Provides valuable app size optimization</li> <li>Robust tooling is available to manage modules</li> <li>Required for SSR with Node.js</li> </ul> <h3 id="add-sdks-cdn" data-text="CDN (content delivery network)" tabindex="-1">CDN (content delivery network)</h3> <p>Adding libraries that are stored on Firebase's CDN is a simple SDK setup method that may be familiar to many developers. Using the CDN to add the SDKs, you won't need a build tool, and your build chain may tend to be simpler and easier to work with compared to module bundlers. If you're not especially concerned about the installed size of your app and don't have special requirements such as transpiling from TypeScript, then CDN could be a good choice.</p> <p>In summary:</p> <ul> <li>Familiar and simple</li> <li>Appropriate when app size is not a major concern</li> <li>Appropriate when your website does not use build tools.</li> </ul> <h2 id="sdk-variants" data-text="Firebase Web SDK variants" tabindex="-1">Firebase Web SDK variants</h2> <p>Firebase's Web SDK can be used in both browser and Node applications. However, several products are not available in Node environments. See the list of <a href="/docs/web/environments-js-sdk">supported environments</a>.</p> <p>Some product SDKs provide separate browser and Node variants, each of which are provided in both ESM and CJS formats, and some product SDKs even provide Cordova or React Native variants. The Web SDK is configured to provide the correct variant based on your tooling config or environment and should not require manual selection in most cases. All SDK variants are designed to help build web apps or client apps for end-user access, such as in a Node.js desktop or IoT application. If your goal is to set up administrative access from privileged environments (such as servers) use the <a href="/docs/admin/setup"><span class="notranslate"><span class="notranslate">Firebase</span> Admin SDK</span></a> instead.</p> <h3 id="environment-detection" data-text="Environment detection with bundlers and frameworks" tabindex="-1">Environment detection with bundlers and frameworks</h3> <p>When you install the Firebase Web SDK using npm, the JavaScript and Node.js versions are both installed. The package provides detailed environment detection to enable the right bundles for your application.</p> <p>If your code uses Node.js <code translate="no" dir="ltr">require</code> statements, the SDK finds the Node-specific bundle. Otherwise, your bundler's settings must be correctly figured to detect the right entry point field in your <code translate="no" dir="ltr">package.json</code> file (for example, <code translate="no" dir="ltr">main</code>, <code translate="no" dir="ltr">browser</code>, or <code translate="no" dir="ltr">module</code>). If you experience runtime errors with the SDK, check to make sure your bundler is configured to prioritize the correct type of bundle for your environment.</p> <h2 id="config-object" data-text="Learn about the Firebase config object" tabindex="-1">Learn about the Firebase config object</h2> <p>To initialize Firebase in your app, you need to provide your app's Firebase project configuration. You can <a href="//support.google.com/firebase/answer/7015592" class="external">obtain your Firebase config object</a> at any time.</p> <ul> <li><p>We do not recommend manually editing your config object, especially the following required "Firebase options": <code translate="no" dir="ltr">apiKey</code>, <code translate="no" dir="ltr">projectId</code>, and <code translate="no" dir="ltr">appID</code>. If you initialize your app with invalid or missing values for these required "Firebase options", users of your app may experience serious issues. The exception to this is the <code translate="no" dir="ltr">authDomain</code>, which can be updated following <a href="/docs/auth/web/redirect-best-practices#update-authdomain">Best practices for using signInWithRedirect</a>.</p></li> <li><p>If you enabled <span class="notranslate">Google Analytics</span> in your Firebase project, your config object contains the field <code translate="no" dir="ltr">measurementId</code>. Learn more about this field in the <a href="/docs/analytics/get-started?platform=web#add-sdk"><span class="notranslate">Analytics</span> getting started page</a>.</p></li> <li><p>If you enable <span class="notranslate">Google Analytics</span> or <span class="notranslate">Realtime Database</span> <em>after</em> you create your Firebase Web App, make sure that the Firebase config object that you use in your app is updated with the associated config values (<code translate="no" dir="ltr">measurementId</code> and <code translate="no" dir="ltr">databaseURL</code>, respectively). You can <a href="https://support.google.com/firebase/answer/7015592" class="external">obtain your Firebase config object</a> at any time.</p></li> </ul> <aside class="note"><strong>Note:</strong><span> The Firebase config object contains unique, but non-secret identifiers for your Firebase project. <br>Visit <a href="/docs/projects/learn-more#config-files-objects">Understand Firebase Projects</a> to learn more about this config object.</span></aside> <p>Here's the format of a config object with all services enabled (these values are automatically populated):</p> <pre class="prettyprint readonly" translate="no" dir="ltr"> var firebaseConfig = { apiKey: <b>"<var translate="no">API_KEY</var>"</b>, authDomain: <b>"<var translate="no">PROJECT_ID</var>.firebaseapp.com"</b>, // The value of `databaseURL` depends on the <a href="/docs/projects/locations#rtdb-locations">location of the database</a> databaseURL: <b>"https://<var translate="no">DATABASE_NAME</var>.firebaseio.com"</b>, projectId: <b>"<var translate="no">PROJECT_ID</var>"</b>, storageBucket: <b>"<var translate="no">PROJECT_ID</var>.appspot.com"</b>, messagingSenderId: <b>"<var translate="no">SENDER_ID</var>"</b>, appId: <b>"<var translate="no">APP_ID</var>"</b>, // For <span class="notranslate">Firebase</span> <span class="notranslate">JavaScript</span> SDK v7.20.0 and later, `measurementId` is an optional field measurementId: <b>"G-<var translate="no">MEASUREMENT_ID</var>"</b>, }; </pre> <h2 id="available-libraries" data-text="Available libraries" tabindex="-1">Available libraries</h2> <section class="expandable" id="libraries-cdn"> <h3 class="showalways hide-from-toc" id="libraries-cdn" data-text="Available Firebase JS SDKs (from the CDN)" tabindex="-1">Available Firebase JS SDKs (from the CDN)</h3> <strong>Modular libraries</strong> <p>Learn how to use these import statements in the guide for <a href="/docs/web/alt-setup#from-the-cdn">alternative ways to add the JS SDK</a>. </p> <table> <thead> <tr> <th width="15%"><strong>Firebase product</strong></th> <th><strong>Library reference</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core<br>(required)</td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js"</code></td> </tr> <tr> <td><a href="/docs/analytics/get-started?platform=web"><span class="notranslate">Analytics</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-analytics.js"</code></td> </tr> <tr> <td><a href="/docs/app-check"><span class="notranslate">App Check</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app-check.js"</code></td> </tr> <tr> <td><a href="/docs/auth/web/start"><span class="notranslate">Authentication</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js"</code></td> </tr> <tr> <td><a href="/docs/firestore/quickstart"><span class="notranslate">Cloud Firestore</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js"</code></td> </tr> <tr> <td><a href="/docs/functions/callable#call_the_function"><span class="notranslate"><span class="notranslate">Cloud Functions for Firebase</span> Client SDK</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-functions.js"</code></td> </tr> <tr> <td><a href="/docs/projects/manage-installations"><span class="notranslate">Firebase</span> installations</a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-installations.js"</code></td> </tr> <tr> <td><a href="/docs/cloud-messaging/js/client"><span class="notranslate">Cloud Messaging</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-messaging.js"</code> <p>For an optimal experience using <span class="notranslate">Cloud Messaging</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> <tr> <td><a href="/docs/storage/web/start"><span class="notranslate">Cloud Storage</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-storage.js"</code></td> </tr> <tr> <td><a href="/docs/perf-mon/get-started-web"><span class="notranslate">Performance Monitoring</span></a> <br><em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-performance.js"</code> <p>We also provide a standalone, lightweight <span class="notranslate">Performance Monitoring</span> SDK (via the CDN). Visit the <a href="/docs/perf-mon/troubleshooting?platform=web#faq-standalone-namespaced-v8-sdk">FAQ</a> to learn more. </p></td> </tr> <tr> <td><a href="/docs/database/web/start"><span class="notranslate">Realtime Database</span></a></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-database.js"</code></td> </tr> <tr> <td><a href="/docs/remote-config/get-started?platform=web"><span class="notranslate">Remote Config</span></a> <br><em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import { } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-remote-config.js"</code> <p>For an optimal experience using <span class="notranslate">Remote Config</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> </tbody> </table> <strong>Namespaced libraries</strong> <table> <thead> <tr> <th width="15%"><strong>Firebase product</strong></th> <th><strong>Library reference</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core<br>(required)</td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-app-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/analytics/get-started?platform=web"><span class="notranslate">Analytics</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-analytics-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/app-check"><span class="notranslate">App Check</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-app-check-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/auth/web/start"><span class="notranslate">Authentication</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-auth-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/firestore/quickstart"><span class="notranslate">Cloud Firestore</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/functions/callable#call_the_function"><span class="notranslate"><span class="notranslate">Cloud Functions for Firebase</span> Client SDK</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-functions-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/projects/manage-installations"><span class="notranslate">Firebase</span> installations</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-installations-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/cloud-messaging/js/client"><span class="notranslate">Cloud Messaging</span></a></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-messaging-compat.js"></script></pre> <p>For an optimal experience using <span class="notranslate">Cloud Messaging</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> <tr> <td><a href="/docs/storage/web/start"><span class="notranslate">Cloud Storage</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-storage-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/perf-mon/get-started-web"><span class="notranslate">Performance Monitoring</span></a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-performance-compat.js"></script></pre> <p>We also provide a standalone, lightweight <span class="notranslate">Performance Monitoring</span> SDK (via the CDN). Visit the <a href="/docs/perf-mon/troubleshooting?platform=web#faq-standalone-namespaced-v8-sdk">FAQ</a> to learn more. </p></td> </tr> <tr> <td><a href="/docs/database/web/start"><span class="notranslate">Realtime Database</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-database-compat.js"></script></pre></td> </tr> <tr> <td><a href="/docs/remote-config/get-started?platform=web"><span class="notranslate">Remote Config</span></a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-remote-config-compat.js"></script></pre> <p>For an optimal experience using <span class="notranslate">Remote Config</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> </tbody> </table> </section> <section class="expandable" id="libraries-bundle"> <h3 class="showalways hide-from-toc" id="libraries-bundle" data-text="Available Firebase JS SDKs (using bundler with modules)" tabindex="-1">Available Firebase JS SDKs (using bundler with modules)</h3> <strong>Modular libraries</strong> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library reference</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core <em>(required)</em></td> <td><code translate="no" dir="ltr">import {} from "firebase/app";</code></td> </tr> <tr> <td><a href="/docs/analytics/get-started?platform=web"><span class="notranslate">Analytics</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/analytics";</code></td> </tr> <tr> <td><a href="/docs/app-check"><span class="notranslate">App Check</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/app-check";</code></td> </tr> <tr> <td><a href="/docs/auth/web/start"><span class="notranslate">Authentication</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/auth";</code></td> </tr> <tr> <td><a href="/docs/firestore/quickstart"><span class="notranslate">Cloud Firestore</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/firestore";</code></td> </tr> <tr> <td><a href="/docs/functions/callable#call_the_function"><span class="notranslate"><span class="notranslate">Cloud Functions for Firebase</span> Client SDK</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/functions";</code></td> </tr> <tr> <td><a href="/docs/projects/manage-installations"><span class="notranslate">Firebase</span> installations</a></td> <td><code translate="no" dir="ltr">import {} from "firebase/installations";</code></td> </tr> <tr> <td><a href="/docs/cloud-messaging/js/client"><span class="notranslate">Cloud Messaging</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/messaging";</code> <p>For an optimal experience using <span class="notranslate">Cloud Messaging</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> <tr> <td><a href="/docs/storage/web/start"><span class="notranslate">Cloud Storage</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/storage";</code></td> </tr> <tr> <td><a href="/docs/perf-mon/get-started-web"><span class="notranslate">Performance Monitoring</span></a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import {} from "firebase/performance";</code></td> </tr> <tr> <td><a href="/docs/database/web/start"><span class="notranslate">Realtime Database</span></a></td> <td><code translate="no" dir="ltr">import {} from "firebase/database";</code></td> </tr> <tr> <td><a href="/docs/remote-config/get-started?platform=web"><span class="notranslate">Remote Config</span></a> </td> <td><code translate="no" dir="ltr">import {} from "firebase/remote-config";</code> <p>For an optimal experience using <span class="notranslate">Remote Config</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> </tbody> </table> <strong>Namespaced libraries</strong> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library reference</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core <em>(required)</em></td> <td><code translate="no" dir="ltr">import firebase from "firebase/compat/app";</code></td> </tr> <tr> <td><a href="/docs/analytics/get-started?platform=web"><span class="notranslate">Analytics</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/analytics";</code></td> </tr> <tr> <td><a href="/docs/app-check"><span class="notranslate">App Check</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/app-check";</code></td> </tr> <tr> <td><a href="/docs/auth/web/start"><span class="notranslate">Authentication</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/auth";</code></td> </tr> <tr> <td><a href="/docs/firestore/quickstart"><span class="notranslate">Cloud Firestore</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/firestore";</code></td> </tr> <tr> <td><a href="/docs/functions/callable#call_the_function"><span class="notranslate"><span class="notranslate">Cloud Functions for Firebase</span> Client SDK</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/functions";</code></td> </tr> <tr> <td><a href="/docs/projects/manage-installations"><span class="notranslate">Firebase</span> installations</a></td> <td><code translate="no" dir="ltr">import "firebase/compat/installations";</code></td> </tr> <tr> <td><a href="/docs/cloud-messaging/js/client"><span class="notranslate">Cloud Messaging</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/messaging";</code> <p>For an optimal experience using <span class="notranslate">Cloud Messaging</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> <tr> <td><a href="/docs/storage/web/start"><span class="notranslate">Cloud Storage</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/storage";</code></td> </tr> <tr> <td><a href="/docs/perf-mon/get-started-web"><span class="notranslate">Performance Monitoring</span></a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import "firebase/compat/performance";</code></td> </tr> <tr> <td><a href="/docs/database/web/start"><span class="notranslate">Realtime Database</span></a></td> <td><code translate="no" dir="ltr">import "firebase/compat/database";</code></td> </tr> <tr> <td><a href="/docs/remote-config/get-started?platform=web"><span class="notranslate">Remote Config</span></a> <em>(<strong>beta</strong> release)</em></td> <td><code translate="no" dir="ltr">import "firebase/compat/remote-config";</code> <p>For an optimal experience using <span class="notranslate">Remote Config</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> </tbody> </table> </section> <section class="expandable" id="libraries-hosting-urls"> <h3 class="showalways hide-from-toc" id="libraries-hosting-urls" data-text="Available Firebase JS SDKs (from reserved Hosting URLs)" tabindex="-1">Available Firebase JS SDKs (from reserved <span class="notranslate">Hosting</span> URLs)</h3> <aside class="note">Reserved <span class="notranslate">Hosting</span> URLs are available only with version 8 and earlier. You cannot use version 9 or later with <span class="notranslate">Hosting</span> URLs. </aside> <table> <thead> <tr> <th><strong>Firebase product</strong></th> <th><strong>Library reference (reserved URL)</strong></th> </tr> </thead> <tbody> <tr> <td>Firebase core<br>(required)</td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-app.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/analytics/get-started?platform=web"><span class="notranslate">Analytics</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-analytics.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/app-check"><span class="notranslate">App Check</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-app-check.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/auth/web/start"><span class="notranslate">Authentication</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-auth.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/firestore/quickstart"><span class="notranslate">Cloud Firestore</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-firestore.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/functions/callable#call_the_function"><span class="notranslate"><span class="notranslate">Cloud Functions for Firebase</span> Client SDK</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-functions.js"></script></pre></td> </tr> <tr> <td><a href="/docs/projects/manage-installations"><span class="notranslate">Firebase</span> installations</a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-installations.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/cloud-messaging/js/client"><span class="notranslate">Cloud Messaging</span></a></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-messaging.js"></script></pre> <p>For an optimal experience using <span class="notranslate">Cloud Messaging</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> <tr> <td> <a href="/docs/storage/web/start"><span class="notranslate">Cloud Storage</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-storage.js"></script></pre></td> </tr> <tr> <td> <a href="/docs/perf-mon/get-started-web"><span class="notranslate">Performance Monitoring</span></a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-performance.js"></script></pre></td> </tr> <tr> <td><a href="/docs/database/web/start"><span class="notranslate">Realtime Database</span></a></td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-database.js"></script></pre></td> </tr> <tr> <td><a href="/docs/remote-config/use-config-web"><span class="notranslate">Remote Config</span></a> <br><em>(<strong>beta</strong> release)</em></td> <td><pre class="prettyprint inline-code" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase-remote-config.js"></script></pre> <p>For an optimal experience using <span class="notranslate">Remote Config</span>, also add the Firebase SDK for <span class="notranslate">Analytics</span>.</p></td> </tr> <tr> <td><span class="notranslate">Firebase</span> <span class="notranslate">JavaScript</span> SDK<br>(entire SDK)</td> <td><pre class="prettyprint" translate="no" dir="ltr"><script src="/__/firebase/8.10.1/firebase.js"></script></pre></td> </tr> </tbody> </table> </section> <h2 id="additional-setup-options" data-text="Additional setup options" tabindex="-1">Additional setup options</h2> <h3 id="delay-sdks-cdn" data-text="Delay loading of Firebase SDKs (from CDN)" tabindex="-1">Delay loading of Firebase SDKs (from CDN)</h3> <p>You can delay the inclusion of the Firebase SDKs until the entire page has loaded. If you are using modular API CDN scripts with <code translate="no" dir="ltr"><script type="module"></code>, this is the default behavior. If you are using namespaced CDN scripts as a module, complete these steps to defer loading:</p> <ol> <li><p>Add a <code translate="no" dir="ltr">defer</code> flag to each <code translate="no" dir="ltr">script</code> tag for the Firebase SDKs, then defer the initialization of Firebase using a second script, for example:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr"><script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script> </code></pre></li> <li><p>Create an <code translate="no" dir="ltr">init-firebase.js</code> file, then include the following in the file:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </code></pre></li> </ol> <h3 id="multiple-projects" data-text="Use multiple Firebase projects in a single app" tabindex="-1">Use multiple Firebase projects in a single app</h3> <p>In most cases, you only have to initialize Firebase in a single, default app. You can access Firebase from that app in two equivalent ways:</p> <div class="ds-selector-tabs" data-ds-scope="lang"> <section> <h3 translate="no" id="web" data-text="Web" tabindex="-1"><span class="two-line-tab notranslate"><span tab-label="modular API" class="notranslate">Web</span></span></h3> <aside class="note" style="padding-top:8px; padding-bottom:8px;"> <a href="//firebase.google.com/docs/web/learn-more#modular-version">Learn more</a> about the tree-shakeable modular Web API and <a href="//firebase.google.com/docs/web/modular-upgrade">upgrade</a> from the namespaced API.</aside> <pre class="prettyprint lang-js" translate="no" dir="ltr" data-code-snippet="true" data-github-path="firebase/snippets-web/snippets/firebaseapp-next/firebaseapp/app_default_init_options.js" data-region-tag="app_default_init_options_modular">import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a "default" Firebase project const defaultProject = initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = getStorage(defaultProject); let defaultFirestore = getFirestore(defaultProject); // Option 2: Access Firebase services using shorthand notation defaultStorage = getStorage(); defaultFirestore = getFirestore();<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/firebase/snippets-web/blob/56d70627e2dc275f01cd0e55699794bf40faca80/snippets/firebaseapp-next/firebaseapp/app_default_init_options.js#L8-L23" class="gc-analytics-event" data-category="github_link" data-label="firebase/snippets-web/snippets/firebaseapp-next/firebaseapp/app_default_init_options.js#app_default_init_options_modular" >app_default_init_options.js</a></div></pre> </section> <section> <h3 translate="no" id="web_1" data-text="Web" tabindex="-1"><span class="two-line-tab notranslate"><span tab-label="namespaced API" class="notranslate">Web</span></span></h3> <pre class="prettyprint lang-js" translate="no" dir="ltr" data-code-snippet="true" data-github-path="firebase/snippets-web/firebaseapp/firebaseapp.js" data-region-tag="app_default_init_options">// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/firebase/snippets-web/blob/56d70627e2dc275f01cd0e55699794bf40faca80/firebaseapp/firebaseapp.js#L32-L43" class="gc-analytics-event" data-category="github_link" data-label="firebase/snippets-web/firebaseapp/firebaseapp.js#app_default_init_options" >firebaseapp.js</a></div></pre> </section> </div> <p>Sometimes, though, you need to access multiple Firebase projects at the same time. For example, you might want to read data from the database of one Firebase project but store files in a different Firebase project. Or you might want to authenticate one project while keeping a second project unauthenticated.</p> <p>The <span class="notranslate">Firebase</span> <span class="notranslate">JavaScript</span> SDK allows you to initialize and use multiple Firebase projects in a single app at the same time, with each project using its own Firebase configuration information.</p> <aside class="note"><strong>Note:</strong><span> Each Firebase project has its own Firebase configuration and authentication state.</span></aside> <div class="ds-selector-tabs" data-ds-scope="lang"> <section> <h3 translate="no" id="web_2" data-text="Web" tabindex="-1"><span class="two-line-tab notranslate"><span tab-label="modular API" class="notranslate">Web</span></span></h3> <aside class="note" style="padding-top:8px; padding-bottom:8px;"> <a href="//firebase.google.com/docs/web/learn-more#modular-version">Learn more</a> about the tree-shakeable modular Web API and <a href="//firebase.google.com/docs/web/modular-upgrade">upgrade</a> from the namespaced API.</aside> <pre class="prettyprint lang-js" translate="no" dir="ltr" data-code-snippet="true" data-github-path="firebase/snippets-web/snippets/firebaseapp-next/firebaseapp/app_multi_project_init_options.js" data-region-tag="app_multi_project_init_options_modular">import { initializeApp, getApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a default Firebase project initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = initializeApp(otherProjectFirebaseConfig, "other"); console.log(getApp().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = getStorage(); const defaultFirestore = getFirestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = getStorage(otherProject); const otherFirestore = getFirestore(otherProject);<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/firebase/snippets-web/blob/56d70627e2dc275f01cd0e55699794bf40faca80/snippets/firebaseapp-next/firebaseapp/app_multi_project_init_options.js#L8-L27" class="gc-analytics-event" data-category="github_link" data-label="firebase/snippets-web/snippets/firebaseapp-next/firebaseapp/app_multi_project_init_options.js#app_multi_project_init_options_modular" >app_multi_project_init_options.js</a></div></pre> </section> <section> <h3 translate="no" id="web_3" data-text="Web" tabindex="-1"><span class="two-line-tab notranslate"><span tab-label="namespaced API" class="notranslate">Web</span></span></h3> <pre class="prettyprint lang-js" translate="no" dir="ltr" data-code-snippet="true" data-github-path="firebase/snippets-web/firebaseapp/firebaseapp.js" data-region-tag="app_multi_project_init_options">// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/firebase/snippets-web/blob/56d70627e2dc275f01cd0e55699794bf40faca80/firebaseapp/firebaseapp.js#L57-L72" class="gc-analytics-event" data-category="github_link" data-label="firebase/snippets-web/firebaseapp/firebaseapp.js#app_multi_project_init_options" >firebaseapp.js</a></div></pre> </section> </div> <h3 id="test-locally" data-text="Run a local web server for development" tabindex="-1">Run a local web server for development</h3> <p>If you're building a web app, some parts of the <span class="notranslate">Firebase</span> <span class="notranslate">JavaScript</span> SDK require that you serve your web app from a server rather than from the local filesystem. You can use the <a href="/docs/cli"><span class="notranslate">Firebase</span> CLI</a> to run a local server.</p> <p>If you already set up <span class="notranslate">Firebase Hosting</span> for your app, you might have already completed several of the steps below.</p> <p>To serve your web app, you'll use the <span class="notranslate">Firebase</span> CLI, a command-line tool.</p> <ol> <li><p>Visit the <span class="notranslate">Firebase</span> CLI documentation to learn how to <a href="/docs/cli#install_the_firebase_cli">install the CLI</a> or <a href="/docs/cli#update-cli">update to its latest version</a>.</p></li> <li><p><a href="/docs/cli#initialize_a_firebase_project">Initialize your Firebase project.</a> Run the following command from the root of your local app directory:</p> <pre class="devsite-terminal" translate="no" dir="ltr">firebase init</pre> <p><section class="expandable"> <p class="showalways"><b>What does this initialization command do?</b></p></p> <ul> <li><p>Links your local app directory with Firebase</p></li> <li><p>Generates a <a href="/docs/cli#the_firebasejson_file"><code translate="no" dir="ltr">firebase.json</code> file</a> (a required file for <span class="notranslate">Firebase Hosting</span>)</p></li> <li><p>Prompts you to specify a public root directory which contains your public static files (HTML, CSS, JS, etc.)</p> <p>The default name for the directory that Firebase looks for is "public". You can also <a href="/docs/hosting/full-config#public">set the public directory</a> later by directly modifying your <code translate="no" dir="ltr">firebase.json</code> file.</p></li> </ul> <p></section></p></li> <li><p><a href="/docs/cli#test-locally">Start the local server</a> for development. Run the following command from the root of your local app directory:</p> <pre class="devsite-terminal" translate="no" dir="ltr">firebase serve</pre></li> </ol> <h2 id="open-source" data-text="Open source resources for Firebase JavaScript SDKs" tabindex="-1">Open source resources for Firebase JavaScript SDKs</h2> <p>Firebase supports open source development, and we encourage community contributions and feedback.</p> <h3 id="open-source-sdks" data-text="Firebase JavaScript SDKs" tabindex="-1">Firebase JavaScript SDKs</h3> <p>Most Firebase JavaScript SDKs are developed as open source libraries in our public <a href="//github.com/firebase/firebase-js-sdk" class="external">Firebase GitHub repository</a>.</p> <h3 id="open-source-quickstarts" data-text="Quickstart samples" tabindex="-1">Quickstart samples</h3> <p>Firebase maintains a collection of quickstart samples for most Firebase APIs on Web. Find these quickstarts in our public <a href="//github.com/firebase/quickstart-js" class="external">Firebase GitHub quickstart repository</a>. You can use these quickstarts as example code for using Firebase SDKs.</p> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" class="nocontent" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/icon.svg" project-support-url="https://firebase.google.com/support/" > <button> Send feedback </button> </devsite-feedback> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-11-14 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Firebase" product-id="719752" bucket="" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-feedback-url="https://firebase.google.com/support/contact/bugs-features/" project-icon="https://firebase.google.com/_static/firebase/images/icon.svg" project-support-url="https://firebase.google.com/support/" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-11-14 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Learn</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/docs/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Developer guides </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/docs/reference/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > SDK & API reference </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/docs/samples/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Samples </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/docs/libraries/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Libraries </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//github.com/firebase/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > GitHub </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Stay connected</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//firebase.blog" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Check out the blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.reddit.com/r/Firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Find us on Reddit </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//x.com/Firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Follow on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.youtube.com/user/Firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Subscribe on YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/community/events" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Attend an event </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Support</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/support/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Contact support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//stackoverflow.com/questions/tagged/firebase" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Stack Overflow </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//firebase.community/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Slack community </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//groups.google.com/forum/#!forum/firebase-talk" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Google group </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/support/releases" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Release notes </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/brand-guidelines/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Brand guidelines </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/support/faq/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > FAQs </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup-google-for-developers-dark-theme.svg" media="(prefers-color-scheme: none)" class="devsite-dark-theme" loading="lazy" alt="Google Developers"> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//developers.google.com/products/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt" >Português</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-N84485", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Firebase", "signedIn": "False", "tenant": "firebase", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <firebase-gtm></firebase-gtm> <firebase-utm></firebase-utm> <script nonce="AIIlDNOLCmSmtzEfIUkfBJNMhELK45"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/js/app_loader.js', '[4,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase","https://firebase-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/firebase/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/firebase/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","firebase.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_developer_profiles_callout","Cloud__enable_cloud_shell_fte_user_flow","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_dlp_service","Profiles__enable_complete_playlist_endpoint","CloudShell__cloud_shell_button","Search__enable_page_map","Profiles__enable_awarding_url","Analytics__enable_clearcut_logging","Experiments__reqs_query_experiments","Cloud__enable_cloudx_experiment_ids","Search__enable_ai_search_summaries","MiscFeatureFlags__enable_dark_theme","Concierge__enable_concierge","Profiles__enable_completecodelab_endpoint","Concierge__enable_pushui","Cloud__enable_cloud_shell","Cloud__enable_llm_concierge_chat","Profiles__enable_page_saving","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_explain_this_code","DevPro__enable_developer_subscriptions","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_firebase_utm","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloudx_ping","Cloud__enable_free_trial_server_call","CloudShell__cloud_code_overflow_menu","TpcFeatures__enable_required_headers","Search__enable_ai_eligibility_checks","Search__enable_suggestions_from_borg","BookNav__enable_tenant_cache_key","MiscFeatureFlags__developers_footer_image","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_variable_operator","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__emergency_css","Profiles__require_profile_eligibility_for_signin","Profiles__enable_profile_collections","Profiles__enable_dashboard_curated_recommendations","Significatio__enable_by_tenant","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_project_variables","DevPro__enable_cloud_innovators_plus","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_facet_chat"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[4,"firebase","Firebase","firebase.google.com",null,"firebase-dot-devsite-v2-prod.appspot.com",null,null,[1,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1]],null,null,null,[1,null,1],[1,1,null,null,1]],null,[68,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,1,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,20,22,23,29,37],null,[[],[1,1]],[[null,null,null,null,["UA-24532603-9"],["GTM-N84485"],null,null,null,null,[["UA-24532603-9",1]],[["GTM-N84485",1]],1],[[2,5],[36,4],[16,2],[17,1],[46,8]],null,1],null,4],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Understand Firebase for Web