This episode is for members only
Sign up to access "Social Authentication with Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
03. OAuth redirect basics
Episodes
01. Introduction
02. Laravel Socialite Basics
03. Making it reusable
04. Implementation examples
Transcript
00:00
OK, so by the end of this episode, we'll actually be redirecting the user over to the service that they want to sign in with.
00:06
The first thing that we need is a splash screen with the buttons that allow them to actually click on that. So let's work on that first, and then we'll get Laravel Socialite installed.
00:14
We'll set up an app on Twitter Developers or X Developers, and we'll get that redirection happening. OK, so let's go over to our app. And we're going to go ahead and just straight up
00:25
create a new controller. So I'm going to go ahead and make out a controller here. And I'm going to put this in a social directory just so we don't get mixed up with the other authentication
00:34
controllers that we have within this starter kit. And I'm going to call that Auth Index Controller. That's just going to be responsible for showing the page where we can click on any of these buttons.
00:44
So we'll go over to our Auth Index Controller, and I'm just going to define out an invoke magic method inside of here. And we're going to return a view in there in a minute.
00:54
But let's talk about the route registration. So this needs to be only for guests. So I'm going to go ahead and grab this route middleware group here, paste it in, and I'm going
01:02
to switch this over to guest. So this means that any of these auth routes that we define in here can't be accessed by already authenticated users.
01:10
So let's create this route out. And we will just call this slash auth. And let's reference that Auth Index Controller. And we'll go ahead and give this a name of Auth Index.
01:22
Great. So what I'm going to do is take this, and we're going to go over to the welcome.blade.php file. Which we see when we create a fresh Laravel app.
01:31
And we're going to find this Login button just here. We're going to switch that over to that new page, just so we're redirected over to the right place. So basically now, when we're on our home page,
01:40
and I hit Login, that's going to go over to that new route that we've defined. And of course, your app's going to be different depending on how you set it up.
01:47
But we want this to be the first page that the user lands on when they want to sign in or register. OK. So now that we've done that, let's go ahead
01:55
and create the view for this. So let's say phpArtisan make view. And we're going to go ahead and call this Social, and then just Index.
02:03
We can call that whatever we want. OK. So over in our Auth Index controller, let's return that view.
02:09
And then we'll fill this in. So let's return that Social Index view. We don't need to pass anything down here. And let's head over to that Social Index view just in here.
02:22
So this is pretty much just going to look like the standard login pages. So we can actually grab all of the boilerplate for this. It just uses this guest layout blade component,
02:31
which is just a wrapper. So we can copy all of this and just paste it over to this page. Now, of course, that means at the moment it's just going to look like a standard login page.
02:40
But what we can do is just tidy this up. So the one thing that we don't need is a form. We don't need to post anything down with this. We just need a bunch of buttons and then a link
02:49
to go through to the standard login register. OK. So let's create out a wrapper here. And we'll just give this a little bit of spacing.
02:56
So we'll say space y2 tailwind. And in here, we're just going to have a bunch of anchors. We don't need to submit anything here. It's just going to be a bunch of links
03:06
that go through to a specific route in our app. So we're going to say sign in with x. That's the one that we are starting with. And let's go ahead and just give these a couple of styles
03:16
as well. So let's say border gray 200. And we'll give this a background gray of 800. We'll set the text here to white.
03:26
And we'll say flex item center. So the text sits in the middle with justify center as well. And then we'll just go ahead and give this a specific height. Set the font to semi-bold.
03:38
And we'll set rounded to large. And of course, if you're not using Tailwind, it doesn't matter. You just want a button basically.
03:44
OK. So this doesn't look great at the moment. So let's just go ahead and run npm run dev. And set up a new tab here for our commands.
03:52
And we should have something that looks like this. Great. OK. So we won't do anything else to this page.
03:57
We just want to be able to click this link and go through over to Twitter. How do we do this? Well, we need to install Laravel Socialite first of all.
04:05
This is very easy to do. We're just going to go ahead and grab the composer command to pull this in. And once we've done that, we're pretty much done.
04:13
We just use any of the Socialite functionality that we need. But we need to know where we are clicking through to on this specific link. So this won't go directly through to the services
04:23
that we want. It will go through to another route in our application, which then chooses which service we want to redirect over to.
04:30
And then it will go ahead and generate the link for us. So we don't need to do anything ourselves. We don't need to fetch these links ourselves. So let's go ahead and create out a really simple redirect
04:41
controller here. So let's say make controller. And we're going to call this auth redirect controller. There we go.
04:49
And let's create our route for this. And let's say auth slash redirect. Change this over to that auth redirect controller. And of course, we'll call this auth and redirect.
05:03
So let's grab the name of this. And then we'll just put this directly into here to link through to. This isn't going to return a view or anything like that.
05:12
So let's go over to that auth redirect controller. And we'll introduce an invoke magic method. And let's just die dump in here on redirect so we can see that that's worked.
05:21
OK, so now when we come over and I click Sign In, there we go. We're over to that new route. So this is the point that we want to start redirecting the user over to this service.
05:31
Now, I'll show you how to do that. It's not going to work at the moment because we're going to need to grab some credentials from all of the services that we're using.
05:38
But we'll see this in action. And then we'll go ahead and fill them in. OK, so in here, it is incredibly easy to use the socialite package.
05:45
What we're going to do is use the socialite facade. So we'll go ahead and pull that in. We're going to go ahead and choose the driver. So this depends on the service that we're redirecting over to.
05:55
Now, at the moment, we're just using x or Twitter. And we are just going to choose that directly in there. But later, we're going to allow this route to accept in which service we want.
06:06
And we're going to replace it in there. So we'll do that a little bit later. And then we're just going to say redirect. So this will generate out a redirect response.
06:15
And because we're returning this, Laravel's just going to redirect us over to the built-up URL from this package. So let's go over and just click on this and see what happens.
06:24
Now, no surprise we get an error here because the config for our app that we're trying to redirect to is missing. So we need to go ahead and set up
06:34
an app within the services. Now, this will vary over time. So obviously, it's not going to look exactly like this, depending on when you're watching the course.
06:43
So we're only going to cover a couple of these integrations. But as you go through and implement more or different providers, you'll just want to basically grab a couple of keys that you need,
06:54
however that may be, and then go ahead and add them into your config. OK, so let's go ahead and create our project on Twitter or X. And I'm just going to call this Code Course.
07:04
Let's hit Next here. And we'll just say whatever. And we'll just say Screencast in here because we're not really doing much here.
07:14
And we are going to create an app. So this is the part where this is going to be our app that will give us our keys. So I'm going to call this Socialite Screencast.
07:25
The name here doesn't really matter too much. And we will be able to grab our keys and our tokens. With these, we want to go ahead and copy them now and go ahead and paste them into somewhere.
07:35
And I think, at least at the time of recording, the API keys here are not going to be the ones we want. We'll try these out in a second. So I'm going to go ahead and copy all of these over to here.
07:47
And we don't need our bearer token. So we'll just go over to our app settings. So now what we need to do is go ahead and take these keys and put them into config that Laravel Socialite will
07:56
be able to read. Now, I'm using Laravel 10 here. If you're using Laravel 11, what you'll find is that your config folder will be empty.
08:03
What you'll probably want to do, if you are using a later version of Laravel, is say phpArtisan publish config or config publish, something like that.
08:13
It will be in the documentation. So it will be something like publish config or config publish. And then it will be the name of the config file
08:22
that you want to publish. Now, in this case, we want the services config file. So the services config file is where all of these keys are going to go in.
08:30
So if you are using a later version of Laravel, you want to make sure that you have access to this services config. And this is where everything is going to go.
08:38
OK, so let's come down. You can see we've already got a couple of services in here that aren't related to social authentication. But what we can now do is go ahead and create out an array
08:46
specifically for Twitter. So what do we need to add in here? Well, the first thing that we need is a client ID. So we're going to go ahead and put that in there at some point.
08:55
And we need a client secret as well. Now, we want to be really careful about where we store these. We don't want to just put them directly into our config.
09:03
Ideally, these will go in our EMV file like the others we see here. And we'll read them directly from here. So I'm going to go ahead and create out an x underscore
09:12
client ID value inside of my EMV file. And I'm going to do the same for the secret here as well. So let's create both of these. And then we'll just go ahead and copy and paste
09:23
the ID and the secret over. Now, I'm pretty sure, at least at the time of recording, the authentication tokens for our access token and secret don't actually work.
09:33
And we need to use our API key and secret. So I'm going to go ahead and regenerate these. And I'm going to copy these values over to here. Again, the services that you are implementing
09:44
will have different ways of working. So you just want to go ahead and experiment with them. OK, so I'm going to go ahead and paste both of these into here. And then I'm going to reference these over here
09:53
with our EMV helper. So we've got x client ID and, of course, our x client secret. So once they're added into there, Laravel Socialite will automatically
10:04
look these up within this config file. OK, so yeah, I've saved them. Let's go back over to our app. And we will try and click on this link
10:13
again and see what happens. OK, so we've got an undefined array key redirect. This is really important, because when we authenticate with OAuth, we need
10:22
to tell the service that we're authenticating with where to redirect back to. So we need to go ahead and add this in here as well. So the redirect here is pretty much just
10:32
going to be the root name of our app. So in this case, it's laravelsocialite.test. And then it's going to be a route that we define in our application.
10:41
So for now, let's go ahead and just implement this route directly in here. And then I'm going to show you how to do this directly within your config
10:47
if you need to very easily change it. OK, so let's go and create our new route. So we're going to say auth.redirect. We don't actually have this at the moment,
10:56
but we'll go ahead and roll with this. Let's go and create a route for this. So when we do come back from Twitter, this does actually work.
11:03
So let's go and create our new route for this. In fact, we'll call this callback. That kind of makes sense. So auth callback, and we'll call this auth and callback.
11:13
And of course, we'll need to generate out a new controller for this as well. So let's say auth callback controller. And of course, you could put these all in one controller
11:21
if you want to do. OK, so that's not going to work just because we need to comment that out. Let's try that one more time.
11:27
And let's uncomment this, and let's go over to our web routes and implement that auth callback controller. OK, so let's just really quickly recap before we go ahead and get this working.
11:38
So we've got an auth index controller, which clicks through to our auth redirect controller. It chooses the service, and then it redirects us over to the actual service
11:46
using that generated URL. Then when we come back, we hit this, which will allow us to extract the information from that user we get back.
11:54
So let's go and just implement a invoke magic method in here just to get this working. And then we'll go ahead and click it again. So if we go over, it looks like at the moment
12:06
we can't really do this. OK, so let's actually take this and put this inside of an env variable. So we'll say x redirect URL.
12:16
And let's go ahead and add this directly in here. So x redirect URL is going to be the base route of our app. So what we can actually do in here is take one of these, pop it in there, and we can reference our app URL.
12:30
So let's go ahead and do that. And then we know it's going to be auth slash callback. So that's the route that we're going through. So it just saves us having to duplicate our app URL.
12:40
OK, let's try this out again, give it a refresh, and let's see. So I'm going to click sign in with x. And OK, so we've got an error here
12:47
when getting temporary credentials. So let's go and try these other credentials here and see if these work. So let's grab this access token.
12:57
And let's grab this access token secret. And let's try this. So let's go back. It's just about experimenting with each service
13:04
and see what it requires. OK, so we've got an error here. This is probably just something to do with the way we've set our app up.
13:10
And yeah, we've got this user authentication settings. So let's go over here and set these. So this kind of ties into what we're doing with Socialite where we need to choose the permissions
13:20
for each OAuth app that we are authenticating with to tell us what we want to get back. So in this case, we've got the ability to read tweets and profile information, read and post tweets.
13:31
Because we're just dealing with social authentication here, we just need to read this data. Now, we do want to request an email address from the users. So we're going to go ahead and turn that on.
13:41
And we'll just say web app here. And let's give the callback URL and the redirect URL. So we know that it's just going to be our base app URL here. And it's going to be auth and callback.
13:54
And let's go over and just give our app URL here. And we do, in this case, need to give the terms of service and the privacy policy because we're collecting the email address from the user.
14:07
So I'm just going to go ahead and paste these over for the CodeCourse website since we do need to use these. And we're pretty much done. So again, each service has different requirements.
14:17
And you'll want to go ahead and just set these up how you need. OK, so now that we've done that, we should be OK. Let's go back over to our home page, hit Log In, and hit Sign In with X.
14:27
And as long as we've done everything correctly, which, like I've said, varies from service to service, we should see something like this. So the user will be able to see all of the permissions
14:37
that you've given when you've set this up. And of course, we can click Authorize App. So by clicking Authorize App, this will add this to the user's account.
14:44
So next time we redirect to it, we won't see this same page. And it will redirect us over to our application because all of this stuff is going to be in the redirect URL. So let's hit Authorize App.
14:56
And sure enough, you can see we've gone back to our application. So that is pretty much it. There's a lot to take in here, especially if you are new.
15:05
So let's just go and do a really quick recap over this once more if nothing made sense. OK, so let's go over to our web routes because that's a good place to start.
15:15
We first of all created out the URL that the user will land on when they want to authenticate. That redirects over to this controller, which goes ahead and selects the driver, in this case,
15:26
Twitter or X, and generates out the URL needed to redirect over to the application. Now, what we also did was over in our config and services added everything that we need to send over to Twitter
15:39
to actually hook this up to the app that we created on Twitter plus the redirect URL for when we come back. Now, when we do come back, we come back
15:47
to this controller, which is where we're going to start to extract the user's information and create a user account with everything we get back from Twitter.
15:56
So let's take a break. And we'll go over to the next episode and look at how we can now extract all of this information for the user.
12 episodes•1 hr 4 mins•1 year ago
Overview
Need to add social authentication to your Laravel apps? It’s almost zero effort using Laravel Socialite.
We start with the basics, add authentication with one provider, then use a design pattern to make adding additional services a breeze.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!