--- title: Firebase Crash Course (Auth & Firestore) #4 - Realtime... description: A tutorial on setting up a real-time Firebase authentication subscription using the `onAuthStateChanged` observer. It covers creating a React Context and... canonical: https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Firebase Crash Course (Auth & Firestore) #4 - Realtime Auth Subscription | daily.dev og:description: A tutorial on setting up a real-time Firebase authentication subscription using the `onAuthStateChanged` observer. It covers creating a React Context and... og:url: https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc og:image: https://api.daily.dev/og/posts/2lumsZ4xc.png og:image:alt: Firebase Crash Course (Auth & Firestore) #4 - Realtime Auth Subscription og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Firebase Crash Course (Auth & Firestore) #4 - Realtime Auth Subscription **[Net Ninja](https://daily.dev/sources/netninja)** · 10 min read · 1 upvotes · 0 comments ## Summary A tutorial on setting up a real-time Firebase authentication subscription using the `onAuthStateChanged` observer. It covers creating a React Context and Provider to store global auth state (user object or null, plus a loading flag), wiring up the observer inside a `useEffect` hook, and wrapping the app with the provider so any component can access the current user via a custom `useAuth` hook. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I use onAuthStateChanged in Firebase to keep React global auth state in sync? Call onAuthStateChanged with the Firebase auth instance and a callback that receives a Firebase user object or null, then store that value in React context state via setUser. Set up the subscription inside a useEffect with an empty dependency array so it fires once on mount, and only toggle a loading flag to false the first time the callback runs by checking an if(loading) condition, since the callback also fires immediately on initial load once Firebase determines the current auth status. _daily.dev surfaces practical Firebase and React auth patterns for developers wiring up global session state._ ### Why does my Firebase auth listener callback fire immediately on page load even before I sign in? Firebase fires the onAuthStateChanged callback once immediately when the observer is first set up, in addition to firing on every subsequent sign-in or sign-out, because it takes a moment to determine whether a user is already authenticated. This is why a loading state defaulting to true is useful, so the app can show a loading message until that initial callback resolves the user's real status. _Developers debugging unexpected auth callback timing often check patterns like this via daily.dev._ ## Similar posts on daily.dev - [How Firestore Structures Data and How to Perform CRUD Operations With It](https://daily.dev/posts/how-firestore-structures-data-and-how-to-perform-crud-operations-with-it-odioykply) · freeCodeCamp · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#authentication](https://daily.dev/tags/authentication), [#firebase](https://daily.dev/tags/firebase) [View this post on daily.dev](https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Firebase Crash Course (Auth & Firestore) #4 - Realtime Auth Subscription","url":"https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc"},"datePublished":"2026-07-23T13:04:52.849Z","dateModified":"2026-09-13T18:28:36.646Z","description":"A tutorial on setting up a real-time Firebase authentication subscription using the `onAuthStateChanged` observer. It covers creating a React Context and...","image":"https://i.ytimg.com/vi/H_a_Ds2pmFA/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/H_a_Ds2pmFA/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Net Ninja","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Net Ninja","logo":"https://media.daily.dev/image/upload/s--IXsAE5jo--/f_auto/v1718348103/logos/netninja","url":"https://daily.dev/sources/netninja"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,typescript,authentication,firebase","timeRequired":"PT10M","video":{"@type":"VideoObject","name":"Firebase Crash Course (Auth & Firestore) #4 - Realtime Auth Subscription","description":"A tutorial on setting up a real-time Firebase authentication subscription using the `onAuthStateChanged` observer. It covers creating a React Context and...","thumbnailUrl":"https://i.ytimg.com/vi/H_a_Ds2pmFA/sddefault.jpg","uploadDate":"2026-07-23T13:04:52.849Z","duration":"PT10M","url":"https://api.daily.dev/r/2lumsZ4xc","embedUrl":"https://www.youtube.com/embed/H_a_Ds2pmFA"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Net Ninja","item":"https://daily.dev/sources/netninja"},{"@type":"ListItem","position":3,"name":"Firebase Crash Course (Auth & Firestore) #4 - Realtime Auth Subscription"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-4---realtime-auth-subscription-2lumsz4xc#faq","mainEntity":[{"@type":"Question","name":"How do I use onAuthStateChanged in Firebase to keep React global auth state in sync?","acceptedAnswer":{"@type":"Answer","text":"Call onAuthStateChanged with the Firebase auth instance and a callback that receives a Firebase user object or null, then store that value in React context state via setUser. Set up the subscription inside a useEffect with an empty dependency array so it fires once on mount, and only toggle a loading flag to false the first time the callback runs by checking an if(loading) condition, since the callback also fires immediately on initial load once Firebase determines the current auth status. daily.dev surfaces practical Firebase and React auth patterns for developers wiring up global session state."}},{"@type":"Question","name":"Why does my Firebase auth listener callback fire immediately on page load even before I sign in?","acceptedAnswer":{"@type":"Answer","text":"Firebase fires the onAuthStateChanged callback once immediately when the observer is first set up, in addition to firing on every subsequent sign-in or sign-out, because it takes a moment to determine whether a user is already authenticated. This is why a loading state defaulting to true is useful, so the app can show a loading message until that initial callback resolves the user's real status. Developers debugging unexpected auth callback timing often check patterns like this via daily.dev."}}]} ```