Installing a ready-made solution for authentication and authorization in php: Laravel Breeze, Inertia.js , Vue 3

Let's say we need to create a kind of framework for our future application with an already implemented authentication and authorization system in php, where a certain functionality in the project will be available for each confirmed user based on certain roles assigned to him later. This will allow you to build logic for each category of superadmin, admin, client, etc. during the development process.

That is, for example, for admins to draw their interface with the appropriate functionality, and for clients their own personal account with their own functions.

The best option for a quick solution to this problem is a starter kit based on the Laravel php framework and its Breeze ecosystem, as well as Inertia.js , Vue 3 and Tailwind CSS , which will quickly create a flexible access control platform for all registered users, as well as minimize the time for initial project configuration.

The advantages of such a stack:

1. Modern technologies

Laravel: This is one of the most popular PHP frameworks, which is actively used to create robust web applications. It offers a variety of tools and libraries to simplify development.

Inertia.js: Allows you to create single-page applications (SPA) using familiar server-side development methods, which makes it convenient for developers familiar with Laravel.

Vue 3: The modern version of Vue.js with new functionality (for example, script setup), which simplifies component development and improves performance.

Tailwind CSS: This CSS framework is finding more and more fans due to its flexibility and convenience in styling applications, allowing you to quickly create adaptive interfaces.

2. Minimum setting

Using Laravel Breeze for authentication and user management minimizes the time for initial project setup. This is especially true for startups and small teams that need to enter the market quickly.

3. Current development practices

The project corresponds to modern development practices, such as:

SPA (single-page applications): JavaScript does most of the work on the client, which makes interaction with the server faster and more responsive.

Responsive Design: Tailwind CSS makes the process of creating responsive interfaces easier and more efficient.

Installing the platform for the project

Technologies

• Laravel Breeze - easy authentication on Laravel
• Inertia.js - for communication between the client and the server
• Vue 3 using script setup
• TailwindCSS is a utilitarian CSS framework

Step 1: Installing Laravel

First, you need to install Laravel. Make sure that you already have installed Composer, which is a package manager for PHP. If you don't know how to install it, visit Composer's official website.

Now open the terminal and run the following command:

composer create-project --prefer-dist laravel/laravel my-project

Replace my-project with the name of your project. This will create a new folder with Laravel installed.

Step 2: Configuring the database

Now create a database in your database management system, for example, in MySQL. You can do this through the phpMyAdmin interface or using the command:

CREATE DATABASE your_database_name;

After creating the database, open the .env file in the root of your project and change the following lines, specifying your database data:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password
    

Replace your_database_name, your_database_user, and your_database_password with your own values.

Step 3: Installing Laravel Breeze

Laravel Breeze is a simple solution to implement authentication. Install it by running the following commands in the terminal:

composer require laravel/breeze --dev
php artisan breeze:install
    

These commands will install Breeze and create the necessary routes and views for authentication.

Step 4: Install Vue and Inertia.js

Now install Vue and Inertia.js . Make sure that the Node.you have js and npm installed. After that, run the following commands:

npm install
npm install vue@next
npm install @inertiajs/inertia @inertiajs/inertia-vue3
npm install -D tailwindcss
    

These commands install all the necessary dependencies to work with Vue and Inertia.

Step 5: Setting up TailwindCSS

Create a configuration file for TailwindCSS with the command:

npx tailwindcss init

After that, open the filetailwind.config.js and add the paths to the files of your project:

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
    

Step 6: Connecting TailwindCSS

Create a style file, for example resources/css/app.css, and add to it:

@tailwind base;
@tailwind components;
@tailwind utilities;
    

Step 7: Compile your CSS

Now you need to compile your CSS using TailwindCSS. To do this, run the following command:

npx tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --watch

This command will track changes in your app.css and update the compiled public/css/app.css file in real time.

Step 8: Setting up Inertia.js in your project

Now create a file to initialize your application with Vue and Inertia.js . Open the fileresources/js/app.js and add the following code:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import '../css/app.css';

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

InertiaProgress.init();
    

This code creates a new Vue application and connects Inertia.js, allowing you to use it to route and display pages. InertiaProgress.init() is responsible for displaying the loading indicator when navigating between pages.

Step 9: Create routes and views for authentication

Now let's create routes and views for authentication. Open the fileroutes/web.php and add the following code:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index'])->name('home');
    
Route::middleware(['auth'])->group(function () {
// Protected routes for registered users
});
    

Now create a controller to handle routes. Run the command:

php artisan make:controller HomeController

Open the fileapp/Http/Controllers/HomeController.php and add the following code:

<?php
namespace App\Http\Controllers;

use Inertia\Inertia;

class HomeController extends Controller
{
    public function index()
    {
        return Inertia::render('Home');
    }
}
    

This controller is responsible for displaying the main page.

Step 10: Create a Home Page

Now create a Vue file for the main page using the following path: resources/js/Pages/Home.vue and add the following code to it:

<template>
  <div>
    lt;h1>Welcome to the main page!</h1>
    <p>This is your first page using Inertia and Vue.</p>
  </div>
</template>

<script setup>
// The logic of the component may be located here
</script>

<style scoped>
/* Component styles (if necessary) */
</style>

Step 11: Start Migrations

Now you need to run migrations to create the necessary tables in the database. In the terminal, run the following command:

php artisan migrate

This command will create tables for users that are required for authentication in your application.

Step 12: Launch the application

Now you are ready to launch your application. To do this, run the command:

php artisan serve

After that, open your browser and go to http://localhost:8000 . You should see your home page.

Step 13: Authentication verification

Now, to test the authentication, you need to register a new user and log in. Laravel Breeze automatically creates pages for registration and login.

Open your browser and go to http://localhost:8000/register to register a new user. Fill in the fields with your name, email address and password, and then click the "Register" button.

After successful registration, you will be redirected to the main page. Try also going to http://localhost:8000/login to log in with a previously registered user.

Later, on our already installed platform, by migrating the additional role field to the users table and the facade Gate we implement a mechanism for checking all users for their assigned roles. This will allow us to build a certain logic in our CRM system during development.