Prerequisites: Before we begin, ensure you have the following prerequisites in place:
- A working installation of Laravel 10.
- Familiarity with the concepts of authentication and authorization.
Setting Up Jetstream with Inertia.js:
Install Laravel Jetstream
Start by creating a new Laravel 10 project and installing Jetstream. Open your terminal or command prompt and run the following command:
composer create-project laravel/laravel my-project cd my-project composer require laravel/jetstream
Once Jetstream is installed, scaffold the authentication components using the following command:
php artisan jetstream:install inertia
Configure the Database
Before proceeding, ensure your database connection details are correctly configured in the
.env file of your Laravel project. Create the necessary database tables by running the migrations:
php artisan migrate
Compile the Assets
Next, compile the assets using Laravel Mix. Run the following commands in your terminal:
npm install npm run dev
Start the Development Server
You can now start the Laravel development server to see your application in action. Execute the following command:
php artisan serve
With Jetstream and Inertia.js set up, let's explore the process of authenticating users.
1. Registering Users: By default, Jetstream provides a user registration form. To access it, visit the following URL in your application:
http://localhost:8000/register. Fill in the required details and submit the form to create a new user.
2. Logging In: To log in, navigate to
http://localhost:8000/login and provide your credentials. Jetstream handles the authentication process and redirects you to the home page upon successful login.
3. Protecting Routes: Jetstream automatically provides middleware to protect routes from unauthorized access. You can use the
auth middleware to ensure only authenticated users can access specific routes. Simply add the middleware to the desired routes or controllers.
4. Logging Out: Jetstream also provides a built-in logout feature. You can log out by visiting
http://localhost:8000/logout or by adding a logout button to your application.
Customizing Authentication Views
Jetstream allows you to customize authentication views to match the look and feel of your application.
1. View Files: The Jetstream authentication views are located in the
resources/views/auth directory. These views are written using Inertia.js syntax and provide a solid foundation for customization.
2. Modifying Views: To modify the views, locate the appropriate file and update it according to your requirements. You can customize the layout, styling, form fields, and more.
By following the steps outlined in this article, you can easily scaffold authentication using Jetstream with Inertia.js in Laravel 10. We covered setting up Jetstream, registering and authenticating users, protecting routes, and customizing authentication views. Laravel's Jetstream and Inertia.js provide a powerful combination for building secure and user-friendly applications.
For more advanced features and customization options, make sure to refer to the official Laravel and Jetstream documentation. Happy coding!