Mastering Authentication in React Native (Expo Router) with Node.js and MongoDB!

Welcome to our latest tutorial on mastering authentication in React Native! In this video, we’ll guide you through the process of building a secure authentication system using React Native, Node.js, MongoDB, React Query, Expo, and Expo Router.

🔑 *What You'll Learn:*
Setting up a React Native project using Expo
Integrating React Native with Expo for seamless development
Using React Query to manage authentication state
Implementing secure user authentication flows with Expo Router
Best practices for handling user sessions and securing your mobile app

🔧 Technologies Used
React Native: For building the mobile application
Node.js: Backend server for handling authentication
MongoDB: Database for storing user information
React Query: Efficiently managing server state in React Native
Expo: Enhancing the development process with Expo’s powerful tools
Expo Router: Managing navigation in your React Native app

📚 Resources
Documentation:
Final Source code: https://github.com/tweneboah/youtube-...
React Native: https://reactnative.dev/docs/getting-...
Node.js: https://nodejs.org/en/docs/
MongoDB: https://docs.mongodb.com/
React Query: https://react-query.tanstack.com/
Expo: https://docs.expo.dev/
Expo Router: [Expo Router Documentation Link]

🔔 Subscribe for more tutorials on React Native, Node.js, and full-stack development! Don’t forget to hit the bell icon to get notified when we upload new videos.

👍 Like, Comment, and Share if you found this tutorial helpful. Let us know in the comments what you’d like to see next!

Happy coding! 🚀

00:00:00 Introduction
00:00:25 Project Demo
00:00:58 Bottom Tab Navigation and Profile Protection
00:02:19 Routing and Stack Navigation Setup
00:05:17 Creating the Project with Expo
00:06:12 Setting Up the Environment
00:07:35 Expo Router Overview
00:09:15 Manual Installation of Expo Router
00:10:44 Configuring Expo Router
00:11:38 Using File-Based Routing
00:12:05 Creating Components and Screens
00:13:02 Navigation Links Setup
00:15:04 Adding More Screens
00:17:00 Implementing Stack Navigation
00:18:19 Customizing Navigation
00:19:50 Styling the Home Screen
00:20:49 Adding Video Background
00:22:11 Installing and Using Expo AV
00:24:26 Overlay Text and Buttons
00:26:41 Setting Up Login and Register Links
00:28:28 Implementing Login and Register Screens
00:29:42 Using Formik and Yup for Form Handling
00:32:41 Adding Validation to Forms
00:34:44 Creating a Login Button
00:35:42 Implementing Register Button
00:37:49 Handling Form Submissions
00:39:24 Bottom Tab Navigation Configuration
00:40:21 Redirecting After Login
00:41:47 Customizing Tab Icons
00:44:05 Adding Profile and Settings Tabs
00:46:33 Adding Static Content to Settings
00:47:03 Enhancing Home Screen
00:47:29 Integrating Backend API
00:48:48 Exposing Backend with Local Tunnel
00:50:11 Testing API Endpoints
00:51:38 Installing and Configuring React Query
00:54:52 Making API Requests with React Query
01:01:16 Handling Loading and Error States
01:04:23 Redirecting After Successful Login
01:05:20 Implementing Registration Logic
01:08:06 Setting Up Redux for Global State Management
01:09:29 Creating Redux Slice for Authentication
01:12:32 Configuring Redux Store
01:16:18 Dispatching Actions After Login
01:19:08 Wrapping App with Redux Provider
01:21:35 Extracting User from Redux Store
01:23:32 Displaying Profile Information
01:26:17 Handling Logout
01:27:19 Protecting Routes and Screens
01:32:30 Final Project Overview and Wrap-Up