Expo Router Authentication Flow Using Expo Router v2 and Expo SDK 49

Expo Router Authentication Flow Using v2 and SDK 49
#expo #reactnative #authentication #appwrite

NEW UPDATE SDK 52 - Simple React Native Firebase Authentication With Expo Router!

In this video, I walk you through the code for an authentication flow using Expo Router and Appwrite. I explain how to set up the environment variables, install the router, and incorporate Appwrite as the authentication provider. I also demonstrate how to create login and signup pages, manage authentication state, and handle navigation. The video provides a step-by-step guide with code examples and explanations. Check it out to learn how to build a secure authentication flow for your Expo app!

Topic Covered
------------------------
- Walkthrough code showing expo router v2 with authentication flow added
- Included new environment variables feature
- Included new way to handle Splashscreen
- Added AuthContext from the documentation
- Using Appwrite for my authentication service

Expo Router brings the best routing concepts from the web to native iOS and Android apps. Every file in the app directory automatically becomes a route in your mobile navigation, making building, maintaining, and scaling your project more effortless.

💥 Chapters
--------------------------
00:00 - Intro
02:08 - Create Expo App with Expo Router Included
02:55 - Quick App Overview
03:53 - Using .env for Environment Variables included in SDK 49
04:52 - Update authContext to include typescript and Appwrite
05:54 - Auth Segment with new Screens for SignIn and SignUp
06:50 - Revisiting Updated AuthContext
12:10 - Resolving Issue By Checking For RootNavigation State and Auth Initialization
14:00 - Walk through Appwrite Specific Functions, login, logout, createAccount
16:00 - Hiding Interface until we determine if we havs a user or not + Splashscreen Changes
19:44 - Code Walkthrough and VS Code Debugging
24:57 - Wrap Up


💥 Links
--------------------------

💥 Videos
-------------------------

💥 Social Media
--------------------------

[AaronSaundersCI]

NEW UPDATE - Simple React Native Firebase Authentication With Expo Router!

[iaintcatchingnoell]

Thank you for explaining this in a really nice way!

[waterstoff]

Thank you! Very clear video. Managed to fix my issue with the initial navigation. Docs did indeed not state to await the navigation to ready before navigating. Works fine now :)

[LadyMariYo]

Very useful and saved me time. Thank you!

[AaronSaundersCI]

If you enjoyed the content you can help support the channel, consider hitting the THANK YOU button

[NunoCostapt]

Thanks for sharing! Also this expo version ships with last version of react native👌

[codewithmufaddal]

i follow your code, and structure but some how every time i open app the first screen is "/" route and then redirect to /signIn route, what am i doing wrong
i check in app/_layout
if (!authInitialized && !user) return null -- also give him a falsy and true value to check the result and its giving blank page if condition evaluates to true

[binews]

where should we put theauth routes icant see them right there

[brainxs]

Awesome Video!!! Thank you!

Do happen to know how to make a Tab Button that opens a Modal?

[griseld]

The homepage gets shown for a brief moment after the splashScreen and i can't seem to find a way to go to the login page directly. Any idea?

[kpopcat_official]

in every route, when we use the user data from the hook, it still could be undefined in typescript even its protected which is quite annoying, do you have a solution for it?

[zhaze]

its a bummer that this video is only a couple of months old, and the documentation which you followed for this video is completely different now. This stuff is supposed to be in release status, why are they changing things so significantly like this?

[name-orrx]

why there is no index.tsx file? in the app dir?

[wusswuzz]

Great video! I have being trying to use Suspense with expo-router/react navigation router but so far have not been able to make it work. Have you successfully done it?

[milla]

it was better if change the documentation to dark mood