Laravel 10 brings a wealth of features for web application development, with authentication being a core aspect. One of the most powerful ways to implement authentication in Laravel is by using Jetstream, a feature-packed toolkit that makes handling user authentication, registration, email verification, and more, a breeze.

In this blog, we’ll walk you through setting up authentication in Laravel 10 using Jetstream.

What is Laravel Jetstream?

Laravel Jetstream is a modern, application scaffolding system that provides a complete solution for handling authentication, user profiles, team management, and more. It comes with a variety of features like:

  • Login and Registration
  • Two-Factor Authentication
  • Email Verification
  • Session Management
  • API via Laravel Sanctum
  • Team Management (optional)

Jetstream integrates easily with Tailwind CSS for UI and offers two options for frontend scaffolding:

  • Livewire: For those comfortable with server-side rendering.
  • Inertia.js: For a more SPA-like experience using Vue.js.

Steps for Laravel 10 Authentication using Jetstream:

Step 1: Create a New Laravel Project

First, create a new Laravel project using Composer:

Navigate to your project directory:

Step 2: Install Jetstream

Next, we need to install Jetstream. You can choose either Livewire or Inertia.js as your stack.

For this tutorial, we’ll use Livewire.

Run the following command:

Once installed, scaffold the Jetstream application with Livewire:

Step 3: Install NPM Dependencies

After Jetstream is installed, you’ll need to install the JavaScript dependencies and compile your assets.

Run the following commands:

Step 4: Migrate the Database

Before you can use authentication, you need to migrate the database. First, set up your .env file with your database credentials. Then, run:

This command will create the necessary tables for authentication, including users, password resets, and personal access tokens.

Step 5: Configure Authentication

Jetstream comes with a complete authentication system. You can customize the default behavior by modifying the generated files in the app/Http/Controllers/Auth directory.

For example, to customize the registration process, you can edit the RegisteredUserController.php.

Step 6: Setting Up Routes

Jetstream takes care of routing for authentication. You can find the routes in the routes/web.php file. Here’s a brief overview of the default routes available:

  • /register – Registration page
  • /login – Login page
  • /forgot-password – Password reset request page
  • /reset-password – Password reset form

You can access these routes by visiting them in your web browser.

Step 7: Using Authentication Features

Registration

To allow users to register, navigate to /register in your browser. Fill out the form, and upon submission, a new user will be created in your database.

Login

To log in, go to /login. After entering the credentials, you’ll be redirected to the dashboard.

Password Reset

To test the password reset functionality, navigate to /forgot-password and follow the instructions to reset your password.

Step 8: Adding Additional Features

You can extend the Jetstream functionality by adding:

  • Profile Management: Users can update their profiles, including names and email addresses.
  • Two-Factor Authentication: Enhance security by enabling 2FA for user accounts.
  • API Support: Use Laravel Sanctum to manage API tokens for authenticated users.

To enable two-factor authentication, update the user model to implement the MustVerifyEmail interface and add the necessary routes and views.

Conclusion

Laravel 10’s Jetstream provides a seamless and comprehensive authentication solution, complete with essential features like two-factor authentication, session management, and email verification. Whether you’re building a simple user authentication system or a complex multi-user application with teams, Jetstream has the tools to get you up and running quickly.

With this guide, you should now have a working authentication system using Jetstream in your Laravel 10 application.

Happy coding!

Click to rate this post!
[Total: 0 Average: 0]