Facebook Login Button In React
Вставка
- Опубліковано 20 жов 2024
- In this video we will create a Facebook login button in React to get the users name, email and picture. We will then add it to the component state and render the data. This is an introductory based tutorial.
Code: Github Gist
gist.github.co...
React Facebook Login Repo:
github.com/kep...
Sponsor:
Anthrodesk - anthrodesk.com
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia - Наука та технологія
When you create an app it is in "development mode" by default but you should be able to access it if you registered it as the user that you are using it with. This is normal behavior which I forgot to mention. When you are ready for it to be used by others, go to your Facebook dev dashboard->Status and Review and you can put it into production.
yes if we have production domain URL we can make status to production. Thank you, Brad.
Traversy Media thanks Brad❤
I really love Brad and his inspiring codes and tutorials. He has always save me in debuging my code. Thank you and you will continue to be a living legend.
Brad, in a mobile device works the same ? thanks you !
Now that my personal life has cleared up a bit, I am working on some long form content for UA-cam. Some full projects and series, some new stuff (languages, etc). I will be uploading smaller tutorials like this as well in the meantime.
How are you now bro?
good to hear that sir! we wish all good things and positivity for your life and family. keep producing great content!
Traversy Media please I want you to advice me on this problem am having. Am 25years of age, am in college now 100 level, in Nigeria. And what am studying is not compatible with web developing. I have learnt HTML, CSS and JavaScript before I was admitted to college. So am thinking of dropping out to continue learning what I am passionate about. Because I thinking am wasting my time in college. Please I need your advice.
@Keypounch I'm Nigerian too, and I understand what it's like to feel the fear of dropping out. Trust me you won't be making a bad decision by dropping out and chasing your dreams or goals as a software dev or web developer. There's a lot of material online both free and paid that can contribute greatly to your growth as a software dev, as long as you're willing to put in the maximum work. If you've watched a lot of Brad's personal videos, you can tell that he is also self-taught, so it's not impossible at all. I dropped out to chase my goals as a software dev, and it is the absolute best decision I've ever made in my life. If I ever made a good decision, dropping out of uni to chase my goals as a software dev would be it.
Thanks Emmanuel, ... hey man.
That moment when you are taking React class in the university and you have a project to make which requires authentication and Brad uploads a video for that! THANK YOU BRAD!!!!
Almost 2 years later and this is still! the best refrence for me. Thank you Brad.
Brad i'm 13 and just started learning react like a week ago and now this video pops up.. Thank you so much and great tutorial!
Thank you! I've looked through five or six tutorials for user auth on a MERN app and this is the only truly beginner-friendly tutorial I have found that allows easy implementation into an already-built app. You're a life saver!
Brad, you are by far one of the best, if not the best Web Dev channels on UA-cam!
Thanks Brad,
You changed alot in my life. It's been six months since I enrolled in your full-stack web development course in udemy. Now I can say I am a real developer. Thanks Brad and God bless you
You got a Sponsor! Very Happy for you Brad
Again, the way you explain things imposes respect and admiration. Thank you!
Brad , we know about that you recently shifted to a new home (by the way congratulations for the new house) and I have experienced how stressful these things feel. Apart from that I hope you are alright with your personal life and are in good health. Thanks for everything you do .I am now a Web developer only because of you. Hope you are doing good and best wishes for the upcoming videos
I dreamt of meeting you live in person, the greatest teacher of all time, god bless you and your family
Brad sir, your tutorials are very helpful for us. Can you make a video on how to build a portfolio website from scratch...?
Yeah Brad please do a web developer Portfolio tutorial...
It's almost scary. But everytime I need to find something for college you make a video for it! Thank you! :)
Hey, I’ve been programming for about 4 months now but I constantly have a struggle with alcoholism. This isn’t related to this video specifically but I’d really appreciate a pep talk or some tips on how to turn my life around. Traversey, you got me into this & I really appreciate you. Thanks.
Thanks for this lecture. please i will like to have an hint on how to redirect to another page once the user is authenticated.
It come as savier for me. I am working on project and find it really difficult to implement Facebook login. Thank you sir for your great efforts.
thanks~ I have a question. How to create Login Out Code~? ^^
It's good to see that it's not that complicated... thanks 😅
Dear sir . Your tutorial are very easy to understand . Please make a tutorial on regular expression .
This was exactly what I needed! Thank you so much Brad!
Hey brad, can you make a course / series on starting a web dev business?
Hey Brad, a helpful tip when using react with VS code. If you switch the language mode from 'Javascript' to 'Javascript React' you'll be able to use emmet within your react files.
Btw, love your videos!
Thank you !! every detail you give is so helpful. Thumbs up and subscribed :D
Love the content you are putting up thank you!! I am brand new to wanting to learn coding and I have sublime and Visual studio code, my question would be which one would the best to get a grasp on coding strictly beginning
Thanks Brad, it's a great video. Do I need do anything on the backend api endpoint for facebook login once I used this react component? I did see some facebook login api endpoint development using passport, so I'm very confused what's the relationship between this login button and backend passport things.
Hey Brad, thanks for this and all your work. Do you have any tutorials on single page applications without any frameworks involved - (Just HTML, CSS and Vanilla JS?) I did find a couple on youtube but I don't find the content as informative and understandable as yours.
hi brad this is a great video as usual , i believe this should also be included in the MERN course on Udemy. this is a good example for multiple auth strategies using passport instead of just one strategy which is jwt.
Travis how do you know all this things? You learn by videos books? Official documentation of each language? Could you tell a little please?
thanks Brad! God bless you!
which one do you use more, react or vue?
The tutorials is awesome. Thank you.
Great Video Brad. Your tutorials are really helpful, I have learned a lot from you.
I am facing some problem and I could really use your help. My final year university project is near and I haven't decided what to build yet. The frameworks I am good at are Angular, React, Vue and Node.js. Can you please suggest what projects I can build with these frameworks as a final year project?
Thanks 😊
You shouldn't need to use all of them. You should pick Node.js & a front end framework that you're either good at that would make it easier or one that you'd like to learn more, then go for it. You can complete any web app project with any of those technologies, it just may be more efficient or easier using different frameworks over others. Do you have any type of project you'd like to build? I would try finding something that you're interested in. For example: make an easy to use pizza ordering app (that doesn't actually order), but let's you put toppings etc on it or some other type of web app.
Thank you Devin Riegle. Your response has been really helpful. I really liked this idea of putting toppings on the pizza. Any other idea you might have? I just want to have multiple ideas to decide which one I should go for.
Thank u for this awesome video. I am waiting for your new series
Is it best practice to use the react-facebook-login library or passport-facebook library when dealing with Facebook authentication in MERN
awesome tutorial.... i am wondering if fb login is similar to google login?
i know this is an old video. fantastic video. my pop up window goes directly into logging into my page but with yours, it ask you if you want to 'continue as brad' how can i implement this?
Thanks Brad! Would love it if you could do a crash course on Parse Server.
Thanks Brad! Great video.
Thank you Brad, can you do a tutorial on messenger API?
This is what im working on currently for my job, only I have to make it work with a rails api endpoint.
I guess this is a form of OpenID with Facebook. Since it deals with Authentication, we can take the fields we want from FB and map them to the fields required in ours, then sort of call our Create Account endpoint. Is this the flow for all those Continue With Google websites?
very very thanks .....nice tutorial ...it helps me a lot.
React from scratch in udemy please! 😎😊
Hi Brad,
Great tutorial !!! Would u please create a tutorial on Facebook account kit as well.
Thanks for the guide Brad !
Can you pls do a video/series on "Flutter" ?
Love it! Thanks Brad.
Thanks Brad! have anyone found the tutorial wich he is talking about here 17:43 ? i can't have a clear image of what we could do with these profil data from the Client side if we want to register or log in. thanks
So Does This Mean Evey Department Will Have It's Own Dedicated iT Team Or Let me Guess The Frontline IT Team Is Just Dumping And Replicating It's Techniques ?
thank you Traversy !!
Do you know how to decode the token that Facebook responds to you?
Brad God bless you for your selfless work...i just got your course on materialize css on udemy, wonderful course...Please can you do a navigation bar with a brand logo of different dimensions e.g 159*50, 376*128
Great video like always!
thanks for this video, it really works for me but how to customize that Facebook Button?
Hurray! New Video :D
Nice tutorial as always and thank you so much for your great kindness.Boss Brad Can you make a video on how to build a portfolio website from scratch...?
Like always, you are the best ♥️
i dont have to use like passport-facebook-token or something like that ? is this just enough ?
Please upload more react stuffs Brad.. Tnks a lot
Hello Brad. In minute 17:50 you are talking about your course Express MongoDB Dev to Deployment, where you store the id in mongodb. I can't find that video on your channel. Do you or someone else have the link of that video? I need an example where the id is store in a database. Thank you
Hello sir, i also looking for this video mentioned above . It would be very helpful if you could share that link here...
How you can create those icons on the left hand side of Studio Code?
Would it work if I import it in another .js file, like a login page for example? help
Dear my favorite UA-camr, please make a tutorial about login with Google in CodeIgniter. Greeting from Indonesia!
Hi Whats the name of the video with facebook login in vanilla javascript ??
You Motivate me A lot
Brad, looking for a series on Tensorflow..
Perfect Tutorial! thanks u very much!!
I am not able to do this...I have follow exact code but its not work for me..pls help me..im stuck here.
Will this work on Next.Js app as well?
When we go to basic settings to set the App domains, we have to now set a User data deletion field and Privacy Policy URL as well which are mandatory. I'm not able to save changes without filling these. What should I do?
I know this video was posted 3 years ago but it would be very helpful if someone could guide me
For me the confirmation page is not coming , if i am already logged in then it redirects to the same page , but i am getting the datas in console. If I am not logged in , it will show log in page of fb, after entering it will comeback to the same page.
Why Does it Expire within a Time Frame?
Very nice tutorial... please create video pwa web site tutorials... thank you
Thanks Brad!
They show an error in privacy policy url, user data url and terms and service url. So I am unable to save it . please help me
Can this be done in Expo?
Hey Brad, could you do a tutorial on a real login and sign up page?
Can you make a similar tutorial, but using a typescript codebase (tsx) instead of js?
Anyway, i'm new on react and this helped me a lot, thanks
its amazing ! thank you very much
Can you cover Google AMP?
thanks a lot of :) ...can you pls lern us how to put picture on the footer using css? many thanks....
Brad, Starting your course (MERN stack web dev. in Udacity) with the knowledge of HTML, CSS, JS, React (Beginner), Node.JS (Just finished your crash course), Express.JS (Just finished your crash course) is enough?
Are you able to let users logout without issues? Every time I try calling FB.logout() I get an error, and no one seems to know how to fix it :(
How we can sign out ?
How to solve this issue "Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as " ? I am using Windows 10
that was really helpful :) thx
how can i style that facebook button?
Thanks, A Ton! You da best :)
Thank you so much, it's very cool and clear
this has been on my list to understand for a very long time, thank you for making that so easy.
But why
Send u number
When I click the login button I get the following error: App Not Setup: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions. Does anyone know how to fix it?
GJ as always.
can you do some more tutorials on vue.js please thanks
hi brad ... plz do AmCharts crash course
Woohoo long live our Brad :)
Thanks so much sir
thanks for these
Can someone please tell me how to use the "developers.facebook/apps" in 2021? The whole developers.facebook site has changed and i don't know how to follow through with this tutorial. Someone should please help me.
Futur tutorial with php for facebook connect please, great tutorial
Allah pak San no kush rakhi ameen
Ug alert!!!! Please dont skip any advert on Brad's videos