Add Auth to your React Project EASILY Tutorial

🚀 Upgrade your web development skills with my courses: developedbyed.com/
💻 Download the project files here
github.com/developedbyed/reac...
In today's episode we will learn how to add auth to our react application. We will be adding google sign in and Facebook sign in using react and firebase. We will be skipping email authentification as I don't think it's as important as social logins. If you ever wanted to add authentification to your react projects this is a really easy way of doing it.
💡 If you want to learn more about React, check out my channel for more React tutorials and you can find React courses on my website. developedbyed.com
🛴 Follow me on:
Twitter: / developedbyed
Github: github.com/developedbyed/
Instagram: / developedbyed
#react #programming

[@developedbyed]

Channel is back with full force 🎉 Thanks everyone for the amazing support, loads of content is coming your way!

[@bogdanciolpan6304]

Hi, I'm watching you from a while and also I've bought some courses from you, will you be interested in making all of this stuff using Typescript? I mean you really have some qualities when it's come to explain things, I guess using TypeScript and React will be a good approach and also appreciated by the community, keep up the good work!

[@aleksandrzakharov8758]

I missed you)

[@suciu4644]

we love you ed

[@Alex-bc3xe]

I was watching you since you had almost no subscribers and I am really happy that you got so far you are a good man. Good luck further.

[@coolcumber7]

Love your small tutorials on fundamental yet crucial web development concepts ... with your top notch explanations as all ways .. keep the ball rolling 😄❤

[@paschalynukwuani6930]

Dev Ed is a legend😎. You always make my coding journey easier with your simple and great explanations. Cheers to you man!😎

[@HamzahAhmad-db5cy]

Hey Ed, thanks a bunch for the detailed explanation. Really helped out a bunch.

[@MasumKhan-ug8nr]

Thanks a lot man. following ur channel from a long time & it was always usefull

[@NNNedlog]

Just noticed you changed your channel name. Awesome video as always sir. I'm currently learning React so this will be very helpful

[@skverskk]

Great tutorial and easy to follow. Would you consider a Firebase Email/Login provider tutorial, some time in the near future? Thank you

[@siddharthsingh7281]

You seem nice person . Great explanation. Don't lose your humbleness.

[@muvsharma]

thank you so much, you solved my week-long problem in an hour

[@gillgarcia768]

Now I understand how to make loops and export everytNice tutorialng really god bless you.. your way of explaining simply aweso I loved it

[@sleeplessforawhile]

Thx for your work. My best wishes.

[@ktk5987]

Thanks alot for this tutorial! it was awesome, and you are awesome!

[@lovetheentertainment9949]

Can you please make a complete Bootcamp on webpack 5 Please cover all the concepts and tell each and every part how we use in real time projects

[@bytewisesl]

this is a great tutorial. Thanks

[@arpitpandeyofc]

More react videos please!!! 💛💛

[@maskman4821]

Great lesson 😍

[@benlam3832]

I thought auth would be a super complicated thing to do, but it looks a lot simpler now after this video.

[@leulwebshet9750]

I started my KZbin channel yesterday , you really inspired me

[@musicvista5345]

Your name looks like Ethiopian...here to support you brother, you rock on

[@leulwebshet9750]

@@musicvista5345 yes I am from Ethiopia

[@Kr0ckDinde]

Super nice tutorial bro, helped me a lot thank you ! In Meta for developper website I think they want me to setup a SDK java script. You didnt refered to this in your video. I don't know what is this about...

[@eliyahutarab4862]

Thank you very much can you do a crush course of react with typescript?

[@santiagonahuel8845]

Great job!

[@captainfoodman]

Ed, can you make a video about using java in our web applications. Using servlets and JSPs, all that sorts of stuff. That would be amazing!! Thank you

[@rdvansengul3667]

yo bro, really thankya. Big respect

[@bobziomeczek2604]

Thanks, I really enjoyed this project. If someone has issues with auth import, I recommend to use auth() instead of auth, in my case it worked every time I had an issue with the 'auth' import. Have a nice day :)

[@wesonweb]

Fab tutorial as always 💯

[@abdikanimohamed436]

My teacher I so exited with you really and also your tutorials make tutorials about react mongo db and react security url

[@maestro3112]

thank you and good luck

[@iamakifislam]

Dev Ed to developerbyEd. Good name, Sir. I have been following you for a very long time. So Dev Ed was familiar to me. But the new name is more explaining and good for new comers.

[@frankiefab]

Thanks Ed, Can you make a tutorial on converting json data to custom GRAPHQL API

[@JohnRod]

Please make a vid about authentication with database 🥺

[@faizshariff9968]

Hey ed please do a video on next js

[@EricOnYouTube]

developedbyed, how would I then use that same login to save data in the api app?

[@phattriennanglucsinhvien-a4123]

Thank you very much

[@ghalitsar2730]

can u do with nextjs and with next/auth ?

[@jahongirkhabibullayev591]

Thanks bro

[@dannyisrael]

Is it safe to use NEXT_PUBLIC with the keys? Shouldn't they be loaded serverside or something?

[@buituyen9484]

Hey, I really like your VSCode theme. Did you customized it by yourself or you got it from extension store?

[@zachmsdev747]

You should try out this theme called Bearded. :-)

[@buituyen9484]

@@zachmsdev747 thanks. I will try it out 😀

[@priyanshushukla6827]

in my vs code after writing the first command it is saying does u will use Type script? what to do yes or no?

[@blue_berry_pie64]

Thank youuuuu

[@MilahnMartin]

Anyone know why im getting a "Window is not defined error in Nextjs" only happens when i import the firebaseconfig.js file

[@damislav]

10/10 sneeze bless you

[@damislav]

good jumpscare made me think faster

[@CoconutwCoco]

how to deploy it later? could we have a following up tutorial

[@josef1523]

I am wondering how I can get all the users in my "firebase authentication" using NextJS.

[@naolkebede321]

A shopping website with a seller and buyer different sign-in ways. with A count button shopping method and a controllers (police) sign-in way to see every history of transaction

[@rifhix7404]

Yeah please can you make some toturials on react redux and firebase

[@Charlotte-jm3ce]

I would love to learn how to make multilingual sites!

[@Human_Evolution-]

Everything seems to work fine, then when I go to deploy to either Vercel or Netlify, I get errors and failure to deploy. 1 hour of trying and I am not sure what to do. Anyone have any insite? My errors vary from useEffect dependencies, to Firebase api key being invalid. Errors are fdifferent on Netlify than they are on Vercel....

[@hmrizwanmazumder]

Can you make some android tutorials? Either Java or kotlin, flutter or even reactNative.

[@ferroisss]

Hello, once the user is logged in with google/facebook, how can you allow the user to interact with your NodeJS server as an authenticated client?

[@MiserableDuck95]

Would love to see this too

[@Chriss-cn1ch]

Just send the necessary info to nodejs and store them to db. If the user logs in again you can check if he exists in the db. Same concept as the ordinary email authentication.

[@ferroisss]

@@Chriss-cn1ch Which will be used as the secure token?

[@sahilverma_dev]

how to implement google auth in a MERN stack?

[@abdikanimohamed436]

Teacher make firebase crud tutorials and firebase rules and sucurity and database

[@sudipgurung9546]

4:49 "HEAD? Yes please"

[@buffplayz8089]

I was looking for a normal crack for a long time and stumbled upon you, thank you very much

[@suciu4644]

ed, why not next auth?

[@jaywilzon1412]

Dude your personality is totally not my cup of tea and yet I find you funny as heck and a pretty darn good teacher. Thanks for reminding me why I should give everyone a chance.

[@Melhor99]

where is your item

[@KhalilCh]

Blocs for mac users please

[@netroncraft]

Great video but for this time you need a little night’s sleep for these little mistakes 😭

[@tirotta_sw]

it was the 4:48 for me lmfao😂

[@insanetvshort7076]

dudes high asf 🤣

[@user-um2mn9jw3e]

Head?? yes please XD

[@fraagzthenoob8935]

Like bro

[@osoningliztili6708]

cool

[@yoman9446]

Funny enough, I wouldn't trust any website that has a sign in with Facebook button

[@ekweisking2023]

I wish you did this with regular react.

[@jeevanjose3347]

🥳🥳🥳🥳🥳🥳

[@adityaanand9233]

AUTHENTIFICATION

[@ahamedbashan4638]

I didn't get styles and pages folder while installing react

[@ekweisking2023]

I love the way you don't care if you don't pronounce authentication Right 😂.

[@kasiliwachiye1472]

*AUTHENTICATION :)

[@developedbyed]

Fixed

[@TintZawhtun-uv8qq]

sir I get a message . Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. I'm not solve this problem.Please help me .

[@EricOnYouTube]

No, saying 'bless you' is just silly. I said Gesundheit.

[@tabmax22]

please add chapters next time

[@AdamBakerMTB]

Does the firebase config even need to be in the env file?

[@easyengineering9134]

No, it does not.

[@emmanuelnkiriyumwami1225]

Nextjs 13 user: You should add"legacyBehavior' to your tag if you want to put an tag inside: like this JoinNow

[@markokafor7432]

user?.displayName

[@markokafor7432]

@⁺ ①⑨⑦⑧③⓪①⓪⓪④① WhatsApp ? is called the optional chaining operator. Checks if there is a user else it returns undefined rather than throwing an error

[@pavi013]

I havent used facebook in years, i guess i need to go back