How To Implement Login With Facebook In Angular | Fix It With Ankit

hello everyone welcome to this video in this video we'll learn how we can integrate login with Facebook in an angular application so let's get started so here I have a angular app running as you can see this is a basic angular application that was generated by ngu and the name of the app that was angular Facebook so for this we'll be using this package that is called an advocate slash angularx social login so let's go ahead and install this package so I'll just copy this and here I'll just open a new terminal and I'll just paste it in here now while this is being installed let's go ahead and create a Facebook app so to create a Facebook app we have to go to this URL that is called developers.facebook.com so here what we'll have to do is just go to create app and select a app type as consumer go to next add in a display name so I'll just add an angular demo make sure that this display name doesn't contain any trademark or Facebook like the name Facebook itself so I will just click on create app and it will ask me for my password as enter the password and click on submit [Music] now our app has been created so we'll just be the app ID for integration so let's go back to the package website now if I scroll down a bit here we'll get the code to add the package to our application so I'll just copy this social login module and I'll just go to the application and I'll expand source and app and I'll just go to app module and inside of the Imports I'll just add in the package that is called social login module so let's import it from angular X social login now let's go back to the package page and here we'll have to copy this providers so I'll just copy the providers and we'll just scroll down a bit and we'll replace the provider's array with the providers that we just copied now here we do need the Google login so we'll just remove the Google login provider we'll just hop on the social auth service config and click on Quick Fix and click on add all missing inputs so it will add in the Facebook login provider and also the social or service config so now we'll have to put in the app ID here so we'll just go back to the Facebook developer page and just copy the app I now we'll go back to the application and we'll just replace the client ID with the actual ID just save this now we'll just go to appcomponent.html and we'll just remove all the code from here now what we'll do is we'll go back to the package website and if we scroll down a bit here we'll get an option to authenticate with Facebook so we'll just copy this and we'll just go back to the application now inside the app component.ts we'll just paste in the code that we just copied we'll remove the sign in with Google as we don't need that [Music] now let's add in the Imports as well so I'll just do Quick Fix and click on ADD missing Imports so all the Imports have been added now what we'll do is we'll just create a login but foreign just type in a button simple button and we'll just add in a text called login with Facebook let's just keep it login with FB and on click of this we'll just copy this and we'll just add it in here now how do we know that the login has been successful or not so for that we'll just go back to the package website we'll just scroll down a bit and here we have the option to subscribe to the user so I'll just copy the NG on in it and go to appcomponent.ts and just paste it in here now we'll have to implement one in it as well connect and we'll have to add in these variables so I'll just add in user or type any and logged in of typing [Music] foreign [Music] now if the user is logged in let's show the username and email and also the photo so I'll just type in this code so that we can get the user details now we want this to happen only if the user is logged it so we'll just wrap it inside of a div and here we'll add in a ngf condition so I'll just type in NG if and Log dip and I'll copy this condition and I'll put it inside of this button as well and this will be shown only if it is not logged in so I'll just add in a not symbol here so now I think we are done with the setup let's go ahead and check if our application is working or not so here we can see our application is compiled now let's go to the browser and check if everything is working fine or not [Music] so here we can see we have the button that says login with Facebook so I'll just click on this button and here it shows us a pop-up saying angular demo is requesting access to your name and profile picture and email address so I'll click on continue as unkip so here you can see the name email ID and the profile picture was fetched but I don't think this is the correct profile picture so now let's just open the console so here we have the log for the user that was written by the Facebook API so inside the response we have a picture property and inside of that we have the data and inside that we have the URL so let's use this so here instead of user.photo URL what we have to do is we'll type in response dot data dot picture dot URL now let's just save this go back to the browser and let's log in again so we got an error here that says cannot read properties of undefined so that is because it is not data.picture but instead it's pitcher.data dot UI we'll just correct the location and save this [Music] now let's go ahead and check if it is working or not so I'll just click on login with Facebook and here you can see the proper picture is loaded and the name is also here and the email is also here now if you are using a backend in our application then what we can do is we can use this or token that is provided to us by Facebook and send it to the back and using this auth token the backend will be able to fetch the user details and if the user exists in the local database then they can return a jwd token from the backend that they are using or else if the user doesn't exist in the database they can create a user and then return a jwd2 so this was all on how to implement login with Facebook in angular hope you liked the video if you've got value from this video go hit the like button and for more such insightful content do subscribe to this channel thank you for watching [Music]

Channel: Fix It With Ankit

Views: 7,013

Keywords: angular, angular login, angular authentication, angular login application, angular 10 login simple login page, angular login app, angular 10 login form, login application using angular, angular 2, angular login and registration, angular 9 login with facebook, angular 10 login example, angular tutorial, angular facebook login, angular tutorial for beginners, google login in angular, facebook login in angular, angular authentication tutorial for beginners, Fix It With Ankit

Id: FldUPt65cuo

Length: 9min 9sec (549 seconds)

Published: Mon Oct 24 2022