Intro to Socialite0:00
Okay, let's go ahead and take a look at Socialite. Socialite provides you with a simple and convenient way to authenticate with OAuth providers like Facebook, Twitter, and GitHub. Let's take a look at how to use it. So if you look at the docs, you'll see that there is support for these providers here. And if you need another provider, there is a huge list maintained by the community, which you can find at this link. So in this video, we'll take a look at using GitHub, and in the next video, we'll take a look at using one of the third-party providers. So I have a blank Laravel 8 app here, and I've already installed Jetstream for authentication.
a look at using one of the third-party providers. So I have a blank Laravel 8 app here, and I've already installed Jetstream for authentication. And what we want to do here is go to the login page and add a button to log in with GitHub. So let's go ahead and do that. So let me just make a new User first to make sure that Jetstream is working. So say user, user@user.com, password, and password. Okay. Okay, so it does work. So let's go ahead and log out and install Socialite. So let's go ahead and composer require Socialite.
Configure GitHub OAuth1:02
So let's go ahead and log out and install Socialite. So let's go ahead and composer require Socialite. And while that's going, let's go ahead and set up a GitHub here. So we have to add GitHub client ID, GitHub client secret, and a redirect URL to our config/services.php file, I mean. So let's go to config/services.php, and let's paste GitHub in here. And I'm going to make the redirect an environment variable as well, because this will change based on your environment. So let's go ahead and do that. So let's go to GitHub, say redirect.
And if you look at the docs, when the routes are defined, you'll see that the redirect URL is /login/github/callback. So let's make that the URL, login, github, callback, okay. So let's grab that. And let's put this into our .env file as well. Actually, let's register the application first. And now we get a client ID and a client secret. So back to our app, let's put the redirect in here. Let's grab the client ID and the client secret. Okay.
Add GitHub Login Button3:30
Let's grab the client ID and the client secret. Okay. So that should be set up now. Now let's set up our routes and a controller. Actually, let's set up the button first. So the button in our app. So on the login page. So let's do that. So I believe it's in a login.blade.php file. So let's look for resources/views/login, and let's just look for login here.
So I believe it's in a login.blade.php file. So let's look for resources, views of login, and let's just look for login here. And we can make another button, but this is actually going to be a link. So let's just grab the styles from the actual button. So let me just open DevTools here. And then we grab the button styles here, or the classes. So I'm just going to grab all of this. Okay. And let's go ahead and make a new link in here. Oops.
And let's go ahead and make a new link in here. Oops. So let's say <a href>, and we'll add the link in a second. Let's add a class with these classes. And let's say loginGitHub, okay. Or login with GitHub. That's fine. And where's this going to go? So if you look at this route, you'll see that it goes to here. So we'll add that in.
Create Controller and Routes4:54
So if you look at this route, you'll see that it goes to here. So we'll add that in. So back to our href login GitHub. Okay. And now let's backtrack and set up our controller here. So it says to make a LoginController here in the auth folder. So let's grab this entire thing. And let's add that. So this goes into app/Http/Controllers, make a new file, let's put it in auth/LoginController.php.
So this goes into app/Http/Controllers, make a new file, let's put it in auth/LoginController.php. And let's paste that in. So we have two methods here, which correspond to the routes I was showing you. So the first one redirects to the provider as the name implies. And this is basically the link I just added in our login.blade.php. So right here, it's going to redirect to the GitHub provider. And for this one, this is what gets called after the two apps have communication with each other. And we have the user information coming from GitHub.
each other. And we have the User information coming from GitHub. So let me just dd the User here. Okay, save that. And now let's set up our routes. So I'm just going to add these two new routes, which correspond to those two methods. Let's go to our routes file. And let's just put it down here. And let's not forget to import LoginController. Okay.
And let's not forget to import LoginController. Okay. And I believe that is everything. Okay, so let's try this out. Get rid of DevTools. Let me refresh. And let me log in with GitHub. And since I'm logged into GitHub, our app is requesting information from GitHub. And we have to authorize that request. So after I hit authorize, we should hit that other method and it should die and dump my
Persist and Login Users6:49
And we have to authorize that request. So after I hit authorize, we should hit that other method and it should dd my user information from GitHub. So let's try that. There we go, it's being redirected. And there is the information from my GitHub account. So at this point, we can store this user in our own database and log the user in. So let's do that. So back to our LoginController, we want to create a new User in our database and log the user in and then redirect them to the dashboard, redirect to dashboard.
So back to our LoginController, we want to create a new User in our database and log the User in and then redirect them to the dashboard, redirect to dashboard. But before we do that, we have to make some changes to our users table. So now we have the option to use a standard email and password, but we can also use GitHub. So the password can be null. So let's go to our migration, create users table. And it's set password to nullable. Okay, so let's say nullable. And let's also store the provider_id. So that would be this ID here.
And let's also store the provider_id. So that would be this ID here. And let's name it provider_id and let's put it after profile_photo_path. And let's just store it as a string and say provider_id. And that's nullable as well. Okay. And I spelled table wrong. Okay, so let's migrate the database again. And now let's try creating a new User and logging them in. So back to our LoginController.
And now let's try creating a new User and logging them in. So back to our LoginController. Let's go ahead and create this new User. So I'm going to rename this to GitHubUser. And let's get rid of this. And let's create a new User. So User::create, let's make sure to import User. And let me also set $guarded to an empty array in our User model. Let's get rid of this protected, $guarded is an empty array. Okay.
Let's get rid of this protected, guarded is an empty array. Okay. So what do we need here? We need email. And to get email, if you look at the docs here, we can make use of these methods. So getEmail is what we need. And we can use getName for the name as well. So I'll say githubUser, getEmail. And let me just change the spelling of github here to be lowercase. Okay.
And let me just change the spelling of GitHub here to be lowercase. Okay. And let's do the same for name here. So I'll say name, getName. And let's add one more for the providerId. And let's say getId. Okay. Okay, let's add a semicolon and let's log the user in. You can use the Auth facade, or you can use the global method, which I'll use here. So Auth::login the user, which I did not save.
You can use the auth facade, or you can use the global method, which I'll use here. So auth, log in the user, which I did not save. Let's do that. And the second program is if you want to remember them, so it's a true. And let's just redirect them to the dashboard if that was successful. So return, redirect, and say dashboard. And this already has a middleware associated with it in our routes file. So if you go here, you'll see the dashboard right here. Okay, so let's try that again. I am going to first go into my GitHub OAuth and revoke all tokens.
Handle Existing Users11:32
And check the providerId. And there it is. Now we have a problem here. If I try to log in again, this User already exists. So we're going to get an error. There we go. So what we have to do is check if the User exists. And if they don't, then we have to create them. So let's add that logic back to our LoginController. And let's go ahead and do that up here.
So let's add that logic back to our LoginController. And let's go ahead and do that up here. So $user equals User::where(provider_id is github_user_id or get_id). And let's get the first instance. Okay. And we can wrap this in a conditional. So let's just say if not $user, then do this. But if they do exist, then we already have them from up here. So now the case that we just tried should work. Let me just reinvent this.
So now the case that we just tried should work. Let me just reinvent this. Okay. So let's try again. Back to the main page. And now when I log into GitHub, it should use the User that we already have. And there we go. And you can even clean up this code a bit more if you want. You can make use of Laravel's first or create method, which is basically this entire thing here.
You can make use of Laravel's firstOrCreate method, which is basically this entire thing here. So let's see how we would do that. So let's say $user equals User::firstOrCreate. And the first parameter is the user you're searching for. So it's going to be an array. And just like our where clause here, we're searching for the provider_id on the GitHubUser::getId(). Okay. And the second parameter is the fields that are used if it cannot find this.
Okay. And the second parameter is the fields that are used if it cannot find this User here. And it'll also combine it with this field as well. So let's add that. So it's basically just this. I'm going to copy it. email and the name. So let's just paste that in. And again, this is basically the same thing.
So let's just paste that in. And again, this is basically the same thing. Just a convenience method that Laravel uses. So we should get the same thing here. So I'm going to log out. Let's try both cases. So this will be the case when the User already exists. And I have an error right here. Let's try again. Okay.
So the next video, we'll take a look at using a third-party package and how we can make our login a bit more dynamic and have two login providers. So GitHub and whatever I choose for the third-party service. And if it wasn't clear, if you don't want to use GitHub or any other services, you can still use email and password to register. So let's go to register, user, user@user.com, password, and password. And this should still work, and it does. And now we should have two users in our database. There we go.
