Laravel Socialite - Useful Laravel Packages

what's up guys Andre here and today I'd like to show you how you can login with third-party services using laravel socialite this is going to be a part of my premium course so if you liked this video definitely sign up at useful laravel package is calm let's take a look at a laravel socialite socialite let you use third-party services like github and twitter to log into your application you see this across several web apps out there where there are extra options for logging in using these third-party services this makes the experience better for the user as they don't need to create a new account so socialite supports Facebook Twitter Linkedin Google github and bitbucket but there are additional providers here if you go to this website if you need these providers there's additional ones there's a lot of them here for this example we're just going to use github because github is the easiest to use all right so I have a laravel application scaffolded out here and all I've done is added my database credentials here and I'm also going to do a PHP artisan make off so we can scaffold out the authentication and now if i refresh we get the ability to login and register and let's make sure my database is migrated ok so that should work let's just double check that that actually works so it's gonna make one here password password and ok so it does work let me just reset that migrated to fresh ok so let's go into the docks and get started so the first thing we need to do is composer require it ok that's done let's go into here ok so let's put this in our config services like it says here I'm gonna copy this and like I said we're gonna be using github so I was going to a code config services and it's add that section for a github and I'm gonna make will set this in a second we'll just leave that for now let me just make some environment variables for these two so back to our environment variables down here and then for the other one as well github client secret so we need a client ID and a client secret that we'll get from github in a second you can also put this in your environment if you want but I'll just leave it here since it's this is the way it's defined save this alright what's next let's go into here and let's make a training log out here let's make a button here for logging in with github so let me just go into I think it's login yep and what's it called it's called log in god ok let's make another one here called let's not make it a submit button cuz that's already in use by this one let's just call this login with github github all right see how that looks okay that's fine actually let me put a little github icon here I have this set up in my other project here so I'm gonna paste it in and it's just an SVG so it's just a span with an SVG and some margin on the right see how that looks okay it looks pretty good and this actually has to be in anchor tag because it's gonna go to a redirect link so it's gonna change this just leave that empty for now and change it to an anchor tag cool okay now let's go into github and make an application there so I'm logged in as my github user here and if you just go click on your profile and go to settings there's a section here for developer settings and let's make a new wot application it's gonna call it socialite example as you can see I already did this and for the home page you can put whatever but my course site here example description here and the callback URL we will change this in a second I'll just put it to this for now so I can register this and here you see the client ID and the client secret so we need these two pieces of information and we'll go back into my environment file client ID and client secret okay now let's go back here into the docks and see what's next okay so it says to add these two methods in our login controller and one is responsible for redirecting the user to the OAuth provider in our case github and the other is responsible for receiving the call back after we're oughta cated okay so let's grab these two methods grab this and this goes in login controller login controller right here and I'll put it underneath here and as you can see it's the faulting to github here or just hard-coded if you had more than one then you would have to accept a parameter provider something like that same with this here but we're just gonna use github so this is fine all right what's next okay so obviously we have to set up some routes in our routes file so let's grab this and this corresponds to these two methods that we just pasted it in so let's go into our routes web and let me paste that in okay and here you can see the default callback URL which is what we need to define in both github and our application so I'm going to grab this let's go back to our services and right here I'm just going to do ULP laravel social aight top test slash that okay obviously this is gonna change when it's in production but for testing we can just leave it here actually it's probably better to put it as an environment variable because in testing you'll have something different from production so it's going to do that this it's called github callback okay gonna grab this and go back to our environment to github call back and space that in okay and it's go to our github and set it there as well get up here and it's set this and obviously this would change in production okay let's update this and this should work now let me just go into my callback for a second so in here right here let's just died in dump the user and actually I'm going to rename this to github user because when it comes back it's the github user and it's just I end up that sorry for that the dollar sign and let's see if this works okay I forgot one step we need to also set the redirect to slash login slash github so if we go into our blade file right here the button so I can just do that or you can use the URL helper if you want I'll just leave it like this and yeah see if so yeah that's correct if you look in the bottom left here the social light not found let's fix that import a strike in okay so here is where the two apps are communicating so they give each other access to access each other's information so if you're not logged into github you'll be presented with a login but I am logged in and all I have to do is authorize it and then once I do it we'll hit that callback URL and in there we can do whatever we like right now we're just tie-dyeing and dumping the github user that's coming back and there we go all this information is my github information and at this point we're going to want to add this user to our own database so if we go into here right here we're gonna want to add user to database and we want to login the user okay so let's add this user to the database so I'm gonna make a new variable called user and I'm just going to the create method so I'm gonna do user create let's make sure to import user this one and let's go ahead and and start with the email it's gonna be so this is the github user going back as you can see we have the fields we need here so github user email let me still github user email actually we should use the getter method instead of the field directly I think you can do it this way but you look at the docs yeah let's make use of the getter method so let's just get email like this and then the name is github user get name and we can store the username as well that would be the nickname in this case but I'm not gonna do that and we also have to store the provider and the provider ID so let me show you what I mean so the provider ID in our case it's just the github ID cuz we're just using it up so that would be this ID here which is pretty much my user ID in github so we have to store that as well so just name provider ID and that would be github user get ID and like I said if we were using multiple providers then we need to store another column called provider and this would be at the Twitter or github or whatever provider you're using let's just real needs and github I am NOT going to do that okay so [Music] we also want to log the user in so let's go ahead and do that all we have to do is use the author side facade and login it's the user we can set this to true that's just the remember me property and we import off of sod and we don't need this let's redirect so return redirect we have a property here called redirect to you just make use of that you can change that to whatever you like but the default is home supposed to do this redirect to and that should do it let's see if this works some will go back like one morons fresh okay let's try again I forgot to take out the D D let's get rid of that okay let's go back and it's login and yes we have an issue here I forgot to allow password to be nullable so yeah let me show you what I mean here we're not specifying the password because that's the whole point of using a different provider to login is not to make our own password and just use another service so we need to make that nullable so if you go into database migrations users let's just make the password nullable right here and yeah we also have to specify a feel for the provider ID let's do that now for the password just duplicate that provider ID provider ID right yeah provider ID and let's make that nullable as well and we also have to remember to allow that here so provider ID and let's do a PHP artisan migrate fresh okay let's try this again go back if you login login with github and there you go so since I already authorized it the last time it didn't do it again and it went through let's check our database actually you just refresh this users and there I am cool and it automatically log in because we specified that author login facade right here but let me show you an issue we're running to if we try logging in again so since that user already exists it's gonna go through that code again but it's gonna try to create that user which already exists so it's gonna be an error there you go duplicate entry for that email address which already exists so we have to check for that right before this we gotta check if this user already exists so I'll just do that right here I'm just remove this watch do user wear and github ID equals github user and get ID and it's crab the first one so if it exists right here grab it if it doesn't exist then create it so if it doesn't exist so if not user and do this stuff create it and that should do the trick so let's go back let's refresh this login with the github I'm sorry did I did I use github ID instead provider ID yes sorry provider ID one more time login with github there you go it worked that time and because it found the original user so I didn't try to create anyone cool and this totally still works with the original registration and login flow so if you wanted to register the traditional way you can still do that so actually let me show you that there's validation on this so if you try to register and you're already registered with the same email address this should catch it and see double check I think it should say that it already exists and it does cool but if you want to create a totally new account we can do that the old way and yeah so totally works you can use either github or just plain old email so there you have it guys we've managed to integrate a github login into our own web app using socialite you can do the same for other services although I find github to be the easiest these days for Twitter you need to sign up and be approved for a developer account and for Google I kind of find their UI to be really difficult to navigate to find the client ID and the singer key but nonetheless that's the only pieces of information you need and you pretty much do the same thing that I showed you here if you haven't already please sign up for my premium course where I'll be taking a look at other packages similar to this one please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 29,189

Keywords: laravel socialite, socialite laravel, laravel socialite github, laravel socialite twitter, laravel socialite example, laravel socialite tutorial, laravel oauth, oauth laravel, andre madarang, drehimself, laravel package, useful laravel packages, laravel login github, laravel login twitter

Id: NK9OoqaoiC8

Length: 20min 15sec (1215 seconds)

Published: Mon Sep 24 2018