Passwordless Authentication with Laravel
This episode is for members only

Sign up to access "Passwordless Authentication with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
04. The magic login link email

Episodes

0%
Your progress
  • Total: 58m
  • Played: 0m
  • Remaining: 58m
Join or sign in to track your progress

Transcript

00:00
Right, so let's go ahead and actually get this email sent to the user. And we're going to have this link through to a login controller.
00:07
We're not actually going to build the functionality out for that just yet. But this will mean that we have pretty much everything hooked up. Now, before we start, before we start sending email out, you're going to need some way to locally test your emails.
00:19
I'm using Hello, which is a piece of software that basically just sits on your local machine and allows you to receive emails. And I've gone ahead and hooked that up over in my EMV as well. But you can, if you don't have any solution for this,
00:32
just set the mail mailer to log that will go ahead and log everything to your Laravel log file, which you'll find just here in storage and logs. And you can go ahead and see the email that way. So either way, you can still get the email contents.
00:46
OK, so of course, we want to go ahead and generate our email. Before we do that, let's create out this login controller, which will deal with authorizing this request. So we are going to go ahead and create our controller.
00:59
This is going to be our first controller that we create. And we're just going to call this login controller. Just keep this super simple. And let's head over to the login controller.
01:09
And inside of here, let's just create out an invoke magic method. And we'll just do nothing at the moment. We'll just die down on login. We need to add some middleware to this a little bit later as well
01:19
when we get to signed requests, which is incredibly important for security. But we'll do that afterwards. So over in root and web, let's go ahead and register out this root. So this is going to be a get root.
01:31
We are, of course, going to click through to this link and that's just going to be auth login. And let's just put session on the end. Of course, you can choose whatever you want here.
01:39
That's going to hook up to the login controller. And we're pretty much done. Now, we need a way to identify who is trying to authenticate. What I'm going to do is actually get rid of that auth slash login.
01:50
We'll just keep this as auth session. And in here, we want to take in a user. Now, that can be either by their ID. It could be by their email or a little bit later.
01:59
If you wanted to switch this out, you could put the email within the query string. That's probably a better option. But let's make this as simple as possible for now. So what we're going to do is accept in a URL here
02:10
with the email in the query string or the ID in the query string. It doesn't really matter. So over in the login controller, that means that we're going to accept in a user with root model binding, and we could actually test that out as well.
02:24
By just dying and dumping out the user alongside the login text. OK, so now we've got the root. Let's go and create out a mail in here. So PHP artisan make mail.
02:36
Let's go ahead and call this magic login link. Of course, it doesn't matter what you call this. And let's open up magic login link under app and mail. So let's go down to this envelope method.
02:49
The subject here can be, of course, whatever you want it to be. Let's switch this out for your magic login link. So we have something a little bit more friendly. And in terms of the content here, actually, let's go ahead
03:04
and generate out a markdown version of this. That's probably going to be a little bit better. So we have some scaffolding. So let's put this in an email directory and call it magic underscore login
03:15
underscore link. And let's go ahead and force that to overwrite it. So that's now generated our markdown for us. And let's change this over to your magic login link.
03:25
OK, so under this magic login link blade template, this is now the markdown that we can use. We've got a button here already if you're unfamiliar with mailables. And let's just change some text over.
03:37
So your magic login link. We can add some text in there if you want, but we're not going to do that. We're just going to focus on this button. So what we want to do is switch this over to use a route.
03:50
So let's go ahead and define a route out in here. And we didn't actually give us a name, but let's just pre-call this off session. And then over our routes, we can go ahead and just give this a name. So off session.
04:03
And we should be good. Now we want to send this email. We're going to sort of figure out a couple of other things we need to do here. But let's just send this email to make sure it comes through.
04:12
First of all, I'm not going to do that inside of the action because remember, the action is responsible for actually sending that email. That's the most important thing. And then we can reuse it.
04:21
So we're going to go ahead and say using the mail facade. So let's just make sure we pull that in to it needs to go to that email address because, of course, we don't know the user just yet, although you could look them up. And then we're going to go ahead and send out or queue
04:35
if you have queues enabled that magic login link email under here. So let's go ahead and pass in. We know we're going to new that up, aren't we? So let's new that up.
04:46
And that's pretty much it. We don't have any arguments to pass through to the construction just yet. So let's just leave that as it is. So we can go ahead and just test this out.
04:54
Now, let's enter our email address, hit get magic login link. And of course, missing parameter user. So let's go and actually modify our view just here. In fact, I'm going to get rid of this because at the moment
05:10
we don't have anything passed through to this. So let's just make sure the email sends. First of all, and if we head over to our mail client, there it is. So that just refreshed the page and it came through.
05:23
Let's just go through the whole process, though, and make sure this is working nicely before we start to make any changes. So there we go. That has submitted. Of course, at the moment, it's just landed on an empty blank page.
05:33
The email has come through, but we're not redirecting the user anywhere just yet. So if we just head over to our action. So let's find that login link action. Let's go down here.
05:48
And because we're working with this as a controller, we can actually return back. So it just works in exactly the same way. So as soon as we submit this through, we're then redirected back to the login page. And we can even flash a message within here as well if we wanted to.
06:03
So, for example, you could say with success and then you could say, check your email for your magic login link. And then if we go over to the template for login, we can implement the success message somewhere in here.
06:23
So let's just do that down the bottom here. So we could say if. Session success, we'll just keep this really simple for now. And in here, we'll go ahead and create our paragraph.
06:36
In here, and let's just output. That success message that we flashed and then just give this some starting so text gray 600, and you'll see now if we enter our email address. Hit this. There we go.
06:52
We get a little bit more information. And of course, that sent the email. Now we've got three of them. OK, so now that we've done this, we, of course, need to figure out
07:00
how we're going to link through under this mail and under this template. Here, actually to log the user in, how are we going to link through to that page in the most secure way we can with the details that we need? Let's cover that in the next episode.

Episode summary

In this episode, we're setting up the magic login link email feature for our application. That means when a user requests a login link, we want to send them an email with a special URL they can click to log in—super convenient!

First, we talk a bit about how you can test outgoing emails locally. You can use something like HELO on your computer, or if that's not an option, just set your mailer to log so emails get written to your log files. Either way, you'll see what the email looks like before sending it for real.

We then create a new LoginController to handle what happens when someone clicks the magic login link, and register the needed route. At this point, the controller doesn't do much; it just proves the route is hooked up.

Next up, we use Laravel's artisan command to make a new Mailable class called MagicLoginLink, customize its subject and the email markdown template, and wire up the right route for the login in the email button. We update the email template to include a button that points at our auth session route, which we'll hook up properly in future steps.

Then, we add the logic to actually send the email when requested, making sure the user sees a successful message flashed on the login page (e.g., "Check your email for your magic login link"). This wraps up the basic magic login email feature—email gets sent, user gets notified, and everything's flowing!

By the end of this episode, your app can send a magic login email and do a basic redirect on submission. Next time, we'll get into actually linking the user to a real, secure login flow via the email link.

Episode discussion

No comments, yet. Be the first!