CINXE.COM

<!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/codelabs/firebase-ios-swift"><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/codelabs/firebase-ios-swift" /><link rel="alternate" hreflang="x-default" href="https://firebase.google.com/codelabs/firebase-ios-swift" /><link rel="alternate" hreflang="ar" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=ar" /><link rel="alternate" hreflang="bn" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=fa" /><link rel="alternate" hreflang="fr" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=fr" /><link rel="alternate" hreflang="de" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=de" /><link rel="alternate" hreflang="he" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=he" /><link rel="alternate" hreflang="hi" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=hi" /><link rel="alternate" hreflang="id" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=id" /><link rel="alternate" hreflang="it" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=it" /><link rel="alternate" hreflang="ja" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=ja" /><link rel="alternate" hreflang="ko" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=ko" /><link rel="alternate" hreflang="pl" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=pt-br" /><link rel="alternate" hreflang="pt" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=pt" /><link rel="alternate" hreflang="ru" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=ru" /><link rel="alternate" hreflang="es" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=es" /><link rel="alternate" hreflang="es-419" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=es-419" /><link rel="alternate" hreflang="th" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=th" /><link rel="alternate" hreflang="tr" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=tr" /><link rel="alternate" hreflang="vi" href="https://firebase.google.com/codelabs/firebase-ios-swift?hl=vi" /><title>Firebase iOS Codelab Swift</title> <meta property="og:title" content="Firebase iOS Codelab Swift"><meta name="description" content="In this codelab, you’ll learn how to use the Firebase platform on iOS in Swift."> <meta property="og:description" content="In this codelab, you’ll learn how to use the Firebase platform on iOS in Swift."><meta property="og:url" content="https://firebase.google.com/codelabs/firebase-ios-swift"><meta property="og:locale" content="en"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="codelab" theme="firebase-icy-theme" type="codelab" 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> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion 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"> Sign in </devsite-user> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> </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> </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="//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"> Go to console </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <devsite-content> <article class="devsite-article"><style> body { transition: opacity ease-in 0.2s; } body[unresolved] { opacity: 0; display: block; overflow: hidden; position: relative; } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > </ul> </div> <h1 class="devsite-page-title" tabindex="-1"> Firebase iOS Codelab Swift </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> Stay organized with collections Save and categorize content based on your preferences. </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="1" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <google-codelab-analytics gaid="UA-49880327-14" ga4id="G-JTFZSJVVVZ"></google-codelab-analytics> <google-codelab codelab-gaid="" codelab-ga4id="" doc-id="191BTya7LJ19Rus4nrN9NtJdheii35ltX3I3SCCM50rw" id="firebase-ios-swift" title="Firebase iOS Codelab Swift" no-tooltip="" environment="web" category="firebase,ios" feedback-link="https://github.com/firebase/codelab-friendlychat-ios/issues" layout="paginated" > <google-codelab-step label="Overview" duration="1" step="0"> <google-codelab-about codelab-title="Firebase iOS Codelab Swift" last-updated="2024-11-01T13:19:31Z" duration="20"> </google-codelab-about> <h2 class="step-title" id="0" data-text="Overview" tabindex="-1"> 1. Overview </h2> <img alt="2efe6805ef369641.png" style="width: 252.50px" src="/static/codelabs/firebase-ios-swift/img/2efe6805ef369641.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Welcome to the Friendly Chat codelab. In this codelab, you'll learn how to use the Firebase platform to create iOS applications. You will implement a chat client and monitor its performance using Firebase. <h3 class="checklist" is-upgraded id="what-youll-learn" data-text="What you'll learn" tabindex="-1">What you'll learn</h3> <ul class="checklist"> <li>Allow users to sign in.</li> <li>Sync data using the Firebase Realtime Database.</li> <li>Store binary files in Firebase Storage.</li> </ul> <h3 is-upgraded id="what-youll-need" data-text="What you'll need" tabindex="-1">What you'll need</h3> <ul> <li>Xcode</li> <li>CocoaPods</li> <li>A test device with iOS 8.0+ or simulator</li> </ul> <google-codelab-survey survey-id="firebase-ios-swift-1"> <h4 id="how-will-you-use-this-tutorial" data-text="How will you use this tutorial?" tabindex="-1">How will you use this tutorial?</h4> <paper-radio-group> <paper-radio-button>Read it through only</paper-radio-button> <paper-radio-button>Read it and complete the exercises</paper-radio-button> </paper-radio-group> <h4 id="how-would-rate-your-experience-with-building-ios-apps" data-text="How would rate your experience with building iOS apps?" tabindex="-1">How would rate your experience with building iOS apps?</h4> <paper-radio-group> <paper-radio-button>Novice</paper-radio-button> <paper-radio-button>Intermediate</paper-radio-button> <paper-radio-button>Proficient</paper-radio-button> </paper-radio-group> </google-codelab-survey> </google-codelab-step> <google-codelab-step label="Get the sample code" duration="1" step="1"> <h2 class="step-title" id="1" data-text="Get the sample code" tabindex="-1"> 2. Get the sample code </h2> Clone the GitHub repository from the command line. <div></div><devsite-code><pre translate="no" dir="ltr" is-upgraded>$ git clone https://github.com/firebase/codelab-friendlychat-ios </pre></devsite-code> <aside class="special">The "friendlychat-ios" repository contains many sample projects. This codelab only uses two: <ul> <li><img alt="android_studio_folder.png" style="width: 20.00px" src="/static/codelabs/firebase-ios-swift/img/a1beacb239657647.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">ios-starter/swift-starter—The starting code that you'll build upon in this codelab.</li> <li><img alt="android_studio_folder.png" style="width: 20.00px" src="/static/codelabs/firebase-ios-swift/img/a1beacb239657647.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">ios/swift—The complete code for the finished sample app.</li> </ul> </aside> </google-codelab-step> <google-codelab-step label="Build the starter app" duration="2" step="2"> <h2 class="step-title" id="2" data-text="Build the starter app" tabindex="-1"> 3. Build the starter app </h2> <img alt="2f4c98d858c453fe.png" style="width: 227.50px" src="/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2f4c98d858c453fe_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> To build the starter app: <ol type="1"> <li>In a terminal window, navigate to the <img alt="android_studio_folder.png" style="width: 20.00px" src="/static/codelabs/firebase-ios-swift/img/a1beacb239657647.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/a1beacb239657647_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"><code translate="no" dir="ltr">ios-starter/swift-starter</code> directory from your sample code download</li> <li>Run <code translate="no" dir="ltr">pod install --repo-update</code></li> <li>Open the FriendlyChatSwift.xcworkspace file to open the project in Xcode.</li> <li>Click the <img alt="98205811bbed9d74.png" style="width: 39.00px" src="/static/codelabs/firebase-ios-swift/img/98205811bbed9d74.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">Run button.</li> </ol> You should see the Friendly Chat home screen appear after a few seconds. The UI should appear. However, at this point you cannot sign in, send or receive messages. The app will abort with an exception until you complete the next step. </google-codelab-step> <google-codelab-step label="Create Firebase console Project" duration="1" step="3"> <h2 class="step-title" id="3" data-text="Create Firebase console Project" tabindex="-1"> 4. Create Firebase console Project </h2> <h3 is-upgraded id="create-project" data-text="Create project" tabindex="-1">Create project</h3> From <a href="https://console.firebase.google.com" target="_blank">Firebase console</a> select Add Project. Call the project <code translate="no" dir="ltr">FriendlyChat</code>, then click on Create Project. <img alt="Screenshot from 2015-11-06 14:13:39.png" style="width: 624.00px" src="/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/3304fca44a99c25a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h3 is-upgraded id="upgrade-your-firebase-pricing-plan" data-text="Upgrade your Firebase pricing plan" tabindex="-1">Upgrade your Firebase pricing plan</h3> To use Cloud Storage for Firebase, your Firebase project needs to be on the <a href="/docs/projects/billing/firebase-pricing-plans#blaze-pricing-plan" target="_blank">pay-as-you go (Blaze) pricing plan</a>, which means it's linked to a <a href="/docs/projects/billing/firebase-pricing-plans#cloud-billing-accounts" target="_blank">Cloud Billing account</a>. <ul> <li>A Cloud Billing account requires a payment method, like a credit card.</li> <li>If you're new to Firebase and Google Cloud, check if you're eligible for a <a href="/support/faq#pricing-free-trial" target="_blank">$300 credit and a Free Trial Cloud Billing account</a>.</li> <li>If you're doing this codelab as part of an event, ask your organizer if there are any Cloud credits available.</li> </ul> To upgrade your project to the Blaze plan, follow these steps: <ol type="1"> <li>In the Firebase console, select to <a href="https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered" target="_blank">upgrade your plan</a>.</li> <li>Select the Blaze plan. Follow the on-screen instructions to link a Cloud Billing account to your project. If you needed to create a Cloud Billing account as part of this upgrade, you might need to navigate back to the upgrade flow in the Firebase console to complete the upgrade.</li> </ol> <aside class="special">Note: You can <a href="https://console.firebase.google.com/project/_/overview?purchaseBillingPlan=metered" target="_blank">downgrade your project to the no-cost (Spark) pricing plan</a> after completing this codelab. </aside> <h3 is-upgraded id="connect-your-ios-app" data-text="Connect your iOS app" tabindex="-1">Connect your iOS app</h3> <ol type="1"> <li>From the Project Overview screen of your new project, click Add Firebase to your iOS app.</li> <li>Enter the bundle ID, as "<code translate="no" dir="ltr">com.google.firebase.codelab.FriendlyChatSwift</code>".</li> <li>Enter the App Store id as "<code translate="no" dir="ltr">123456</code>".</li> <li>Click Register App.</li> </ol> <h3 is-upgraded id="add-googleservice-info.plist-file-to-your-app" data-text="Add GoogleService-Info.plist file to your app" tabindex="-1">Add GoogleService-Info.plist file to your app</h3> On the second screen click Download GoogleService-Info.plist to download a configuration file that contains all the necessary Firebase metadata for your app. Copy that file to your application and add it to the FriendlyChatSwift target. You can now click the "x" in the upper right corner of the popup to close it – skipping steps 3 and 4 – as you will perform those steps here. <h3 is-upgraded id="heading" data-text="" tabindex="-1"><img alt="19d59efb213ddbdc.png" style="width: 260.00px" src="/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/19d59efb213ddbdc_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></h3> <h3 is-upgraded id="import-firebase-module" data-text="Import Firebase module" tabindex="-1">Import Firebase module</h3> Start by making sure the <code translate="no" dir="ltr">Firebase</code> module is imported. <h3 is-upgraded id="appdelegate.swift,-fcviewcontroller.swift" data-text="AppDelegate.swift, FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/AppDelegate.swift#L19" target="_blank">AppDelegate.swift</a>, <a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/FCViewController.swift#L20" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr">import Firebase </code></pre></devsite-code> <h3 is-upgraded id="configure-firebase-in-appdelegate" data-text="Configure Firebase in AppDelegate" tabindex="-1">Configure Firebase in AppDelegate</h3> Use the "configure" method in FirebaseApp inside the application:didFinishLaunchingWithOptions function to configure underlying Firebase services from your .plist file. <h3 is-upgraded id="appdelegate.swift" data-text="AppDelegate.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/AppDelegate.swift#L28" target="_blank">AppDelegate.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { FirebaseApp.configure() GIDSignIn.sharedInstance().delegate = self return true } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Identify Users" duration="5" step="4"> <h2 class="step-title" id="4" data-text="Identify Users" tabindex="-1"> 5. Identify Users </h2> <h3 is-upgraded id="use-rules-to-restrict-to-authenticated-users" data-text="Use Rules To Restrict To Authenticated Users" tabindex="-1">Use Rules To Restrict To Authenticated Users</h3> We will now add a rule to require authentication before reading or writing any messages. To do this we add the following rules to our messages data object. From within the Database section of <a href="http://console.firebase.google.com" target="_blank">Firebase console</a> select Realtime Database, then click on the Rules tab. Then update the rules so they look like this: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr">{ "rules": { "messages": { ".read": "auth != null", ".write": "auth != null" } } } </code></pre></devsite-code> For more information on how this works (including documentation on the "auth" variable) see the Firebase <a href="https://firebase.google.com/docs/database/security/quickstart" target="_blank">security documentation</a>. <h3 is-upgraded id="configure-authentication-apis" data-text="Configure Authentication APIs" tabindex="-1">Configure Authentication APIs</h3> Before your application can access the Firebase Authentication APIs on behalf of your users, you will have to enable it <ol type="1"> <li>Navigate to the <a href="http://console.firebase.google.com" target="_blank">Firebase console</a> and select your project</li> <li>Select Authentication</li> <li>Select the Sign In Method tab</li> <li>Toggle the Google switch to enabled (blue)</li> <li>Press Save on the resulting dialog</li> </ol> If you get errors later in this codelab with the message "CONFIGURATION_NOT_FOUND", come back to this step and double check your work. <h3 is-upgraded id="confirm-firebase-auth-dependency" data-text="Confirm Firebase Auth dependency" tabindex="-1">Confirm Firebase Auth dependency</h3> Confirm Firebase Auth dependencies exist in the <code translate="no" dir="ltr">Podfile</code> file. <h3 is-upgraded id="podfile" data-text="Podfile" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/Podfile#L7" target="_blank">Podfile</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr">pod 'Firebase/Auth' </code></pre></devsite-code> <h3 is-upgraded id="setup-your-info.plist-for-google-sign-in." data-text="Setup your Info.plist for Google Sign In." tabindex="-1">Setup your Info.plist for Google Sign In.</h3> You'll need to add a custom URL scheme to your XCode project. <ol type="1"> <li>Open your project configuration: double-click the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section.</li> <li>Click the + button, and add a URL scheme for your reversed client ID. To find this value, open the GoogleService-Info.plist configuration file, and look for the REVERSED_CLIENT_ID key. Copy the value of that key, and paste it into the URL Schemes box on the configuration page. Leave the other fields blank.</li> <li>When completed, your config should look something similar to the following (but with your application-specific values):</li> </ol> <img alt="1b54d5bd2f4f1448.png" style="width: 624.00px" src="/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/1b54d5bd2f4f1448_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h3 is-upgraded id="set-clientid-for-google-sign-in" data-text="Set clientID for Google Sign In" tabindex="-1">Set clientID for Google Sign In</h3> After Firebase is configured, we can use the clientID to set up the Google Sign In inside the "didFinishLaunchingWithOptions:" method. <h3 is-upgraded id="appdelegate.swift_1" data-text="AppDelegate.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/AppDelegate.swift#L62" target="_blank">AppDelegate.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { FirebaseApp.configure() GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID GIDSignIn.sharedInstance().delegate = self return true } </code></pre></devsite-code> <h3 is-upgraded id="add-the-sign-in-handler" data-text="Add the sign in handler" tabindex="-1">Add the sign in handler</h3> Once the result of the Google Sign-In was successful, use the account to authenticate with Firebase. <h3 is-upgraded id="appdelegate.swift_2" data-text="AppDelegate.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/AppDelegate.swift#L52-L60" target="_blank">AppDelegate.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error?) { if let error = error { print("Error \(error)") return } guard let authentication = user.authentication else { return } let credential = GoogleAuthProvider.credential(withIDToken: authentication.idToken, accessToken: authentication.accessToken) Auth.auth().signIn(with: credential) { (user, error) in if let error = error { print("Error \(error)") return } } } </code></pre></devsite-code> Automatically sign in the user. Then add a listener to Firebase Auth, to let the user into the app, after successful sign in. And remove the listener on deinit. <h3 is-upgraded id="signinviewcontroller.swift" data-text="SignInViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/SignInViewController.swift#L32-L43" target="_blank">SignInViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> override func viewDidLoad() { super.viewDidLoad() GIDSignIn.sharedInstance().uiDelegate = self GIDSignIn.sharedInstance().signInSilently() handle = Auth.auth().addStateDidChangeListener() { (auth, user) in if user != nil { MeasurementHelper.sendLoginEvent() self.performSegue(withIdentifier: Constants.Segues.SignInToFp, sender: nil) } } } deinit { if let handle = handle { Auth.auth().removeStateDidChangeListener(handle) } } </code></pre></devsite-code> <h3 is-upgraded id="sign-out" data-text="Sign Out" tabindex="-1">Sign Out</h3> Add the Sign out method <h3 is-upgraded id="fcviewcontroller.swift" data-text="FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/FCViewController.swift#L297-L305" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> @IBAction func signOut(_ sender: UIButton) { let firebaseAuth = Auth.auth() do { try firebaseAuth.signOut() dismiss(animated: true, completion: nil) } catch let signOutError as NSError { print ("Error signing out: \(signOutError.localizedDescription)") } } </code></pre></devsite-code> <h3 is-upgraded id="test-reading-messages-as-signed-in-user" data-text="Test Reading Messages as Signed In User" tabindex="-1">Test Reading Messages as Signed In User</h3> <ol type="1"> <li>Click the <img alt="98205811bbed9d74.png" style="width: 39.00px" src="/static/codelabs/firebase-ios-swift/img/98205811bbed9d74.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">Run button.</li> <li>You should be immediately sent to the sign-in screen. Tap the Google Sign-In button.</li> <li>You should then be sent to the messaging screen if everything worked well.</li> </ol> </google-codelab-step> <google-codelab-step label="Activate Realtime Database" duration="5" step="5"> <h2 class="step-title" id="5" data-text="Activate Realtime Database" tabindex="-1"> 6. Activate Realtime Database </h2> <img alt="2efe6805ef369641.png" style="width: 252.50px" src="/static/codelabs/firebase-ios-swift/img/2efe6805ef369641.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/2efe6805ef369641_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h3 is-upgraded id="import-messages" data-text="Import Messages" tabindex="-1">Import Messages</h3> In your project in <a href="https://console.firebase.google.com" target="_blank">Firebase console</a> select the Database item on the left navigation bar. In the overflow menu of the Database select Import JSON. Browse to the <code translate="no" dir="ltr">initial_messages.json</code> file in the friendlychat directory, select it then click the Import button. This will replace any data currently in your database. You could also edit the database directly, using the green + and red x to add and remove items. <img alt="20ccf4856b715b4c.png" style="width: 292.86px" src="/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/20ccf4856b715b4c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> After importing your database should look like this: <img alt="f3e0367f1c9cd187.png" style="width: 624.00px" src="/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f3e0367f1c9cd187_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h3 is-upgraded id="confirm-firebase-database-dependency" data-text="Confirm Firebase Database Dependency" tabindex="-1">Confirm Firebase Database Dependency</h3> In the dependencies block of the <code translate="no" dir="ltr">Podfile</code> file, confirm that <code translate="no" dir="ltr">Firebase/Database</code> is included. <h3 is-upgraded id="podfile_1" data-text="Podfile" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/Podfile#L10" target="_blank">Podfile</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr">pod 'Firebase/Database' </code></pre></devsite-code> <h3 is-upgraded id="synchronize-existing-messages" data-text="Synchronize Existing Messages" tabindex="-1">Synchronize Existing Messages</h3> Add code that synchronizes newly added messages to the app UI. The code you add in this section will: <ul> <li>Initialize the Firebase database and add a listener to handle changes made to the database.</li> <li>Update the <code translate="no" dir="ltr">DataSnapshot</code> so new messages will be shown.</li> </ul> Modify your FCViewController's "deinit", "configureDatabase", and "tableView:cellForRow indexPath:" methods; replace with the code defined below: <h3 is-upgraded id="fcviewcontroller.swift_1" data-text="FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/FCViewController.swift#L62-L73" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> deinit { if let refHandle = _refHandle { self.ref.child("messages").removeObserver(withHandle: _refHandle) } } func configureDatabase() { ref = Database.database().reference() // Listen for new messages in the Firebase database _refHandle = self.ref.child("messages").observe(.childAdded, with: { [weak self] (snapshot) -> Void in guard let strongSelf = self else { return } strongSelf.messages.append(snapshot) strongSelf.clientTable.insertRows(at: [IndexPath(row: strongSelf.messages.count-1, section: 0)], with: .automatic) }) } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // Dequeue cell let cell = self.clientTable.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath) // Unpack message from Firebase DataSnapshot let messageSnapshot = self.messages[indexPath.row] guard let message = messageSnapshot.value as? [String: String] else { return cell } let name = message[Constants.MessageFields.name] ?? "" let text = message[Constants.MessageFields.text] ?? "" cell.textLabel?.text = name + ": " + text cell.imageView?.image = UIImage(named: "ic_account_circle") if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL), let data = try? Data(contentsOf: URL) { cell.imageView?.image = UIImage(data: data) } return cell } </code></pre></devsite-code> <h3 is-upgraded id="test-message-sync" data-text="Test Message Sync" tabindex="-1">Test Message Sync</h3> <ol type="1"> <li>Click the <img alt="98205811bbed9d74.png" style="width: 39.00px" src="/static/codelabs/firebase-ios-swift/img/98205811bbed9d74.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">Run button.</li> <li>Click the Sign in to get started button to go to the messages window.</li> <li>Add new messages directly in Firebase console by clicking on the green + symbol next to the "messages" entry and adding an object like the following: <img alt="f9876ffc8b316b14.png" style="width: 624.00px" src="/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/f9876ffc8b316b14_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></li> <li>Confirm that they show up in the Friendly-Chat UI.</li> </ol> </google-codelab-step> <google-codelab-step label="Send Messages" duration="0" step="6"> <h2 class="step-title" id="6" data-text="Send Messages" tabindex="-1"> 7. Send Messages </h2> <h3 is-upgraded id="implement-send-message" data-text="Implement Send Message" tabindex="-1">Implement Send Message</h3> Push values to the database. When you use the push method to add data to Firebase Realtime Database, an automatic ID will be added. These auto generated IDs are sequential, which ensures that new messages will be added in the correct order. Modify your FCViewController's "sendMessage:" method; replace with the code defined below: <h3 is-upgraded id="fcviewcontroller.swift_2" data-text="FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/FCViewController.swift#L192-L193" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func sendMessage(withData data: [String: String]) { var mdata = data mdata[Constants.MessageFields.name] = Auth.auth().currentUser?.displayName if let photoURL = Auth.auth().currentUser?.photoURL { mdata[Constants.MessageFields.photoURL] = photoURL.absoluteString } // Push data to Firebase Database self.ref.child("messages").childByAutoId().setValue(mdata) } </code></pre></devsite-code> <h3 is-upgraded id="test-sending-messages" data-text="Test Sending Messages" tabindex="-1">Test Sending Messages</h3> <ol type="1"> <li>Click the <img alt="98205811bbed9d74.png" style="width: 39.00px" src="/static/codelabs/firebase-ios-swift/img/98205811bbed9d74.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">Run button.</li> <li>Click Sign In to go to the messages window.</li> <li>Type out a message and hit send. The new message should be visible in the app UI and in the Firebase console.</li> </ol> </google-codelab-step> <google-codelab-step label="Store and Receive images" duration="5" step="7"> <h2 class="step-title" id="7" data-text="Store and Receive images" tabindex="-1"> 8. Store and Receive images </h2> <h3 is-upgraded id="confirm-firebase-storage-dependency" data-text="Confirm Firebase Storage Dependency" tabindex="-1">Confirm Firebase Storage Dependency</h3> In the dependencies block of the <code translate="no" dir="ltr">Podfile</code>, confirm <code translate="no" dir="ltr">Firebase/Storage</code> is included. <h3 is-upgraded id="podfile_2" data-text="Podfile" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/Podfile#L6" target="_blank">Podfile</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr">pod 'Firebase/Storage' </code></pre></devsite-code> <h3 is-upgraded id="set-up-cloud-storage-for-firebase" data-text="Set up Cloud Storage for Firebase" tabindex="-1">Set up Cloud Storage for Firebase</h3> Here's how to set up Cloud Storage for Firebase in your Firebase project: <ol type="1"> <li>In the left-panel of the Firebase console, expand Build and then select <a href="https://console.firebase.google.com/project/_/storage" target="_blank">Storage</a>.</li> <li>Click Get started.</li> <li>Select a location for your default Storage bucket. Buckets in <code translate="no" dir="ltr">US-WEST1</code>, <code translate="no" dir="ltr">US-CENTRAL1</code>, and <code translate="no" dir="ltr">US-EAST1</code> can take advantage of the <a href="https://cloud.google.com/storage/pricing#cloud-storage-always-free" target="_blank">"Always Free" tier</a> for Google Cloud Storage. Buckets in all other locations follow <a href="https://cloud.google.com/storage/pricing" target="_blank">Google Cloud Storage pricing and usage</a>.</li> <li>Click Start in test mode. Read the disclaimer about the security rules. Later in this codelab, you'll add security rules to secure your data. Do not distribute or expose an app publicly without adding Security Rules for your Storage bucket.</li> <li>Click Create.</li> </ol> <h3 is-upgraded id="configure-firebasestorage" data-text="Configure FirebaseStorage" tabindex="-1">Configure FirebaseStorage</h3> <h3 is-upgraded id="fcviewcontroller.swift_3" data-text="FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/Podfile#L6" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func configureStorage() { storageRef = Storage.storage().reference() } </code></pre></devsite-code> <h3 is-upgraded id="receive-images-in-existing-messages" data-text="Receive images in existing messages" tabindex="-1">Receive images in existing messages</h3> Add code that downloads images from Firebase Storage. Modify your FCViewController's "tableView: cellForRowAt indexPath:" method; replace with the code defined below: <h3 is-upgraded id="fcviewcontroller.swift_4" data-text="FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/FCViewController.swift#L155-L167" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // Dequeue cell let cell = self.clientTable .dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath) // Unpack message from Firebase DataSnapshot let messageSnapshot: DataSnapshot! = self.messages[indexPath.row] guard let message = messageSnapshot.value as? [String:String] else { return cell } let name = message[Constants.MessageFields.name] ?? "" if let imageURL = message[Constants.MessageFields.imageURL] { if imageURL.hasPrefix("gs://") { Storage.storage().reference(forURL: imageURL).getData(maxSize: INT64_MAX) {(data, error) in if let error = error { print("Error downloading: \(error)") return } DispatchQueue.main.async { cell.imageView?.image = UIImage.init(data: data!) cell.setNeedsLayout() } } } else if let URL = URL(string: imageURL), let data = try? Data(contentsOf: URL) { cell.imageView?.image = UIImage.init(data: data) } cell.textLabel?.text = "sent by: \(name)" } else { let text = message[Constants.MessageFields.text] ?? "" cell.textLabel?.text = name + ": " + text cell.imageView?.image = UIImage(named: "ic_account_circle") if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL), let data = try? Data(contentsOf: URL) { cell.imageView?.image = UIImage(data: data) } } return cell } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Send Image Messages" duration="0" step="8"> <h2 class="step-title" id="8" data-text="Send Image Messages" tabindex="-1"> 9. Send Image Messages </h2> <h3 is-upgraded id="implement-store-and-send-images" data-text="Implement Store and Send Images" tabindex="-1">Implement Store and Send Images</h3> Upload an image from the user, then sync this image's storage URL to database so this image is sent inside the message. Modify your FCViewController's "imagePickerController: didFinishPickingMediaWithInfo:" method; replace with the code defined below: <h3 is-upgraded id="fcviewcontroller.swift_5" data-text="FCViewController.swift" tabindex="-1"><a href="https://github.com/firebase/friendlychat/blob/master/ios/swift/FriendlyChatSwift/FCViewController.swift#L221-L244" target="_blank">FCViewController.swift</a></h3> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Swift"><code translate="no" dir="ltr"> func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) { picker.dismiss(animated: true, completion:nil) guard let uid = Auth.auth().currentUser?.uid else { return } // if it's a photo from the library, not an image from the camera if #available(iOS 8.0, *), let referenceURL = info[UIImagePickerControllerReferenceURL] as? URL { let assets = PHAsset.fetchAssets(withALAssetURLs: [referenceURL], options: nil) let asset = assets.firstObject asset?.requestContentEditingInput(with: nil, completionHandler: { [weak self] (contentEditingInput, info) in let imageFile = contentEditingInput?.fullSizeImageURL let filePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000))/\((referenceURL as AnyObject).lastPathComponent!)" guard let strongSelf = self else { return } strongSelf.storageRef.child(filePath) .putFile(from: imageFile!, metadata: nil) { (metadata, error) in if let error = error { let nsError = error as NSError print("Error uploading: \(nsError.localizedDescription)") return } strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description]) } }) } else { guard let image = info[UIImagePickerControllerOriginalImage] as? UIImage else { return } let imageData = UIImageJPEGRepresentation(image, 0.8) let imagePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000)).jpg" let metadata = StorageMetadata() metadata.contentType = "image/jpeg" self.storageRef.child(imagePath) .putData(imageData!, metadata: metadata) { [weak self] (metadata, error) in if let error = error { print("Error uploading: \(error)") return } guard let strongSelf = self else { return } strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description]) } } } </code></pre></devsite-code> <h3 is-upgraded id="test-sending-and-receiving-image-messages" data-text="Test Sending and Receiving Image Messages" tabindex="-1">Test Sending and Receiving Image Messages</h3> <ol type="1"> <li>Click the <img alt="98205811bbed9d74.png" style="width: 39.00px" src="/static/codelabs/firebase-ios-swift/img/98205811bbed9d74.png" srcset="https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_36.png 36w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_48.png 48w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_72.png 72w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_96.png 96w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_480.png 480w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_720.png 720w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_856.png 856w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_960.png 960w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1440.png 1440w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_1920.png 1920w,https://firebase.google.com/static/codelabs/firebase-ios-swift/img/98205811bbed9d74_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">Run button.</li> <li>Click Sign In to go to the messages window.</li> <li>Click "add a photo" icon to pick a photo. The new message with the photo should be visible in the app UI and in the Firebase console.</li> </ol> </google-codelab-step> <google-codelab-step label="Congratulations!" duration="0" step="9"> <h2 class="step-title" id="9" data-text="Congratulations!" tabindex="-1"> 10. Congratulations! </h2> You have used Firebase to easily build a real-time chat application. <h3 class="checklist" is-upgraded id="what-weve-covered" data-text="What we've covered" tabindex="-1">What we've covered</h3> <ul class="checklist"> <li>Realtime Database</li> <li>Federated Sign In</li> <li>Storage</li> </ul> <h3 is-upgraded id="learn-more" data-text="Learn More" tabindex="-1">Learn More</h3> <ul> <li><a href="https://firebase.google.com" target="_blank">Firebase.google.com</a></li> </ul> </google-codelab-step> </google-codelab> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> 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. </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <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"]],[],[],[]] </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": "codelab", "projectName": null, "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="V5D8j0eY4BLua/QJD3RdtUtbg9rUqK"> (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",1,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,["TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_project_variables","Profiles__enable_completecodelab_endpoint","Significatio__enable_by_tenant","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_dark_theme","Profiles__enable_public_developer_profiles","MiscFeatureFlags__emergency_css","Profiles__enable_complete_playlist_endpoint","Search__enable_dynamic_content_confidential_banner","TpcFeatures__enable_required_headers","Cloud__enable_cloudx_ping","Experiments__reqs_query_experiments","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_profile_collections","BookNav__enable_tenant_cache_key","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_llm_concierge_chat","Profiles__enable_awarding_url","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_view_transitions","Analytics__enable_clearcut_logging","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_free_trial_server_call","Search__enable_suggestions_from_borg","DevPro__enable_developer_subscriptions","CloudShell__cloud_code_overflow_menu","Search__enable_ai_eligibility_checks","Search__enable_ai_search_summaries","Profiles__enable_release_notes_notifications","Search__enable_page_map","Concierge__enable_concierge","Cloud__enable_cloudx_experiment_ids","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_variable_operator","Profiles__enable_recognition_badges","Cloud__enable_cloud_shell","Concierge__enable_pushui","Cloud__enable_cloud_dlp_service","Profiles__enable_page_saving","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_shell_fte_user_flow","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_facet_chat","CloudShell__cloud_shell_button"],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],[17,1],[46,8],[36,4],[16,2]],null,1],null,4],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>