This is an article which is written in order to create a support for authenticating valid user in order to access a web-based application powered by Laravel framework. The Laravel framework used in this context article or this tutorial is for Laravel 5.3. To be able to create a support in the authentication aspect for Laravel 5.3 web-based framework below is the step which is needed to be taken :
- Execute the following command :
php artisan make:auth
For an example :
root@hostname:~# php artisan make:auth Authentication scaffolding generated successfully. root@hostname:~#
If there is no error generated or nothing else which can interfere the above command, there are files which is generated in the folder named ‘Auth’ for the sake of giving the sufficient support on authentication feature in Laravel framework. Those generate files specifically can be shown as follows :
root@hostname:/var/www/html/laravel-project/app/Http/Controllers/Auth# ls -al total 28 drwxrwxr-x 2 www-data www-data 4096 Jul 5 16:27 . drwxrwxr-x 3 www-data www-data 4096 Jul 5 16:31 .. -rwxrwxr-x 1 www-data www-data 834 Sep 20 2016 ForgotPasswordController.php -rwxrwxr-x 1 www-data www-data 949 Sep 20 2016 LoginController.php -rwxrwxr-x 1 www-data www-data 1772 Sep 20 2016 RegisterController.php -rwxrwxr-x 1 www-data www-data 809 Sep 20 2016 ResetPasswordController.php root@hostname:/var/www/html/laravel-project/app/Http/Controllers/Auth#
As shown in the above output listed, there are files generated in the output above is ForgotPasswordController.php, LoginController.php, RegisterController.php and ResetPasswordController.php. Those files can be utilized in order to support the web-app based Laravel framework on registering new user, authenticating user access and several function which is related.
2. After finishing the steps for generating files required on authentication feature support, below is the command which is needed to executed to generate the table required for storing user information :
php artisan migrate
But before the command execution is performed and carried out, first of all, below is the content of the table used by the web-app application. It is shown to be compared further and to show that there are several tables created for the sake of authentication feature :
mysql> use research; Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Database changed mysql> show tables; +--------------------+ | Tables_in_research | +--------------------+ | category | | main_category | | posts | | subcategory | +--------------------+ 4 rows in set (0,00 sec) mysql>
For an example :
root@hostname:~# php artisan migrate Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table You have new mail in /var/mail/root root@hostname:~#
After executing the above script used in order to support authentication feature there will be tables generated in the database used by the web-based application as shown as follows :
mysql> show tables; +--------------------+ | Tables_in_research | +--------------------+ | category | | main_category | | migrations | | password_resets | | posts | | subcategory | | users | +--------------------+ 7 rows in set (0,05 sec) mysql>
3. After generating the required files and tables, below is how to put everything for implementation. Just change the file which is defined for routing purpose so that accessing login page and authenticating the information passed is also possible. Below is how to correctly add the line of code into the route file considering it is a Laravel framework version 5.3 :
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
4. After defining those lines above for defining the route definition for accessing home of the web-page, print the route list to make sure that it is correctly defined there :
root@hostname:~# php artisan route:list +--------+----------+---------+--------+-----------+-----------------+ | Domain | Method | URI | Name |Action | Middleware | +--------+----------+---------+--------+-----------+-----------------+ | | GET|HEAD | / | |Closure | web | | | GET|HEAD | api/user| |Closure | api,auth:api | ... | | GET|HEAD | home | |App\Http\HomeController@index| | web,auth | ... root@hostname:~#
As we can see from the same command output, there is a specific URL definition which has becoming the part of the route and it is important as authentication feature and support as shown below :
| | GET|HEAD | login | login | App\Http\Controllers\Auth\LoginController@showLoginForm | web,guest | | | POST | login | | App\Http\Controllers\Auth\LoginController@login | web,guest | | | POST | logout | logout | App\Http\Controllers\Auth\LoginController@logout | web |
Those route is not defined manually in the route definition file named web.php located in folder /root-folder-of-laravel-project/routes because it is automatically added by executing the command ‘php artisan make:auth’.
The one who control the behavior of the output generated from accessing ‘login’ and ‘logout’ URL access is the controller named LoginController which is produced when executing the command ‘php artisan make:auth’.
5. Basically, there is an already created blade view template file which is going to be executed when /login is being accessed. Normally, the name of the file is login.blade.php and it can be created in the folder location of /root-folder-of-laravel-project/resources/views/auth. It is clearly stated in the AuthenticatesUsers.php which is defined in LoginController.php as shown below :
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
use AuthenticatesUsers;
...
LoginController.php use AuthenticatesUsers class which is located in the namespace of Illuminate\Foundation\Auth. The usage for the keyword ‘use’ is enable for further recognition in the project by specifying the full namespace path in case there are more than one files with name of AuthenticatesUsers.
So, if the file named AuthenticatesUsers is opened further there will be a method defined to show the login form as shown below :
<?php
namespace Illuminate\Foundation\Auth;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Lang;
trait AuthenticatesUsers
{
use RedirectsUsers, ThrottlesLogins;
/**
* Show the application's login form.
*
* @return \Illuminate\Http\Response
*/
public function showLoginForm()
{
return view('auth.login');
}
As it can been in the above snippet code of AuthenticatesUsers.php file, there is one method named showLoginForm() and the method itself is clearly added at the time of executing the following command :
php artisan route:list
The output which is shown the same exact method to be executed as presented in the AuthenticatesUsers file is ‘showLoginForm’. And it is directly will render the view which is located at auth.login stated in the ‘showLoginForm’ method.
| | GET|HEAD | login | login | App\Http\Controllers\Auth\LoginController@showLoginForm | web,guest |
6. So, to modify the login page further, just edit file login.blade.php located in auth folder which is normally placed in /root-folder-of-laravel-app-project/resources/views/auth/login.blade.php. Below is the content of login.blade.php would normally look like :
Below is the snippet code of the login.blade.php file as shown in the image above :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : ''}}> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="{{ url('/password/reset') }}">
Forgot Your Password?
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
7. To be able to login further, first of all, it is necessary to register first and create a new user. The link itself is actually provided in the default login page with the link name of Register. By the time the Register link is being clicked, it will be directly forward to register page which the view file itself is also located in the same file with the login.blade.php file as shown in the directory tree as follows :
root-folder-app-based-on-laravel
|---resources
|----views
|----auth
|------login.blade.php
|------register.blade.php
Below is snippet code which is actually the content of the file named register.blade.php :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Register</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
And this is the view of the register page :
Don’t forget to entry the register form. Since it is local, the entry form for an example is shown as follows :
8. By default, by the time the registration process is successfully carried out, Laravel will automatically direct the page to the home page as shown below :
It is obvious since in the RegisterController there is a line which is informing to the redirection URL after logging in successfully as shown in the part of snippet code of RegisterController.php below :
... /** * Where to redirect users after login / registration. * * @var string */ protected $redirectTo = '/home'; ...
So, where does the ‘/home’ will be redirected to ?, it can be clearly answered by viewing the web.php file located in routes folder which is assigned as the routing configuration file which is indicated with one line of the configuration as shown below :
Route::get('/home', 'HomeController@index');
The URL of ‘/home’ will be processed by ‘HomeController.php’ precisely in the index method. So, based on the information given in the index method of HomeController class located in the HomeController.php below, it can be clearly seen that the direction process is forwarded to home.blade.php as shown below :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('home');
}
}
It will be forwarded to a view named ‘home’ which is precisely meant to be the home.blade.php which exist in the ‘/root-folder-of-laravel-application/resources/views’ :
This is the snippet code of the file :
@extends('layout.apps')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
You are logged in!
</div>
</div>
</div>
</div>
</div>
@endsection
9. Last but not least, based on those files which are mentioned before primarily those files associated with the authentication process can be modified and customized further based on needs.
4 thoughts on “Laravel login page example tutorial for Laravel 5.3”