Laravel Jetstream [In-Depth Tutorial]

This tutorial takes you through an overview of Laravel Jetstream. By the end of the tutorial, you will know how to install and configure the package to achieve authentication scaffolding. Besides, you will know to enable email verification, enable profile photo update feature and implement team management features.

It is recommended to familiarize yourself with Laravel Breeze before Jetstream because (technically) Laravel Jetstream is an upgrade of Laravel Breeze. Laravel Jetstream offers the capabilities of Laravel Breeze and some extra features. 

Some of the extra features include Two Factor Authentication, API tokens, session management, team management, and robust account management features. Besides Tailwind, it lets you use Inertia or Livewire for frontend scaffolding. 

You will also like Laravel Jetstream because it allows you to customize your application with the modern application's requirements. For instance, you can implement email verification features, profile photo, and terms and conditions during user registration.

 

Features of Laravel Jetstream

1. Authentication: Jetstream provides a complete, out-of-the-box authentication system, which includes user registration, login, password reset, and email verification. It helps developers set up a secure and robust authentication process with minimal effort.
2. User Profiles: Jetstream comes with built-in user profile management, allowing users to update their name, email, and password. This feature saves developers time by providing a ready-made solution for handling user profiles.
3. API Support: Jetstream includes built-in API token management through Laravel Sanctum. It allows developers to create, manage, and revoke API tokens for users, making it easy to build API-driven applications with secure authentication.
4. Teams: Jetstream supports team management out of the box, enabling users to create and manage teams. This feature allows users to collaborate on resources and share access within the application, making it suitable for multi-user projects.
5. Invitations: Team owners can invite new members to join their teams via email, streamlining the process of adding new users to the application. Jetstream handles invitation creation, sending, and acceptance for you.
6. Roles and Permissions: Jetstream provides a role and permission management system, allowing developers to define user roles and assign permissions to those roles. This feature makes it easy to manage user access and capabilities within the application.
7. Two-Factor Authentication (optional): Jetstream also supports optional two-factor authentication (2FA) for enhanced security. When enabled, users must provide a time-based one-time password (TOTP) generated by an authenticator app in addition to their regular password during login.
8. Account Deletion: Jetstream provides an account deletion feature, allowing users to delete their accounts and associated data from the application. This functionality is useful for meeting data privacy requirements and giving users control over their personal information.
9. Tailwind CSS and Responsive Design: Jetstream uses Tailwind CSS, a modern utility-first CSS framework, to style its components. This ensures a clean and responsive design that adapts to different screen sizes and devices.
10. Livewire or Inertia.js Integration: Jetstream allows developers to choose between two popular front-end stacks: Livewire or Inertia.js. Both options facilitate building dynamic, single-page-like applications, but they differ in their approaches and use cases. Developers can pick the one that best suits their project requirements.

 

Installation

Before installing Laravel Jetstream, ensure that you have met the following prerequisites:

1. PHP >= 7.3
2. Composer (https://getcomposer.org/)
3. Node.js and NPM (https://nodejs.org/)

Once the prerequisites are in place, follow these steps to install Laravel Jetstream:

Launch your terminal and run the following commands.

Create a new Laravel project using Composer:

// Create a new Laravel project:
laravel new laravel_jetstream

// OR use composer to create project
composer create-project --prefer-dist laravel/laravel laravel_jetstream

// Navigate to the project directory
cd laravel_jetstream

// Install Laravel Jetstream using Composer
composer require laravel/jetstream

Jetstream allows developers to choose between two front-end stacks: Livewire or Inertia.js. Based on your choice, run one of the following commands:

For Livewire:

Livewire is a full-stack framework for Laravel that allows you to build dynamic interfaces without leaving the comfort of Laravel. It provides a simple and efficient way to build modern applications by leveraging the power of Laravel's Blade templating engine.

php artisan jetstream:install livewire

For Inertia.js:

Inertia.js is a modern framework for building single-page applications using classic server-side routing and controllers. It allows you to build client-side rendered applications using Vue.js (or React) while keeping the simplicity of server-side rendering.

php artisan jetstream:install inertia

Run the following command to compile the front-end assets:

npm install && npm run dev

Lastly, run the database migrations to set up the necessary tables:

php artisan migrate

The command adds Two Factor Authentication column to the users table before creating teams, team_user, team_invitations, and sessions tables. 

Now, you can start the Laravel development server by running:

php artisan serve

Your Laravel Jetstream application is now ready for development.

 

Livewire vs Inertia.js

Livewire:

• Benefits: Easy to learn, seamless integration with Laravel and Blade, no need to write JavaScript for simple interactions, ideal for small to medium-sized projects.
• Use cases: CRUD applications, form-heavy applications, projects where developers prefer to work primarily with PHP and Blade.

Inertia.js:

• Benefits: Allows you to build single-page applications using Vue.js or React, leverages the power of modern JavaScript libraries, provides better performance for larger and more complex applications.
• Use cases: Single-page applications, projects with complex user interfaces, applications where developers prefer to work with JavaScript frameworks like Vue.js or React.

 

Folder Structure and Components

When you install Laravel Jetstream, it creates or modifies several folders and files within your Laravel application. The following are the key components of the structure:

Views:

Jetstream's views are organized within the resources/views directory. If you have published the Jetstream views using the php artisan vendor:publish --tag=jetstream-views command, you will find them in the resources/views/vendor/jetstream directory. These views are built using Blade templates and may include Livewire or Inertia.js components, depending on your chosen stack.

For Livewire, you'll find the components in the resources/views/vendor/livewire directory. For Inertia.js, you'll find Vue.js components in the resources/js/Pages directory.

Controllers:

Jetstream's controllers are located in the app/Http/Controllers directory. Some of the key controllers include:

• app/Http/Controllers/Auth: Contains authentication-related controllers like AuthenticatedSessionController, ConfirmablePasswordController, EmailVerificationNotificationController, EmailVerificationPromptController, and NewPasswordController.
• app/Http/Controllers/Profile: Contains the ProfileController for managing user profile information.
• app/Http/Controllers/Teams: Contains team-related controllers like TeamController, TeamInvitationController, TeamMemberController, and TeamUserController (if you enabled the teams feature during installation).

Livewire or Inertia.js Components:

For Livewire, you will find the component classes in the app/Http/Livewire directory. These components are responsible for managing the state and actions of the corresponding views.

For Inertia.js, you will find the Vue.js components in the resources/js/Pages directory. These components are responsible for rendering the interface and handling user interactions.

Middleware:

Jetstream includes some custom middleware, which you can find in the app/Http/Middleware directory. For example, EnsureEmailIsVerified middleware ensures that a user has a verified email address before accessing certain routes.

Models:

Jetstream adds the Team and Membership models in the app/Models directory if you enabled the teams feature during installation. These models define the structure and relationships for teams and team memberships.

Routes:

Jetstream adds routes to the routes/web.php file for the web application and the routes/api.php file for API routes. These routes define the endpoints for Jetstream's features, such as authentication, profile management, and team management.

Migrations:

Jetstream creates migration files in the database/migrations directory. These migrations define the schema for the necessary database tables, such as users, teams, and team memberships.

Configuration:

Jetstream adds a configuration file in the config directory named jetstream.php. This file contains configuration options for Jetstream, such as enabling features like teams and profile photos.

 

Registration, Enable email verification, and Login

Assume you want to register a user, verify their email address, and log them into the dashboard. You can start by enabling email verification (disabled by default) in your Laravel application. Here are the steps.

Open the config/fortify.php file. Scroll down to the features section and uncomment the email verification. 

<?php
...
    'features' => [
        ...
        Features::emailVerification(),
        ...
    ],
...

Next, let the User model implement the MustVerifyEmail contract.

<?php
...
use Illuminate\Contracts\Auth\MustVerifyEmail;
...
class User extends Authenticatable implements MustVerifyEmail
{
    //...
}

 

Now the application asks you to verify your email address during registration. 

 

After verification, you get logged in to your dashboard, from where you can manage teams or customize your profile.

 

If you attempt to access the dashboard before logging in, you will be redirected to the login page. Laravel wraps the dashboard route with Sanctum auth middleware.

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified'
])->group(function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');
});

 

Enable the Profile Photo feature

Laravel implements the profile photo feature using the HasProfilePhoto trait. The trait is added to the User model when installing Jetstream.

<?php
...
use Laravel\Jetstream\HasProfilePhoto;
...
class User extends Authenticatable
{
    ...
    use HasProfilePhoto;
    ...
}

The feature is configured in the config/jetstream.php file. Navigate to the file, then uncomment the profilePhotos feature's line inside the features array.

<?php

use Laravel\Jetstream\Features;
use Laravel\Jetstream\Http\Middleware\AuthenticateSession;

return [
...
    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(),
        // Features::api(),
        Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],
...
];

Henceforth, registered users can add and update their profile photos.

 

Additionally, you can enable Two Factor Authentication, log out of browser sessions, or delete your account.

 

Conclusion

Laravel Jetstream is a powerful application scaffolding package that simplifies building modern web applications with Laravel. It provides essential features like authentication, user profiles, API support, team management, and roles and permissions out-of-the-box. Jetstream accelerates development by reducing the need to write boilerplate code and ensures adherence to best practices. With the option to choose between Livewire or Inertia.js front-end stacks, developers can cater to different preferences and use cases. The package comes with a clean, responsive design using Tailwind CSS, which adapts well to various screen sizes and devices. By using Laravel Jetstream, developers can focus on their application's core functionality while leveraging built-in features to create secure, scalable, and robust web applications with a streamlined development process.

 

Further Reading

Laravel Jetstream