Laravel Daily
Home Topics

How to Add Passwordless Authentication in Laravel: Magic Link

Updated: Aug 03, 2023

Passwordless authentication is an authentication process that eliminates the need for traditional passwords. Instead, it relies on alternative authentication methods like one-time codes, magic links, or biometrics. This approach offers a more secure and user-friendly way of logging in to applications. Now, let's delve into the detailed steps to add passwordless authentication in Laravel.

Step 1: Set Up a Fresh Laravel Project

To get started, create a new Laravel project or use an existing one. If you're creating a new project, open your terminal and run the following command:

composer create-project --prefer-dist laravel/laravel passwordless-auth

This will set up a new Laravel project named "passwordless-auth."

Step 2: Install Laravel UI Package

Next, install the Laravel UI package, which provides the necessary scaffolding for authentication:

composer require laravel/ui
php artisan ui bootstrap --auth

This command will install the Laravel UI package and generate the authentication scaffolding using the Bootstrap front-end framework.

Step 3: Install and Configure Laravel Magic Link Package

To enable passwordless authentication using magic links, we need to install a Laravel package. We'll use "laravel/socialite" to handle social authentication, which includes magic links. Run the following command:

composer require laravel/socialite

Once installed, add the socialite service provider to your config/app.php file:

'providers' => [
    // ...Laravel\Socialite\SocialiteServiceProvider::class,
],

Step 4: Implement Magic Link Authentication

Now, we'll implement the magic link authentication. First, create a new controller using the following command:

php artisan make:controller Auth/MagicLinkController

Then, open the newly created controller and add the following code:

namespace App\Http\Controllers\Auth;

use App<span class="hljs-title">Http<span class="hljs-title">Controllers<span class="hljs-title">Controller;
use Illuminate<span class="hljs-title">Http<span class="hljs-title">Request;
use Illuminate<span class="hljs-title">Support<span class="hljs-title">Facades<span class="hljs-title">Auth;
use Laravel<span class="hljs-title">Socialite<span class="hljs-title">Facades<span class="hljs-title">Socialite;


class MagicLinkController extends Controller
{
public function sendMagicLink(Request $request)
{
// Your logic to send the magic link
}


<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleMagicLinkCallback</span><span class="hljs-params">(Request $request)</span>
</span>{
    <span class="hljs-comment">// Your logic to handle the magic link callback</span>
}



}

Step 5: Create Routes

Now, create the routes for sending the magic link and handling the callback. In your routes/web.php file, add the following code:

use App<span class="hljs-title">Http<span class="hljs-title">Controllers<span class="hljs-title">Auth<span class="hljs-title">MagicLinkController;


// Sending the magic link
Route::post('/send-magic-link', [MagicLinkController::class, 'sendMagicLink'])->name('send.magic.link');


// Handling the magic link callback
Route::get('/magic-link-callback', [MagicLinkController::class, 'handleMagicLinkCallback'])->name('magic.link.callback');

Step 6: Set Up the Database

Create a migration for the users table, if you don't already have one:

php artisan make:migration create_users_table --create=users

In the migration file, add the necessary columns for the magic link authentication:

// ...


public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->string('magic_link_token')->nullable();
$table->timestamp('magic_link_sent_at')->nullable();
$table->timestamps();
});
}


// ...

Step 7: Update User Model

Open the User model located at app/Models/User.php and add the following code:

use Illuminate<span class="hljs-title">Notifications<span class="hljs-title">Notifiable;
use Illuminate<span class="hljs-title">Contracts<span class="hljs-title">Auth<span class="hljs-title">MustVerifyEmail;
use Illuminate<span class="hljs-title">Foundation<span class="hljs-title">Auth<span class="hljs-title">User as Authenticatable;


class User extends Authenticatable
{
use Notifiable;


<span class="hljs-comment">// ...</span>

<span class="hljs-comment">/**
 * Get the magic link token name for the model.
 *
 * <span class="hljs-doctag">@return</span> string
 */</span><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMagicLinkTokenName</span><span class="hljs-params">()</span>
</span>{
    <span class="hljs-keyword">return</span> <span class="hljs-string">'magic_link_token'</span>;
}



}

Step 8: Handle Magic Link Logic

Now, go back to the MagicLinkController and fill in the logic for sending the magic link and handling the callback. We'll use the Socialite package to create and send the magic link. Add the following code to the controller:

// ...


use Illuminate<span class="hljs-title">Support<span class="hljs-title">Facades<span class="hljs-title">Mail;
use Illuminate<span class="hljs-title">Support<span class="hljs-title">Str;


class MagicLinkController extends Controller
{
// ...


<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sendMagicLink</span><span class="hljs-params">(Request $request)</span>
</span>{
    $request-&gt;validate([<span class="hljs-string">'email'</span> =&gt; <span class="hljs-string">'required|email'</span>]);

    $user = User::where(<span class="hljs-string">'email'</span>, $request-&gt;email)-&gt;first();

    <span class="hljs-keyword">if</span> ($user) {
        $user-&gt;magic_link_token = Str::random(<span class="hljs-number">32</span>);
        $user-&gt;magic_link_sent_at = now();
        $user-&gt;save();

        Mail::to($user-&gt;email)-&gt;send(<span class="hljs-keyword">new</span> MagicLinkMail($user));

        <span class="hljs-keyword">return</span> redirect()-&gt;route(<span class="hljs-string">'login'</span>)-&gt;with(<span class="hljs-string">'status'</span>, <span class="hljs-string">'A magic link has been sent to your email address.'</span>);
    }

    <span class="hljs-keyword">return</span> redirect()-&gt;route(<span class="hljs-string">'login'</span>)-&gt;withErrors([<span class="hljs-string">'email'</span> =&gt; <span class="hljs-string">'User not found.'</span>]);
}

<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleMagicLinkCallback</span><span class="hljs-params">(Request $request)</span>
</span>{
    $user = User::where(<span class="hljs-string">'magic_link_token'</span>, $request-&gt;query(<span class="hljs-string">'token'</span>))
        -&gt;where(<span class="hljs-string">'magic_link_sent_at'</span>, <span class="hljs-string">'&gt;='</span>, now()-&gt;subMinutes(<span class="hljs-number">30</span>))
        -&gt;first();

    <span class="hljs-keyword">if</span> ($user) {
        Auth::login($user);

        <span class="hljs-keyword">return</span> redirect()-&gt;route(<span class="hljs-string">'home'</span>);
    }

    <span class="hljs-keyword">return</span> redirect()-&gt;route(<span class="hljs-string">'login'</span>)-&gt;withErrors([<span class="hljs-string">'email'</span> =&gt; <span class="hljs-string">'Invalid or expired magic link.'</span>]);
}



}

Step 9: Create Magic Link Email

We need to create an email template for sending the magic link. Laravel provides an easy way to send emails using Mailables. Run the following command to create a new mailable:

php artisan make:mail MagicLinkMail

Then, open the new mail file at app/Mail/MagicLinkMail.php and update the build method:

use Illuminate<span class="hljs-title">Mail<span class="hljs-title">Mailable;
use Illuminate<span class="hljs-title">Queue<span class="hljs-title">SerializesModels;


class MagicLinkMail extends Mailable
{
use Queueable, SerializesModels;


<span class="hljs-keyword">public</span> $user;

<span class="hljs-comment">/**
 * Create a new message instance.
 *
 * <span class="hljs-doctag">@param</span>  User  $user
 * <span class="hljs-doctag">@return</span> void
 */</span><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__construct</span><span class="hljs-params">(User $user)</span>
</span>{
    <span class="hljs-keyword">$this</span>-&gt;user = $user;
}

<span class="hljs-comment">/**
 * Build the message.
 *
 * <span class="hljs-doctag">@return</span> $this
 */</span><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">build</span><span class="hljs-params">()</span>
</span>{
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>-&gt;view(<span class="hljs-string">'emails.magic-link'</span>)
        -&gt;subject(<span class="hljs-string">'Your Magic Link for Laravel App'</span>)
        -&gt;with([<span class="hljs-string">'user'</span> =&gt; <span class="hljs-keyword">$this</span>-&gt;user]);
}



}

Step 10: Create Magic Link Email Template

Now, create the email template for the magic link. In the resources/views/emails directory, create a new file named magic-link.blade.php with the following content:

<!DOCTYPE html>
<html>
<head><title>Laravel Magic Link</title>
</head>
<body>
<h1>Hello {{ $user->name }},</h1>
   <p>Click on the link below to log in to your account:</p>
   <a href="{{ route('magic.link.callback', ['token' => $user->magic_link_token]) }}">
Log In
   </a>
</body>
</html>

Step 11: Test the Magic Link Authentication

Before deploying the magic link authentication to your production environment, thoroughly test the process in your development environment. Ensure that emails are being sent correctly and that users can log in seamlessly using the magic link.

Conclusion

In conclusion, passwordless authentication is a modern and secure way to enhance user authentication in Laravel applications. By following the steps outlined in this guide, you can successfully implement passwordless authentication using magic links in your Laravel project. Remember to prioritize security, thoroughly test the authentication process, and keep your application up to date with the latest Laravel advancements.

Adding passwordless authentication will not only improve your application's security but also enhance the user experience, making it a win-win for both developers and end-users.

Tutorial Package Freelancing