Laravel UI

Note: Please do not try to combine the Laravel Jetstream and Laravel UI. You can only use one of them.

While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.

The Bootstrap and Vue scaffolding provided by Laravel is located in the laravel/ui Composer package, which may be installed using Composer:

      
        composer require laravel/ui:^3.0
      
    

Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui. Note: We have already installed bootstrap scaffolding and provided in the package with our UI integrated on top of it. You can access those pages on following Routes:

  • /login
  • /register
  • /password/reset
Artisan commands to generate scaffolding:

      
// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
      
    
We have already installed bootstrap scaffolding and provided in the package with our UI integrated on top of it. You can find the view pages into views/auth/ .

Authenticating

Now that you have routes and views setup for the included authentication controllers, you are ready to register and authenticate new users for your application! You may access your application in a browser since the authentication controllers already contain the logic (via their traits) to authenticate existing users and store new users in the database.

Path Customization

When a user is successfully authenticated, they will be redirected to the /home URI. You can customize the post-authentication redirect path using the HOME constant defined in your RouteServiceProvider:

      
        public const HOME = '/home';
      
    

If you need more robust customization of the response returned when a user is authenticated, Laravel provides an empty authenticated(Request $request, $user) method within the AuthenticatesUsers trait. This trait is used by the LoginController class that is installed into your application when using the laravel/ui package. Therefore, you can define your own authenticated method within the LoginController class:

      
        /**
 * The user has been authenticated.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  mixed  $user
 * @return mixed
 */
protected function authenticated(Request $request, $user)
{
    return response([
        //
    ]);
}
      
    

Protecting Routes

Route middleware can be used to only allow authenticated users to access a given route. Laravel ships with an auth middleware, which is defined at Illuminate\Auth\Middleware\Authenticate. Since this middleware is already registered in your HTTP kernel, all you need to do is attach the middleware to a route definition:

      
Route::get('profile', function () {
    // Only authenticated users may enter...
})->middleware('auth');
      
    

If you are using controllers, you may call the middleware method from the controller's constructor instead of attaching it in the route definition directly:

      
public function __construct()
{
$this->middleware('auth');
}