Revision history [back]

To implement looping for the login page using Breeze in Laravel 8, you can follow these steps:

Generate a new Laravel 8 project using the following command:

composer create-project --prefer-dist laravel/laravel breeze-demo
Install Breeze using the following command:

composer require laravel/breeze --dev
Generate the scaffolding for authentication using the following command:

php artisan breeze:install

Navigate to the resources/views/auth/login.blade.php file, and replace the contents with the following code:

@extends('layouts.app')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
   <div class="max-w-md w-full space-y-8">
       <div>
           <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
               Login
           </h2>
       </div>
       <form class="mt-8 space-y-6" action="{{ route('login') }}" method="POST">
           @csrf
           <div class="rounded-md shadow-sm -space-y-px">
               <div>
                   <label for="email-address" class="sr-only">Email address</label>
                   <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address">
               </div>
               <div>
                   <label for="password" class="sr-only">Password</label>
                   <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
               </div>
           </div>
           <div class="flex items-center justify-between">
               <div class="flex items-center">
                   <input id="remember_me" name="remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                   <label for="remember_me" class="ml-2 block text-sm text-gray-900">
                       Remember me
                   </label>
               </div>
               <div class="text-sm">
                   <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
                       Forgot your password?
                   </a>
               </div>
           </div>
           <div>
               <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                   <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                       <!-- Heroicon name: solid/lock-closed -->
                       <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                           <path fill-rule="evenodd" d="M2.5 8h15v8h-15V8zm5.546 5.964a2 2 0 11-3.56-1.928 2 2 0 013.56 1.928zM10 4a4 4 0 100 8 4 4 0 000-8z" clip-rule="evenodd" />
                       </svg>
                   </span>
                   Login
               </button>
           </div>
       </form>
       <div class="mt-4">
           <p class="text-center text-sm text-gray-600">
               Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up here</a>.
           </p>
       </div>
   </div>
</div>

This code is the default login form generated by Breeze. The only modification we have made is the addition of a link to the registration page at the bottom of the form. You can modify the styling of this form to suit your needs.

In the routes/web.php file, add the following route for the registration page:

Route::get('/register', function () {
   return view('auth.register');
})->name('register');

Navigate to the resources/views/auth/register.blade.php file, and replace the contents with the following code:

@extends('layouts.app')

@section('content')
   <div class="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
       <div class="max-w-md w-full space-y-8">
           <div>
               <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                   Register
               </h2>
           </div>
           <form class="mt-8 space-y-6" action="{{ route('register') }}" method="POST">
               @csrf
               <div class="rounded-md shadow-sm -space-y-px">
                   <div>
                       <label for="name" class="sr-only">Name</label>
                       <input id="name" name="name" type="text" autocomplete="name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Name">
                   </div>
                   <div>
                       <label for="email-address" class="sr-only">Email address</label>
                       <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address">
                   </div>
                   <div>
                       <label for="password" class="sr-only">Password</label>
                       <input id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
                   </div>
                   <div>
                       <label for="password_confirmation" class="sr-only">Password confirmation</label>
                       <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Confirm Password">
                   </div>
               </div>

               <div>
                   <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                       <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                           <!-- Heroicon name: solid/user-add -->
                           <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                               <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                               <path fill-rule="evenodd" d="M3 11a8 8 0 1114.155-5.12 1 1 0 11-1.504 1.312A6 6 0 105 13a1 1 0 110-2zm5-5a2 2 0 113.999-.001A2 2 0 018 6c0 .552-.448 1-1.001 1A2.002 2.002 0 018 6zm6-2a2 2 0 113.999-.001A2 2 0 0114 4zm-4 1a1 1 0 110-2 1 1 0 110 2z" clip-rule="evenodd"></path>
                           </svg>
                       </span>
                       Register
                   </button>
               </div>
           </form>
           <div class="mt-4">
               <p class="text-center text-sm text-gray-600">
                   Already have an account? <a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500">Login here</a>.
               </p>
           </div>
       </div>
   </div>
@endsection

This code is the default registration form generated by Breeze. The only modification we have made is the addition of a link to the login page at the bottom of the form. You can modify the styling of this form to suit your needs.
That's it! You now have a login page and a registration page that loop back to each other.