React Native Firebase Authentication with Expo Router

[@freekeys]

Can you make a video of advance and best practices in expo react native please 🙏

[@emreaka3965]

Simon is my savior for mobile app development. Thanks Simon :D

[@galaxies_dev]

Always by your side!

[@mattvalgreen]

Struggled a while for trying to implement that! But enjoyed a lot, thank you Simon!

[@aliarefjs]

Great video. Please create a video on react native expo Testing, how to write tests ? What are the best practices when writing tests and more important which parts to test (no idea on what to test? APIs?). The native actions will always work for example a button press always works (should I write test on it ?). Please explain the Testing ❤🙏

[@nekokami_]

Very good tutorial! I had a lot of problems compiling the app on android, but after many errors I was finally able to follow your tutorial :D

[@galaxies_dev]

Happy I could help!

[@hiladahan3426]

You say it's possible then? I want to follow this video but don't want to waste time on something that doesn't work

[@nekokami_]

@@hiladahan3426 Yes! I had problems with my development environment (mainly Java JDK configuration), but after solving it, all that's left is to follow the video

[@zachzambuto7994]

@@nekokami_ I had to downgrade to JDK 17 to get android to build

[@dglalperen]

Man... THANKS. I always had such a struggle for some reason correctly navigating based on the proper auth state

[@galaxies_dev]

Happy to help!

[@mfaizhussain7]

(Contains Redirection Solution!) the authenticator listening won't work accordingly when we reload or reopen the app if there is a user the login screen flashes and then we move to home page now, After exploring multiple approaches, I've found the solution. In Simon's implementation, two useEffect hooks are being used-one to check the authentication state and another for redirection. The issue arises because the initialization is set to true in the auth check useEffect, causing the login screen to briefly appear. As a result, both useEffect hooks are being triggered, leading to the flashing of the login screen. The fix is to combine both useEffect hooks into one, which will handle everything at once and prevent this issue. This solution works 100% with the current Firebase version. If you encounter any problems, feel free to reach out!

[@itsjustnuts]

Is there options to take a look on your version? Because when I try to combine the useEffect's i get stuck on splash screen. Will really appriciate it)

[@julienduris8326]

Great video as always Simon! Always such a good amount of valuable content and great mustache in each video! Thanks a lot

[@CryptoTT2023]

thanks man, really helps me understand right router implementation !!

[@galaxies_dev]

Glad it helped!

[@haroonazizi]

8:50 the error is solved now so you don't need to go all of those steps. [6 October 2024]

[@deividaszubLT]

Could you do React Native Firebase expo how to add upload and stream images videos from cloud storage?

[@hiladahan3426]

I really liked your video it gave exactly what i needed aa a base and now I can add whatever i want. I wonder if you hace a video like this for using the database too?

[@galaxies_dev]

I've got a full course on Firebase here: galaxies.dev/course/react-native-firebase

[@candronikos]

Great video :) I'm still having trouble getting the JWT token (it currently comes back as a dict with 0 and null for values) so I can authenticate against backend API endpoint. Any advice on how to proceed? Still, I'm pleased to get this far!

[@SoohoonOh-q5e]

really needed this Thank you!

[@alex.29899]

Thanks , great video ! C Can you make a video of different users have their own different datas ( username , userimage, their posts ) like Facebook , please ?

[@luciferishness]

Welcome back, Back 👍🏼

[@galaxies_dev]

Hey, thanks!

[@0xAtaly]

Great video, can you make a video doing the same think without fire base? Use mongodb and nestjs / express (and please please please use Apple and Google SignIN I am trying to make this to work for a weeks)

[@TheSuperBoyProject]

That's out of the scope of react native. Look up passport js and passport jwt. Also mongodb is not a good solution, postgresql and other nosql like couchdb are better choices.

[@SPIONAT]

hey first of all ... I love your videos those are so helpful thank you so much. ... maybe i have an video / content idea for you too ... I am really interested in learning how I can implement an access to like to reminder app from apple or other companies and then use those data in my own. so for example create an analyze application of the checked todos which I checked as done in reminder app

[@pasza01]

Please do a build flavor (dev, prod) with firebase config

[@0darkace1]

Thx what I needed

[@ChrisTravelsPlaces]

Thanks for the video but react native sdk52 is a complete dumpster fire at the minute even the straight install doesnt work atm....

[@hiladahan3426]

How would you add email verification with code for this?

[@galaxies_dev]

Would require some more pages to verify the code and read it from the URL I guess, also might need universal links and stuff - so it's getting a lot more complicated!

[@Venom-hb6mb]

What vscode theme you use?

[@BitCribMedia]

It seems like they are now adding the REVERSED_CLIENT_ID

[@gibber1sh-c6w]

Is it a good practice to have the google-services files in the source code? Can we push them to a repo without issues?

[@pixelmochiid3985]

from what I've seen, it contains private information so it's best to put it in the .gitignore

[@g0keyn]

4:00 where did this come from? A very bad explanation.

[@darkemperor9006]

Please make a video for google sign in Expo Firebase

[@hiladahan3426]

i did everything like you but in 22:47 const inAuthGroup = segments[0] === '(auth)'; doesn't work This comparison appears to be unintentional because the types '"" | "_sitemap" | "auth"' and '"(auth)"' have no overlap.ts(2367)

[@imonutiy]

If you check sengments[0] === " " suggestions you will may see something like "(auth)home" which I had. From docs: Some Expo libraries provide both static types and type generation capabilities. These types are automatically generated when the project builds or by running the npx expo customize tsconfig.json command. So useSegment hook returned broken routes types. So you need to rebuild app or run command above. Also put your auth folder in () if not already.

[@darkemperor9006]

My project doesn't have the android folder. How do I bring it up there?

[@darkemperor9006]

the android folder is generated by running npx expo prebuild. If you run npx expo run:android, the android folder is generated automatically.

[@nikosdimou7291]

so how can we compile it to apk ?

[@VIJAY-fx4yh]

Sir this is classical login please video on continue with google

[@WeiJianTan-fe4lh]

hi does anybody encountered internal error with phone sign in?

[@loneewolf15]

Hi Simon, is there a way I can get across to you maybe via mail or something?

[@Rajesh-rg6fw]

What vscode extension you are using

[@pixelmochiid3985]

ikr his copilot is amazing 😂

[@mostafamaher8451]

It's called codeium I think this is the one he's using but even if it's not, it's still very helpful

[@hamxahusain]

Every time i do prebuild, i just get this error message, Simon Any idea what it say, I would love if i get comment here npm WARN using --force Recommended protections disabled. env: load .env.development env: export EXPO_PUBLIC_AES_SECRET_KEY EXPO_PUBLIC_ORIGIN EXPO_PUBLIC_API_URL EXPO_PUBLIC_GOOGLE_API_KEY ✔ Created native directories › Using current versions instead of recommended react-native@0.74.5. ✔ Updated package.json ✖ Prebuild failed Error: [android.dangerous]: withAndroidDangerousBaseMod: Could not find MIME for Buffer Error: [android.dangerous]: withAndroidDangerousBaseMod: Could not find MIME for Buffer at Jimp.parseBitmap (/Users/hamzahussain/Projects/codeman/node_modules/jimp-compact/dist/jimp.js:1:125518) at Jimp.parseBitmap (/Users/hamzahussain/Projects/codeman/node_modules/jimp-compact/dist/jimp.js:1:8514) at /Users/hamzahussain/Projects/codeman/node_modules/jimp-compact/dist/jimp.js:1:7613 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)

[@ayomideisrael-f7y]

how i solve my problem first i read it with my mind and i will look on how to solve it first thing to do here is to create another project with the latest sdk then make all the package you use up today then try the tutorial once again i hope you understand

[@largatonguyemmanuelcouliba9827]

Unfortunately, it doesn't work on Android

[@hiladahan3426]

😢

[@Manojkumar-fq2vu]

can you share your github repo for reference

[@galaxies_dev]

The tutorial is linked in the description!

[@yonathegod]

Really complicated process...

[@MrRayoux]

Hello any one is good in react native i need some help

[@sinanovictchaikovsky6387]

Error resolving plugin [id: 'com.facebook.react.settings'] > org.gradle.api.internal.catalog.GeneratedClassCompilationException: No Java compiler found, please ensure you are running Gradle with a JDK I have get en error like this someone can help me ?

[@Md.RahimBadsa]

same problem fatching also

[@nekokami_]

I think you need to download Java JDK (not JRE) and then update the environment variables

[@sinanovictchaikovsky6387]

@@nekokami_ Thank you for answering. I am gonna try. If it works i will comment here.

[@rachelblack6407]

Very cool tutorial, Im getting issues though when I'm trying - ./gradlew signingReport In the android directory and been trying to debug for a while. the error is below * What went wrong: Error resolving plugin [id: 'org.gradle.toolchains.foojay-resolver-convention', version: '0.5.0']

[@pixelmochiid3985]

Hi there, I'm getting an issue where the command ./gradlew signingReport isn't working, and returns this error: A problem occurred configuring project ':expo'. > Could not get unknown property 'release' for SoftwareComponent container of type org.gradle.api.internal.component.DefaultSoftwareComponentContainer. does anybody know a fix for this? Any help would be greatly appreciated thank you in advance!

[@mfaizhussain7]

before calling ./gradlew signingReport make sure you are under directory android like c/user/..../project/android then call it if above doesn't work then there is an issue with android environement setup

[@pixelmochiid3985]

I reckon the later might be true.. I'm definitely in the android folder when I type the command, and every method I've tried to fix it seems to point to some incompatible dependency or smt, no clue what's going on. I've also deleted and remade it a few times and the error still persists!

[@Sultan-vm3qg]

@@pixelmochiid3985 You need to install Java Jdk and after that clean your gradlew and build it(it will take a while) and only after that you can write gradlew signing report

[@rachelblack6407]

Did you fix this? Ive been getting this error at the same point Error resolving plugin [id: 'org.gradle.toolchains.foojay-resolver-convention', version: '0.5.0'] Somewhere online I saw to switch to gradle 8.3 and then I got the same error as you (im using 8.8)

[@Md.RahimBadsa]

Error resolving plugin [id: 'com.facebook.react.settings'] > org.gradle.api.internal.catalog.GeneratedClassCompilationException: No Java compiler found, please ensure you are running Gradle with a JDK I have get en error like this someone can help me ?