[2024] Firebase React Native EXPO Authentication Setup (File Based Routing)

Welcome to our comprehensive guide on setting up Firebase authentication in a React Native Expo project with file-based routing! In this video, we'll walk you through the entire process, from initial setup to implementing user authentication and routing with Firebase.
Github Repo: github.com/and...
Setup Expo Environment: docs.expo.dev/...
Firebase: firebase.googl...
🔍 In this video, you'll learn:
How to create a new React Native project with Expo.
Setting up Firebase and integrating it with your React Native app.
Implementing file-based routing for seamless navigation.
Building authentication flows (sign-up, login, logout).
Whether you're a beginner or an experienced developer, this tutorial is designed to help you get up and running with Firebase authentication in no time. Don't forget to like, share, and subscribe for more developer content!

[@tranduy4070]

just used this guide. Everything was explained clearly, and the process is somuch eaiser. Thanks Andrew!

[@andrewheimdev]

No problem @tranduy4070 I'm happy it helped

[@crim-son]

Very helpful video,
But what's the best way to navigate user to either the app or auth or onboarding screens depending on whether they're logged in or not

[@wagnerdevcode]

Thanks! Good Job.

[@andrewheimdev]

Thanks! Appreciate it!

[@student2k185]

So good tutorial thabk you! please do video for firestore database in react native expo

[@andrewheimdev]

Yeah no problem! Thanks for watching

[@student2k185]

is there any particular code I can comment out to temporarily disable the sign up, login screen and animation?

[@andrewheimdev]

yes I would just pout a ! operator in front of the user object when we either route to the initial layout or the (tabs) layout.
It's in the app/_layout.tsx. Instead of { user ? you will do { !user ?

[@student2k185]

@@andrewheimdev sorry I could not find any code in the files that specifically says "{ user ?" should I search something else instead, or are there some steps I'm missing? Thanks Andrew

[@andrewheimdev]

​@@student2k185 Sorry looking at the code now, and was thinking of a different firebase setup.
In this screen:
github.com/andepants/app-ship/blob/main/app/_layout.tsx
I would comment out the Stack.Screens (index and login) so that only the tabs screen is available.
Then just in case I would go here:
github.com/andepants/app-ship/blob/main/app/(tabs)/_layout.tsx
and comment out the onAuthStateChanged, so that we don't reroute back to the root directory.
Let me know if you have any other questions.

[@student2k185]

@@andrewheimdev unfortunately seems to still take me to the index animation screen with the login and sign up buttons instead of taking me directly to the tabs.

[@andrewheimdev]

@@student2k185 Sorry about that. Okay this should really work. I tested it out:
go to app/index.tsx and add this line on line 7:
return ;
and it just redirects to the tabs page. Also got to make sure the onAuthStateChange is commented out too!