From Zero to "Log In With GitHub" in Minutes, using Laravel

[Music] now one of the great things about the laravel ecosystem is of course the tooling if there's something you're trying to accomplish there's probably a tool to help you out along the way so to illustrate this i want to show you laravel breeze and laravel socialite we'll start from scratch and in a matter of minutes we will have a working application with github sign in all right let's get going i'll say laravel new yeah we'll call it socialite okay and i will warn you we're going to move a little quickly but just come along for the ride all right next i'm going to pull in laravel breeze which if you're unfamiliar is authentication scaffolding all right now i will install laravel breeze and this will add the necessary routing and registration pages and things like that okay next it wants us to install our dependencies all right let's open this in my editor like so and then let's also view this in the browser all right cool so we see the familiar landing page but now we have links to login and of course register but what i'd really like to do is offer a register or sign in with github link at the bottom okay let's find that register blade that was included with laravel breeze and right down here we can see this button to register and if i click through it is a button but i really need an anchor tag here so what i want to do and we could keep it all in the same component but let's just create a new one instead button link.blade.php and this will be an anchor tag which means i can remove the type okay cool so now if we switch back to the register page so now i can copy this and we have our button link and we'll say register with github okay let's have a look i give it a refresh oh yeah it's a little too much space um of course i could increase the width but let's just find something to make it a little prettier okay so now think about it when i click on this button here i want to redirect to github and if i have an account with github and i authorize that this application we're building can access certain information of mine that should be everything we need okay so that's our next step now to facilitate this i'm going to pull in another package called laravel socialite cool and then next while we're in the browser let's go to github and you can see i'm logged in as myself let's come down to settings where is it developer settings and i'm going to create a new oauth app this is for laricas and i'll set the homepage to match we'll say this is just a demo and then we have this authorization callback url so think about it when we redirect the user to github and when they authorize that our application can access information where should github return them to that's what this url is so let's set it to our local app here socialite.test slash auth slash callback and we'll register an endpoint to match that soon okay great so now for our github oauth app we have a client id and i can generate a secret as well okay so next we need to store these and usually you'll do that in a configuration file if i open up the documentation for laravel socialite you will see that we need to add some configuration items here so here's the one for github i'm going to copy that switch back and visit our config services file and we can do this right down here at the bottom cool so now notice it's deferring to these environment variables that we need to define so we'll do that in our environment file and we'll do it right here so the client id is what we created here next the client secret is also the thing we just generated grab that finally the redirect url well that's the one we set up earlier socialite dot test slash auth slash i think it was call back that's what we did we can use a full url here or if we use a relative url laravel will automatically turn that into a full url okay so we're making pretty good progress here's the next step let's register two new routes now and we'll say well why don't we call this slash auth redirect when i visit this url we want to redirect the user to github so that they can grant permission so this is what socialite helps with i can say return socialite and i'm going to pull in the facade here use a specific driver because remember with socialite you can log in with twitter or github or something else we're only using github here and let's redirect cool so now we have our endpoint the only remaining step here is to update our link here to link to it slash auth slash redirect all right cool let's give it a shot if we come back and refresh and i click on this link now it should send me to github and it does perfect so now github saying hey this app called layercast wants to access information about you and specifically it wants your email address okay authorize all right so we get a 404 here but we expected this the important thing is that github is trying to link the user to this endpoint because we told it to okay so the remaining step is to return to our routes file and add another route to respond to that this time if we have off callback i can now grab our user like so okay and let's do this let's die and dump the user and have a look at what we get here so if i come back and give it a refresh all right so notice that socialite did everything for us here it read the code it made the request to github it compiled the information and now we have everything we need which means i could start by creating a user in our database like this user but notice we have kind of two users so why don't we change this to github user to be explicit so i can say github user and i can either use a getter that will work for oauth 1 and oauth 2 providers or i can just be direct like this ok so we want the name next i want the email and what else do we need here we could grab the avatar if you want but i do want the github id so that's something we'll need to update our migrations to offer next i want the token github token and then finally i want the refresh token as well now refresh token allows us to make a request to github to update the user's uh current token in situations where it will expire so it's a little confusing but again the great thing about socialite is you don't need to know anything about it i can just say github refresh token and uh store it here and yeah i think that's probably it so let's do this let's visit my migrations table and we're gonna add a couple of these fields uh we'll do it right here we need the github id and that can be nullable next we need the github token and then finally the github refresh token as well finally if we do support this sort of registration and sign in that means you won't be using a password so if that's the case let's make it nullable all right cool so now we have our user we can sign that user in like usual and then we can redirect wherever you should go uh upon sign in redirect how about to dashboard okay so we might want to make a couple changes in a few moments but let's test it out now because we have a fresh application let's specify a database and i will use sqlite and we'll stick with the defaults all right let's create a database migrate the database and then test it out okay let's register we're going to use github oh and it worked so notice because we already granted this application access we didn't have to re-authorize it but of course if you need to you can revoke those tokens but do notice we signed in with github and we're all set to go here so if you want to have a look at our database here's our users table and here is the information we got from github but notice uh oh we're missing some of these fields and this is because i'll delete that and this is because by default on your user model this is what laravel has for fillable fields and anything not included here like a github id will be will be ignored so to be honest what i usually do for all applications is i don't set fillable fields and in fact i go to my app service provider and i turn off that protection entirely by saying model unguard i know what i'm doing here so you don't need to protect me from mass assignment vulnerabilities cool so now when we try to do it again and if i refresh i'll have to start over but if we try it again i think we'll be all set here use github so now if we switch back yeah there we go notice we do have that id and token okay so we're making really good progress one thing though if i log out what about login well i would also need a login with github button but it's basically the same thing so we could swipe it from my register page go to login instead all the way at the bottom and we'll say github login all right and it's basically the exact same thing so now if we log in aha it fails and this is what i wanted to show you because we call user create in the callback well if you sign in a second time then it tries to create another version of you and we of course don't want that so let's reformat what we should do instead is say user don't blindly create let's instead do update or create so now what should be the information to update the like what are we checking for well i want to see do we already have a user with this github id and if so update them if not create them so that'll be our first argument here and this is how we do it and i can remove this okay so try to find a user who matches that criteria if you did then update it using the latest information here and if you didn't find one then create a brand new user and i think this should do it for us so if we try one more time github login this time no error is thrown and you know what i think we're in business

Channel: Laracasts

Views: 10,631

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: ruUDtaLyDeM

Length: 11min 47sec (707 seconds)

Published: Tue Apr 19 2022