Laravel 10 Auth Example: A Comprehensive Guide

Laravel php framework is very popular for making the web application development very easy. Laravel 10 is released with many features and improvements which are making developers super excited.

One such feature is the new and improved authentication system in Laravel. In this article, we will setup authentication in Laravel 10 by using the Laravel UI packages.

We will also provide step-by-step instructions on how to easily create login and registration functionality using the auth scaffolding.

The Laravel 10 authentication system comes with a separate composer package, laravel/ui, that makes it easier for developers to create auth scaffolding. Bootstrap, Vue and React like frameworks are also supported by this package.

The following sections will be explaining how to use these frameworks for creating a practical and functional authentication system.

 

Setting Up Laravel 10 Authentication

The first step in setting up authentication in Laravel 10 is to install the laravel/ui package. You can do this by running the following command:

composer require laravel/ui

Exploring Laravel UI Command Options

After installing the Laravel UI package, you can check the available commands and options by running:

php artisan ui --help

You will see output similar to the following, which provides information on the available commands and options:

Description:
  Swap the front-end scaffolding for the application

Usage:
  ui [options] [--] 

Arguments:
  type                   The preset type (bootstrap, vue, react)

Options:
      --auth             Install authentication UI scaffolding
      --option[=OPTION]  Pass an option to the preset command (multiple values allowed)
  ...

Generating Authentication Scaffolding

The Laravel UI package allows you to generate authentication scaffolding using one of the three supported front-end frameworks: Bootstrap, Vue, and React. Here are the commands for each framework:

 

Using Bootstrap:

php artisan ui bootstrap --auth

Using Vue:

php artisan ui vue --auth

Using React:

php artisan ui react --auth

Installing and Running NPM

After generating the authentication scaffolding, you need to install and run NPM to ensure the layout of the login and registration pages is displayed correctly. Run the following commands:

npm install
npm run dev

Customizing Authentication Views

With the scaffolding in place, you can now customize the authentication views to suit our application’s needs.

 

Login View

The login view can be found in the resources/views/auth directory. You can customize the design, layout, and functionality of this view as needed.

 

Register View

Similarly, the register view is located in the resources/views/auth directory. We can modify the design, layout, and functionality of this view to align with our application’s requirements.

 

Testing the Authentication System

Now that you’ve set up and customized our authentication views, it’s time to test our Laravel 10 authentication system. Launch our application and navigate to the login and registration pages to ensure they are working correctly. Test the login and registration processes to confirm that users can successfully authenticate and access protected areas of our application.

 

FAQs

 

What is the Laravel UI package?

The Laravel UI package is a separate composer package that provides an easy way to create authentication scaffolding in Laravel 10. It supports popular front-end frameworks like Bootstrap, Vue, and React.

 

How do I install the Laravel UI package?

To install the Laravel UI package, simply run the following command: composer require laravel/ui

 

What front-end frameworks are supported by Laravel UI?

Laravel UI supports three popular front-end frameworks: Bootstrap, Vue, and React.

 

How do I customize the login and registration views?

You can find the login and registration views in the resources/views/auth directory. Modify the design, layout, and functionality of these views to suit your application’s needs.

 

Why do I need to run NPM after generating the authentication scaffolding?

Running NPM is necessary to ensure the correct layout and design of the login and registration pages. It also installs and compiles any necessary dependencies for the selected front-end framework.

 

Conclusion

In this article, we have provided a comprehensive guide on setting up authentication in Laravel by using the Laravel UI package. By following these quick steps, you can create a fully functional authentication system with support for popular front-end frameworks like Bootstrap, Vue & React. With Laravel 10’s improved authentication features, creating secure and attractive web applications becomes very easy than ever.