Utilisez Laravel Livewire avec Laravel Fortify pour la connexion

Question

Je veux utiliser Laravel Fortify et Livewire pour créer un formulaire de connexion très simple. Je ne veux pas utiliser Jetstream car il a plus de fonctionnalités dont je n'ai pas besoin par rapport à celles dont j'ai besoin.

J'utilise Livewire dans toute mon application et j'aimerais l'utiliser pour ma page de connexion afin de fournir une validation en temps réel instantanée.

Le problème que je rencontre est que je ne peux pas soumettre le formulaire avec des valeurs si j'utilise wire:model sur les inputs.

Je ne peux pas non plus utiliser auth()->attempt() car il est détourné par Fortify.(Au moins, je pense que c'est le cas. Tout ce que je sais, c'est que lorsque je l'utilise, il retourne false)

Comment puis-je utiliser livewire avec Fortify? J'ai besoin d'envoyer les données du composant livewire à POST /login.

Voici ma configuration actuelle:

FortifyServiceProvider.php

public function boot()
    {
        Fortify::createUsersUsing(CreateNewUser::class);
        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
        Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);

        // Vues Fortify personnalisées =============================

        // Page de connexion
        Fortify::loginView(function () {
            return view('auth.login');
        });
   }

Mon auth/login.blade.php (appelle simplement les composants livewire avec le bon modèle de mise en page)

    @livewire('auth.login')

Le composant livewire livewire/auth/login.blade.php:

        Adresse e-mail

        @error('email'){{ $message }}@enderror

        Mot de passe

        @error('password'){{ $message }}@enderror

        Se souvenir de moi

        Mot de passe oublié?

        Se connecter

et mon fichier Http/Livewire/Auth/Login.php pour le composant livewire:

class Login extends Component
{
    public $email = '';
    public $password = '';
    public $remember = false;

    protected $rules = [
        'email' => 'required|email|exists:users,email',
        'password' => 'required',
    ];

    /**
     * Affiche la validation en temps réel pour le champ email
     */
    public function updatedEmail() {
        $this->validate(['email' => 'email|exists:users,email']);
    }

    /**
     * Connecte l'utilisateur lorsque le formulaire est soumis
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Support\MessageBag
     */
    public function login()
    {
        // ******* Besoin de soumettre le formulaire à Fortify ici?? ******
    }

    /**
     * Rend la vue
     * @return mixed
     */
    public function render()
    {
        return view('livewire.auth.login')
            ->layout('layouts.auth');
    }
}

Answer 1

class Login extends Component
{
  public $email = '';
  public $password = '';
......

Tout d'abord, selon la documentation de Livewire, les informations sensibles (telles que les mots de passe) NE DOIVENT PAS être utilisées en tant que propriétés publiques dans les composants Livewire. Par conséquent, vous devriez réfléchir à deux fois avant d'utiliser Livewire avec une authentification utilisateur.

protected $rules = [
  'email' => 'required|email|exists:users,email',
  'password' => 'required',
];

Ensuite, dans les règles de validation, vous utilisez exists:user,email qui valide en temps réel si un e-mail est dans la base de données. Je déconseillerais d'utiliser cette validation avec la règle de validation en temps réel Livewire dans les systèmes de production car elle pourrait facilement être utilisée par un acteur malveillant pour extraire la liste des e-mails des utilisateurs de votre système.

Cela étant dit, il existe des moyens pour vous authentifier (mais sans utiliser Fortify) à l'intérieur de votre fonction de connexion. Par exemple:

class LoginForm extends Component
{
public $email = '';
public $password = '';
public $remember = false;

protected $rules = [
    'email' => 'required|email|exists:users,email',
    'password' => 'required',
];

/*

Parfois, il est utile de valider un champ de formulaire à mesure qu'un utilisateur tape dedans. Livewire rend la validation "en temps réel" simple avec la méthode $this->validateOnly().

Pour valider un champ d'entrée après chaque mise à jour, nous pouvons utiliser le crochet mis à jour de Livewire:

 */
public function updated($propertyName)
{
    $this->validateOnly($propertyName);
}

public function render()
{
    return view('livewire.loginForm');
}

public function login()
{
    $this->validate();

    // L'exécution ne parvient pas ici si la validation échoue.

    $email = $this->email;
    $password = $this->password;
    $credentials = ['email'=>$email, 'password'=>$password];

    if (Auth::attempt($credentials)) {
        // Authentification réussie
    }

    else{
        // Échec de l'authentification
    }
}

}

Encore une fois, en utilisant cette méthode, vous n'utilisez que Fortify pour récupérer la page de connexion ce qui n'est certainement pas l'utilisation prévue de Fortify. Par conséquent, après avoir pris en compte tous les problèmes, je pense qu'il est préférable d'éviter d'utiliser Livewire pour le processus d'authentification des utilisateurs.

Answer 2

J'ai essayé d'installer un nouveau projet avec seulement Livewire et Fortify pour simuler votre scénario. Après une longue réflexion, voici mes conclusions :

1. C'est la partie la plus confuse quand j'ai vu la méthode login() et j'ai commencé à penser que cette méthode gérerait l'authentification ou la transmettrait ou quelque chose du genre.

2. Fortify utilise ses propres routes, donc vous ne pouvez pas effectuer l'authentification sans envoyer vos données de formulaire vers le point de terminaison "/login".

3. Votre composant Livewire vous aidera à afficher les erreurs de validation en temps réel, (vous pouvez peut-être désactiver le bouton de soumission du formulaire jusqu'à ce que la validation réussisse).

4. Laissez Fortify gérer l'authentification pour vous et définissez votre formulaire pour être soumis.

5. Si vous avez besoin de personnaliser le processus d'authentification, Fortify vous propose cette fonctionnalité facilement, consultez la documentation.

6. Si vous insistez pour utiliser la méthode login(), je pense que vous pouvez créer une requête POST PHP pour envoyer les champs, mais je ne vois pas l'intérêt de le faire.

J'espère que cela vous donnera une idée.