Laravel Socialite Login with Google and Github | Laravel Breeze

hello everyone my name is William welcome to lant in this video we will be adding social login to our Live Wire Breeze authentication system and so let us go ahead and install Breeze and then install the socialite package and the socialite package is a LEL package that can enable us to be able to easily integrate social logging within our LEL application so let us go ahead and install Breeze we will run the command composer require Aral Breeze and hit enter in terminal after installation of Bree we will configure it by running the command PHP Artisan Breeze install we will choose Live Wire hyen function and hit enter and then choose those other values that we asked our Breeze authentication has already been set up if we are to check our application by refreshing can be able to see that we have login and register I would like us to install laravel socialite we run the command composer require L socialite after installing socialite I would like us to create some buttons inside our login form so we are going to inside the login form here I want us to have two icons one for GitHub and the other one for Google so you open resources views and then live and then we open pages o inside here we have our login.php this the file that I would like us to modify and so below here before the end of um the form I would like us to have another div with a class of flex and we will Center our diff inside this I want us to have another diff and we will have a class of grid with two columns and inside that I would like us to have anchor tags one of them we'll be going to socialite so for/ socialite and then forward slash GitHub and then the other one will be going to Google so I just copy this and paste down here you pass in here Google so for GitHub and Google we will be passing it dynamically in inside our routes file and of course you can feel free to add Facebook gitlab or any other uh social uh links that you would want to authenticate using socialite I want us to go ahead and have icons from bootstrap icons we pick some SVG images get bootstrap.css and search GitHub so we have two icons I pick this one just copy the SVG we're going to paste it for the first one and uh the width I want it to be 40 the height also we will go back and search the SVG for Google you just pick this one copy it paste it on the second anchor tag have a similar height 40 and width if we are to refresh and see how our icons look they look something like that like to give a little bit of padding so in our hre I'm going to have a class you have padding for the value of x to be three and the padding y to be two then I use the same class in uh the anchor tag above to just give a little bit of spacing now there is a little bit of spacing I would like us to go ahead and create routes for our application so we will go to routes web.php and inside here I would like us to have a controller which we are going to call social login login controller so let me first of all create that controller and since we are creating a controller model and migration we are going to run the command PHP arst me PHP makech model social login and then I pass in hyphen migration and control that command will create for us the three things and I want us to create two routes here route get both of them will be get routes and the first one will be socialite and then because when we have been setting the URLs you've been saying socialite GitHub and then socialite Google and you can have them differently like that but it's not an efficient way we can just use all of them to uh be taken care of by the same URL so here I just want us to have a value which you call driver so the driver is either Google Facebook or GitHub and so on and so forth and then we will use our controller and then the method I want us to to have for the first one is to provide and this method you'll be redirecting our user to the provider whether GitHub or or Google in this case and then above here we can import our controller use app HTTP controllers social login controller I also want us to have another route similar to this which would be the Callback route and so this one I would like to have it differently so maybe we can uh say uh login maybe socialite or we can say out and then driver then for slash login so that is how our route will be looking like so out then we pass in the driver so if it's Google out Google then login that will be our call back URL and the method here will be handle uh call back but on top of that as it is in our URL somebody can be able to pass any string here we want to limit the strings that we can be able to respond to only to whatever it is that we may be having in our applications so I want us to attach a constraint here we are going to say where driver and we you can put uh several values so in this case GitHub or Google so if you have the other socials you can be able to pass them here separated by this uh Slash so I would like to also just copy this and uh paste it here and in our controller in our routing we have everything okay so let us go to our controller method be able to have the two methods that you have mentioned there so we go to app HTTP controller social login controller our first method will be public function to provider and inside here we are going to pass in the driver in the second method we are going to have public function handle callback and still we will passing the driver so in this first uh method whereby we are sending to our controller I mean to our provider we will just return social light driver and inside here we can pass in our driver value that we have here and then we can redirect and that will be everything that you will do then it will be authenticated in our driver I would want us to handle the call back a little bit later but as we purpose to work on that here we can be able to use LEL socialite facad socialite I would want us to go ahead and U work on the configuration values inside our config services so we will go to the config directory and then go to services and we are going to add the variables that relate to the two uh social uh links that we are using or authentications so the first one of course is Google and so we can uh have uh several things here we can have client ID we can set an EnV value here so EnV we can pass in Google uncore client _ ID we will have client secret and change that accordingly the last thing we need to have and this one are supposed to be comma separated not semicolons because is an array of values then we have redirect and here we are going to set our redirect URL similarly to whatever it is that we have have in our routing file the redirect URL I believe that is how I did put it whatever it is that we have here I want us to copy and have similar credentials for GitHub so let me scroll this one down a little bit and paste so here we're going to have GitHub this one will be GitHub also that one GitHub client ID and client secret and here we will change to GitHub and I think that is uh okay now we need to go to ourv file environment file and here we need to create those values so the client ID for Google the client ID for client secret for Google and then GitHub client ID and GitHub client secret so let us go go ahead and see how we can be able how and where we can be able to find these credentials and I want to begin with GitHub we will go to github.com I'm already logged into my account so just click here and we are inside where I want to go is uh on the profile and then settings and then we will go to developer settings and we will click on o apps and here we can be able to create another app so we can call it socialite and we need to have the homepage URL which is HTTP Local Host 8,000 the description is is optional and then the call back URL we can just set exactly what we have in our services here so what we have here is our URL so I just copy and paste here but it has to be the same as what you have been able to set in the redirect uh in the Callback URL in the routing folder they have to resemble each other so I will register and I actually want us to try and see if it's possible for us to actually log in using GitHub so I will refresh now let me click on GitHub and it is redirecting us but even though we are having yes the the the what we do not have is our client ID and client secret which have not picked and it's what we have here so this is a client ID the reason why we are getting that array because we have not been able to set the values in ourv file so we come and put the GitHub client ID and then I will also paste in the client secret so we have the GitHub client ID and client secret and I would like us to just go back and see if if now we can be able to log in the reason why we having the error is because we had not set the values now you can see can be able to authoriz access and now we can be able now to process the call back so everything is okay there it do also work on how to get the Google client ID and client secret and what we are going to do we are going to visit console. cloud.google.com that is going to bring us here and what I need to look at is API and services for purposes of our project I'm going to create a new application a new project so we can call it h socialite also create we are going to ensure that it is the one that is selected above here social light and what I want us to do is to click on credentials or maybe o consent screen and we are going to create an internal actually once if you are working with a the applications you will create we will create an external application we will create of course you be asked for the name of the app we can say my uh socialite app and the email you can just select the email that we have here I would like to copy that email we will use it below so app logo app domain every other thing is uh optional we will put in the email address and save and we will just continue all the way that is okay I want us to click on credentials and I want us to create credentials and what we need is O client ID after that we going to select the application type and in the this case what we we are working with is a web application we can just have the the web application like that and then for the redirect URLs we can be able to copy what we have again in uh app services so we will copy what we have here for Google and paste paste it here as our redirect URL and then click create and so after that we will have our client ID and client secret which I'm going to copy and uh paste in my application and also the client secret that way after that we can go ahead and attempt to check if our Google button will work similarly to what we have in GTH T so you click on Google and then it is redirecting us to sign in and so we can choose the account you want to sign in with you can continue now you see still something is happening and we are reaching back to our application so now once we have it like that everything is perfect now I want us to handle a few things before I go back to our controller I would like us to go to the database directory and then go to migrations and since we have created a new migration which is social logins I want us to have several things here so we have table and we can have uh string and here we will have provider and then we can also have the so the provider will either be Google and and all that and then we can have provider id which will be the you the ID that will be provided by either Google or GitHub for the specific user and then lastly we will have uh table foreign ID in this case we can say user uncore ID I also want us to have a relationship with between the social logins model and the user model and so inside our social uh login I would want us to have a relationship so above here we can say use illuminate it belongs to relationship so use database eloquent uh relations belongs to and this one is supposed to be in the model not here sorry supposed to be in our social login model I think it's because they are somehow similar that's why I mistakenly uh did it there and we can have it here and we will have public function user you can say this belongs to user class I just want it to be one way in this way because we if we want it to be both ways we supposed to go to the users model and declare the inverse of this relationship but let let us just have it like that because we will only be quering it one way so let me go back to our social login controller and inside our handle callback I want us to go ahead and handle our callback and see how we are going to deal with logging in a user so the first thing that we have is in a variable called user I'm going to save the instance over socialite that we have gotten from whichever provider so you have socialite driver and we will pass in our driver and after that we can be able to get the user and this will give us the details of our user and we can be able to access the Avatar their email their name the way they are called in that social platform whether it's Google GitHub Facebook Twitter and so on and so forth then after that I want us to check if this user account is actually found in our social login model or in this case in our social logins table so what I'm going to do I'm going to say account or user account you be given by the social login model where the provider name is the same as the driver and we you can also check another constraint where the provider uncore id the same as user get ID like that I just want us to fetch one record if it exists and this may exist or not in our database if the users never signed in using the social login you will not find this for the specific provider so for example the Twitter or maybe GitHub is what we have and so we can go ahead and check if the account exists if the account exists with this details that you're passing in here the driver maybe is Facebook and the provider id is of this specific user it exists in the database there's nothing else you're supposed to do other than login the user so we can check if user account so if the user account exists and we can go ahead and just log in the user so we can say out out login user uncore account and then we can leverage our relationship that we have just created so I can just say user and that we log in our user and then it is usually good practice to regenerate session so session 12 to avoid session hijacking then now we can redirect so return redirect intended we can take our user now to the dashboard so that is if this is the case if the user exists in our system and they have used a specific uh social provider to log in previously then we can just go ahead and log them in but if they do not exist I want us to check if in our users table there's a user with a specific email that we getting from the provider so I'm just using a different variable here so I'm just saying DB user we can get user where email is the same as um user user get email and when we use get user get email this is how we are access the email address that has been provided for us from the social uh platform that we are using to authenticate so if we find it then we can be able to do some more things so we can say first and get if we have a record we just get one record if we find the record then it means we have a user in our database maybe they logged in using the register method and they able to provide our email their email and all that but now they have not used the social media that is related to that email to log in so if that is the case and we have found the user and we have gotten the payload back from our provider then we can go ahead and log in these user so we can check again if theb user so if this has a value or another words it's not empty then we can be able to go ahead and do something and log in the user so here we are going to do two things we are going to create the the provider id and user ID inside the social login uh table and then we will log them in so here I'm going to just say social login the social login model and then we can say create and the Prov provider will be equivalent to the driver the that which we are passing in our handle call back the provider id we get user get ID like that and remember this user we are referring to is what we are getting above here so that is the one that carries all the payload of the information that we are using all through and then now we can say user _ ID and we can check the ID of this DB user so what I'm going to say I'm going to have dbor user and then the ID after that we can go ahead and save this new user in our social login model we can just say protected fillable or protected guarded protected guarded like that since we are passing in our value safely we can have it like that but you can also have protected fillable and state the values that you want entered in that uh table so that is uh that so let us continue now we have been able to log in a user who has never used uh the social login to log to our application we have been able to create their values and we can say else so if this user does not exist in uh the social login table and it does not exist in the users uh table then it means they are interacting with the application for the very first time so for these ones we can be be able to first of all create the the the user in the users table and we can go ahead and also create the provider id and all that in the social login table so here I'm going to say uh DB user thebore user you be given by user create and we can pass in an array of values and here in the user model obviously we usually have the username so we have name in this case we can get user get name that you give us the name of the user and that is the name that they have registered in the social media account then email we can uh have it as user get email and if we are also interested in the Avatar we can also get in a similar fashion user get Avatar but uh for the password I'm going to just encrypt a value so we can say by Crypt bcrypt and we can have anything here so what I'm going to have is just some random values if they want to reset the password they can be able to reset so we can have have a value between 1,000 and 999 that one is something arbitrary that I am doing I do not know if it's necessary to do that but still we will also need to save our user the the the details now of the provider and all that so after doing all this we can go ahead again and log our users so we will do the same thing that we have here above here so again we can say o login and then we can redirect to the dashboard so basically would want to paste all those uh things here similar now above here we need to have uh several things we need to have the models so use app models user and we also need to have the social login we also need to have the session so use illuminate facad illuminate support facad session and then we can also use the O facet cuz we have mentioned it somewhere there so basically I believe we have everything that we need I also need to run our migration so PHP that is migrate now I want us to attempt and see if we can be able to log in a user so let me go back here and just go to Local Host 8000 and go to login click on GitHub we are having attempt to read property user on Nal I think where could that be both login user yes there's a there's a bit of an issue because I copied this without uh regard we are loging logging in the DB user below here not the user account user because I did I did copy what you what we were having above here this one here but we accessed these values from a different uh way so we can't use it in a similar fashion here so let me just remove this and pass in DB user so that is the one that we are going to use but what you can be able to see is that outrightly everything seems to be working on well so what I want us to do is to just do the migration PHP Attis and migrate fresh to just remove any data that we might be having in our migrations and then go back to Local Host 8000 and now when we click login now we can be able to click uh get up now you can see we are logged in our dashboard so that one works perfectly we will log out and attempt to log in with Google so again log in click on the Google icon and if you take us here we will choose which accounts we want to login with and did you ask if we want to sign into the socialite app will you continue so if you are having an application you put the name of the application there not to confuse the user so now you can see even this one we are logged in and if I'm to log out again if we go and just register uh a use a fresh and maybe we can say William and we have uh William at example.com and we have a password if we click register even this user is still being logged in but because we have used the register method then we need to just log out and try and log in the user so again I click on login and see if we can be able to log in the normal way so William at example.com and the password and click login so you still see that it logs in the normal way without any problem so basically that is how you can be able to achieve uh social login in a laravel application when you're using Live Wire and Bri and in this application that we have created if you want to add even Facebook you just need the client ID and client secret and set the values in the EnV and set the values in the config file once you do that then you come to the login form and also add the icon for that uh Social account and this app that we have created will be able to handle your login without any issue thank you very much for following this video tutorial up until this point if you have not subscribed to this Channel please consider giving us a subscription and you can like the video if you like it you can also give a comment in the comment section if there's a question a query or a compliment thank you very much

Channel: LaraPhant

Views: 701

Keywords: laravel, laravel 11, multi authentication, laravel breeze multiauthentication, livewire breeze multiauthentication, socialite, login with github, login with google, socialite github google login

Id: obBYflhOW1Y

Length: 35min 52sec (2152 seconds)

Published: Fri Mar 22 2024