Installing Twitch Socialite0:00
Okay, let's take a look at using Socialite with a third party provider. In the last video we took a look at using it with GitHub, but if what you need is not on this list, then check out this list which has a bunch more. So if you go to get started, you'll see all the services that are available. So in this case I'm going to use Twitch. So let's go ahead and install this package. And then we'll set it up and make our code more dynamic so we can use multiple providers. Let's paste that in. Let's go ahead and install it. So there's some base setup that we need, but let's go over this first.
Configuring Twitch Credentials0:39
Let's go ahead and install it. So there's some base setup that we need, but let's go over this first. So we have to add twitch-client-id and twitch-secret to our config/services.php like we did for GitHub. So let's go to config/services.php and let's add twitch. And we need to add these to our .env file. Let's add this. And we need twitch-client-secret and twitch-redirect-uri. And let's go ahead and go into Twitch and set that up. So again, all of these providers should have the ability to create a new app. In this case, go to dev.twitch.tv, sign up for a dev account, and then go to your console.
So again, all of these providers should have the ability to create a new app. In this case, go to dev.twitch.tv, sign up for a dev account, and then go to your console. So let's go to applications and let's register your new application. Say socialite example. For their redirect URL, let's copy GitHub's and change it to twitch. So this. And say twitch. Okay. Let's add that. And let's verify.
Let's add that. And let's verify. Select the category here, say website, and let's create. Okay. So there it is. Let's go ahead and grab the client ID right here. Put that in here. And the client secret, go ahead and say new secret. And let's grab that and put it in here. And the redirect URL is this.
Registering Event Provider2:29
And let's grab that and put it in here. And the redirect URL is this. Okay. What's next? It says to add an event listener. So we have to add this new one for Twitch in our EventServiceProvider. So let's do that. EventServiceProvider. Okay. And let's add that one after this one.
And it says to remove this if it's in your config/app.php. And I don't think it is by default. So let's go to config/app.php. And yeah, there's nothing here for socialite. So that's fine. And it says to add this to your providers array. So let's add this to our providers array, put it at the end here. And I believe that's all we need. Okay, so let's go ahead and add a login with Twitch button like we did for GitHub. So let's just duplicate this.
Dynamic Provider Routes3:42
Okay, so let's go ahead and add a login with Twitch button like we did for GitHub. So let's just duplicate this. And the URL is going to be login Twitch. Let's make routes for Twitch. Actually, instead of doing that, let's go ahead and make this more dynamic. So we can add more in the future if we need to. So instead of hard coding the provider here, I am going to accept a provider parameter like this. So now our two methods take in that parameter. So back to our LoginController, say provider here.
So now our two methods take in that parameter. So back to our LoginController, say provider here. And instead of hard coding GitHub, we can say provider. And same for this. So provider. And anywhere we're hard coding GitHub, well, just here, I guess. Okay. So now, when we either click on GitHub or Twitch, the param will be GitHub or Twitch. Okay. And let me change this now to be more general.
Okay. And let me change this now to be more general. Let's say SocialiteUser. Okay. And let's see if this works. So I'm going to php artisan migrate my database so it's empty. Okay. And I believe that's everything. Let's try this out. So here, it's login.
Storing Provider on User6:03
Is it in here? Okay. So I guess it doesn't, but it does work. And if you look at the database, the information was stored correctly. So again, that's my email from my Twitch account and there is the provider ID. So we probably want to store what provider the User used. So let's change that. So it's going to our create a users table and it's add one for provider and this will just store the provider like Twitch or GitHub. Okay.
just store the provider like Twitch or GitHub. Okay. And again, I'm going to re-migrate my database. And let's try this again. Actually, no, I have to change something here. So in our firstOrCreate, I also want to search for the provider. So let's say provider, and that's just going to be the provider coming in. And this will also create it if it doesn't exist. So now let's try logging in with both GitHub and Twitch and also email. So if you look at the users table, email is still unique.
Testing Multi-Login Flow7:04
So now let's try logging in with both GitHub and Twitch and also email. So if you look at the users table, email is still unique. So in my case, the email is the same for both of my accounts. So I'm going to have to change it after I make one account. Okay. So let's start with Twitch to make sure everything still works. So this should be logged out because I re-migrated my database. Okay. So let's log in and let's start with Twitch. Okay.
So you would just have some sort of notification or alert that says, change your password on Twitch or on GitHub. So let's just make sure we can still sign up with email and password, register, user, user.com, password, password. And we can. And that should be in our database too. Awesome. So yeah, definitely make use of Socialite if you want to use third party providers to be able to log in to your site.
