Laravel 10 - Jetstream Auth
Laravel 10 - Jetstream Auth
In this tutorial, we will implement Jetstream Authentication in Laravel 10. Jetstream offers useful features like login, registration, email verification, and two-factor authentication.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk you through setting up a complete authentication system in Laravel 10 using Jetstream. You’ll start by creating a new or using an existing Laravel project, then install the Jetstream package and choose your preferred frontend stack, Livewire for Blade-based interfaces or Inertia.js for a modern Vue, powered setup. Next, you’ll configure your database and run migrations to generate the necessary tables, followed by installing frontend dependencies and running the Vite development server. Finally, you’ll launch the Laravel development server and test the built-in authentication routes, including login, register, password reset, and email verification. By the end of this tutorial, you’ll have a clean, modern authentication system up and running, ready to be customized for your application.
Step # 1 : Create a Laravel 10 Project.
Let’s begin by setting up your Laravel 10 project. If you're working on an existing project, feel free to skip this step. But if you're starting fresh, here’s how to get a clean Laravel 10 installation ready. If Laravel is installed globally on your system, you can run.
laravel new Jetstream
Or, if you're using Composer, which is widely used.
composer create-project laravel/laravel --prefer-dist Jetstream
This will create a new Laravel 10 project named Jetstream. Starting with a fresh installation ensures a clean environment that's easier to work with, especially when testing or building out new features. It helps avoid conflicts and keeps your codebase well-organized from the beginning.
Step # 2 : Access the project.
Once the project is created, the next step is to navigate into your Laravel project's directory. Open a terminal window (such as Git Bash, Command Prompt, or your preferred terminal), and run the following command to move into the project folder.
cd c:xampp/htdocs/Jetstream
This command takes you to the root of your Laravel application, where you’ll be running most of the Artisan commands and setting up your project’s features.
Step # 3 : Install the Jetstream Package.
Jetstream is an official Laravel starter kit that provides a modern and robust scaffolding setup for your application. It comes with features like authentication, registration, email verification, two-factor authentication, session management, and optional team support, helping you build production-ready apps faster.
composer require laravel/Jetstream
This command pulls in the Jetstream package via Composer and makes it available for scaffolding your frontend and authentication system. Once installed, you’ll be able to choose between Livewire or Inertia.js as your preferred frontend stack, depending on how you want to structure your UI.
Step # 4 : Install Jetstream with Your Preferred Stack.
After requiring the Jetstream package, the next step is to install it using one of the available frontend stacks, Livewire or Inertia.js. Jetstream gives you the flexibility to choose how you want to build your user interface, whether you prefer traditional Blade templates or a more JavaScript, driven approach.
Install Jetstream with Livewire:
Livewire is a full-stack framework for Laravel that allows you to build dynamic interfaces using Blade and minimal JavaScript. It's perfect for developers who prefer staying within the Laravel ecosystem without diving deep into Vue.js or other JavaScript frameworks.
php artisan jetstream:install livewire
Install Jetstream with Inertia.js:
Inertia.js lets you build single-page applications (SPAs) using Vue (or React) without writing a full API. It's ideal if you prefer a modern JavaScript frontend experience with Laravel handling the backend.
php artisan jetstream:install inertia
Choose the stack that aligns with your workflow. If you're unsure, Livewire is often easier for those already comfortable with Laravel and Blade templates.
Step # 5 : Run Database Migrations.
With Jetstream installed, it's time to prepare your database. Laravel uses a powerful migration system that allows you to define your database schema in code and version-control it easily. To apply the default tables that come with Laravel and Jetstream (like users, password resets, and sessions), run the following Artisan command.
php artisan migrate
If the database defined in your .env file doesn’t exist, Laravel may prompt you or throw an error, depending on your setup. In many local environments, you’ll have the option to create it on the go. If not, just create the database manually using phpMyAdmin, MySQL CLI, or another database tool, then rerun the command.
Step # 6 : Install Frontend Dependencies and Run Vite.
Make sure Node.js and npm are installed on your system before running this step. Laravel uses Vite as its modern frontend build tool to compile and serve assets like CSS, JavaScript, and Vue (if you're using Inertia). Before launching the app in the browser, you need to install these frontend dependencies and run the Vite development server. Run the following command in your terminal.
npm install && npm run dev
Once this is done, your assets (like styles and scripts) will be compiled, and your Jetstream UI will be fully functional in the browser.
Step # 7 : Start the Laravel Development Server.
Now that everything is set up, it’s time to run your Laravel application and see it in action. Open a new terminal window or tab (you’ll need to keep the Vite server running in the first one), and start the Laravel development server using this command.
php artisan serve
Once the server is up and running, you can explore Jetstream's built-in authentication system by visiting the following URLs in your browser.
- Login Page: http://localhost:8000/login – Where users can log in.
- Register Page: http://localhost:8000/register – Allows new users to sign up.
- Forgot Password Page: http://localhost:8000/forgot-password – Lets users reset their password.
- Email Verification Page: http://localhost:8000/email/verify – Used to confirm a user's email after registration.
These routes are fully functional out of the box with Jetstream, giving you a complete authentication system ready to customize and build on.
Conclusion
By following this step-by-step guide, you’ve successfully set up Laravel Jetstream in a Laravel 10 application with a fully functional authentication system. From installing the Jetstream package and selecting your preferred stack to configuring the database, compiling frontend assets with Vite, and running the development server, you now have a production ready starter kit that includes login, registration, password reset, and email verification out of the box. Jetstream streamlines the authentication setup process, saving development time while providing a modern and secure foundation. Whether you chose Livewire or Inertia.js, your Laravel project is now equipped with a powerful, extensible user management system ready to be customized for your application’s needs.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments