0% found this document useful (0 votes)
16 views

5 Laravel E-Commerce Application Development - Backend Admin Authentication - LaraShout

Uploaded by

Iggy Csi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views

5 Laravel E-Commerce Application Development - Backend Admin Authentication - LaraShout

Uploaded by

Iggy Csi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

LaraShout → Laravel → Laravel E-Commerce Application


Development – Backend Admin Authentication

Laravel E-Commerce Application Development


– Backend Admin Authentication

POSTED ON 20 MAY 2019 POSTED IN LARAVEL


TAGS: ADMIN AUTHENTICATION, LARAVEL AUTHENTICATION, LARAVEL
GUARDS, MULTI AUTH LARAVEL
8413 VIEWS

TABLE OF CONTENT

https://www.larashout.com/backend-admin-authentication 1/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

01 Setting Up Admin Guard

02 Adding Admin Auth Routes

03 Creating Admin Auth Controller

04 Creating Admin Login Page

05 Adding Admin Login Functionality

06 Adding Admin Logout Functionality

07 Redirecting Authenticated Admin To Dashboard Page

08 Redirecting Unauthenticated Admin To Login Page

09 Conclusion

Laravel E-Commerce Application Development


( 27 Lessons )
In this course, you’ll learn how to create an E-Commerce
Website from scratch in Laravel. The process has never
been easier I’ll take you from the very beginning stages of
setting up Laravel till the last steps of adding products to
the cart. If you’ve good understanding & experience in
PHP & MySQL then this course is for you.
SEE FULL SERIES

This is the fourth part of the Laravel E-Commerce Application


Development series, in this part will implement the admin
authentication using Laravel guards.

https://www.larashout.com/backend-admin-authentication 2/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

I assume you should have the e-commerce application project


on your machine or you can grab it from Laravel E-Commerce
Application repository, we will start from where we left it in the
last part.

In the last part, we created the admin model, migration and


seed, in this post we will implement authentication for the
admin area. Laravel’s default authentication works with the
User model but we will implement our own login functionality
for Admin model which means we are implementing adding
multiple authentication for different models.

Setting Up Admin Guard


First this we have to add the admin guards in the
con g/auth.php le so Laravel will know which model we are
trying to use for the admin authentication. Open you
con g/auth.php le and nd guards array which will looks like
this one.

'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],

'api' => [
'driver' => 'token',
'provider' => 'users',

https://www.larashout.com/backend-admin-authentication 3/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

'hash' => false,


],
],

As you can see in this array Laravel de ning the two different
guards one for web application and on for the api. We will add
our own guards for admin like below. Copy the below code and
replace with the default guards array.

'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],

'api' => [
'driver' => 'token',
'provider' => 'users',
'hash' => false,
],

'admin' => [
'driver' => 'session',
'provider' => 'admins',
],

'admin-api' => [
'driver' => 'token',
'provider' => 'admins',
'hash' => false,

https://www.larashout.com/backend-admin-authentication 4/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

],
],

As you can see we have added the admin and admin-api guard so
our application can use two different types of model for
authentication purpose. In admin array we are de ning session as
a authentication driver which will use the admins provider and
same for the admin-api array, basically we just copied the
default guards and changed the values for them.

As you can see, we have de ned the providers in both admin


and admin-api to admins. Now we will add a new provider in
auth.php con g le.

The next array element is the providers, which looks like below.

'providers' => [
'users' => [
'driver' => 'eloquent',
'model' => App\Models\User::class,
],
],

As you can see in this array there is a users provider, so to add


our admins provider we will simply copy the users provider and
change its values to the admin ones like below.

'providers' => [
'users' => [
https://www.larashout.com/backend-admin-authentication 5/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

'driver' => 'eloquent',


'model' => App\Models\User::class,
],
'admins' => [
'driver' => 'eloquent',
'model' => App\Models\Admin::class,
],
],

In the above code example, we added a new provider which is


admins and it uses the eloquent as it’s driver. Next we de ned
the model which will be used for this provider which is
App\Models\Admin::class .

Next, in the passwords array, we will de ne which table will be


used to add the functionality for the admin password reset. We
will copy the existing users one and replace it to admins.

'passwords' => [
'users' => [
'provider' => 'users',
'table' => 'password_resets',
'expire' => 60,
],
'admins' => [
'provider' => 'users',
'table' => 'password_resets',
'expire' => 60,
],
],

https://www.larashout.com/backend-admin-authentication 6/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

As you can see, for password we have just added the guard
name admins and used the same details as users one, which
means we will use the same password_reset table for the admins
password reset functionality.

That’s it for the guard’s changes, now we will add the login
functionality for the admin users.

Adding Admin Auth Routes


Now we will add the login routes for admin authentication, as
we will be implementing a complete backend in this series, it’s
right time to create a new routes le and separate all admin
routes in a separate le.

Learn More

You can learn more about the Laravel Routing by reading the
Laravel Routing Made Easy post.

Go ahead and create a new PHP le in routes folder called


admin.php . Now in our routes/web.php le, we will add the below
line to include the admin routes into the web.php le.

require 'admin.php';

https://www.larashout.com/backend-admin-authentication 7/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

In part two of this series, we added the below routes just for
checking the admin views.

Route::view('/admin', 'admin.dashboard.index');
Route::view('/admin/login', 'admin.auth.login');

Go ahead and delete them from routes/web.php le as we will add


the actual routes for admin in admin.php le.

In admin.php le, add the below routes.

Route::group(['prefix' => 'admin'], function () {

Route::get('login', 'Admin\LoginController@showLoginForm')->name('admin.log
Route::post('login', 'Admin\LoginController@login')->name('admin.login.post
Route::get('logout', 'Admin\LoginController@logout')->name('admin.logout');

Route::get('/', function () {
return view('admin.dashboard.index');
});

});

Let’s go through each routes one by one. Firstly, we are adding


a routes group to pre x all our admin routes with /admin . Next
within this route group we added the login routes, rst one is
the GET route (/admin/login) which will load the admin login
page. Next one is the POST route (/admin/login), where we will
https://www.larashout.com/backend-admin-authentication 8/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

send the post request for authentication. Next one is the logout
route (/admin/logout) which will be again a GET request.

The last one is the dashboard route which will map to /admin

URL and will load the dashboard view of admin.

We will protect the dashboard view for authenticated


admins, in the coming sections of this post.

Creating Admin Auth Controller


As you have seen, in the last section our all routes are pointed
to Admin\LoginController. We will create a new controller using
the artisan command. Go to your terminal and run the below
command.

php artisan make:controller Admin\\LoginController

Above command will generate a LoginController in the


app/Http/Controllers/Admin folder. Open your LoginController and
replace with the below one.

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

https://www.larashout.com/backend-admin-authentication 9/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

class LoginController extends Controller


{
use AuthenticatesUsers;

/**
* Where to redirect admins after login.
*
* @var string
*/
protected $redirectTo = '/admin';

/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest:admin')->except('logout');
}

/**
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function showLoginForm()
{
return view('admin.auth.login');
}
}

https://www.larashout.com/backend-admin-authentication 10/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

Let me go through with this code step by step. Firstly we added


the AuthenticatesUsers trait which Laravel provides for
authenticating users and then used this trait like below.

use AuthenticatesUsers;

Next we de ned the $redirectTo property to de ne which admin


users will be redirected after successfully login.

/**
* Where to redirect admins after login.
*
* @var string
*/
protected $redirectTo = '/admin';

Next we added the constructor for this controller to use the


guest middleware for admins except logout method which will
add in the coming section.

/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{

https://www.larashout.com/backend-admin-authentication 11/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

$this->middleware('guest:admin')->except('logout');
}

In the last section, we pointed our login route to


showLoginForm method in the LoginController controller, so
we will add that and return a login page view.

/**
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function showLoginForm()
{
return view('admin.auth.login');
}

In the above method we are loadin a login view from admin/auth

folder.

Creating Admin Login Page


Now we will add a new le in resources/views/admin/auth
folder named login.blade.php . Add the below HTML markup code in
this le.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

https://www.larashout.com/backend-admin-authentication 12/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" type="text/css" href="{{ asset('backend/css/main.css
<link rel="stylesheet" type="text/css" href="{{ asset('backend/css/font-awe
<title>Login - {{ config('app.name') }}</title>
</head>
<body>
<section class="material-half-bg">
<div class="cover"></div>
</section>
<section class="login-content">
<div class="logo">
<h1>{{ config('app.name') }}</h1>
</div>
<div class="login-box">
<form class="login-form" action="{{ route('admin.login.post') }}" metho
@csrf
<h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>SIGN I
<div class="form-group">
<label class="control-label" for="email">Email Address</label>
<input class="form-control" type="email" id="email" name="email
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" type="password" id="password" name=
</div>
<div class="form-group">
<div class="utility">
<div class="animated-checkbox">
<label>
<input type="checkbox" name="remember"><span class=
</label>
</div>

https://www.larashout.com/backend-admin-authentication 13/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

</div>
</div>
<div class="form-group btn-container">
<button class="btn btn-primary btn-block" type="submit"><i clas
</div>
</form>
</div>
</section>
<script src="{{ asset('backend/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('backend/js/popper.min.js') }}"></script>
<script src="{{ asset('backend/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('backend/js/main.js') }}"></script>
<script src="{{ asset('backend/js/plugins/pace.min.js') }}"></script>
</body>
</html>

Above view is displaying a simple login form with email address


eld and a password eld. We have added the form action to
point to our post login route which is named as admin.login.post .

Now if you visit /admin/login URL, you will be presented with the
login form something like below.

https://www.larashout.com/backend-admin-authentication 14/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

Admin Login Page

Adding Admin Login Functionality


Now as we have the login page ready but it’s not functional at
the moment. To make this login form functional we need to add
login() method to our LoginController. Open LoginController
and add the below code.

/**
* @param Request $request
* @return \Illuminate\Http\RedirectResponse
* @throws \Illuminate\Validation\ValidationException
*/
public function login(Request $request)
{
$this->validate($request, [
'email' => 'required|email',
'password' => 'required|min:6'

https://www.larashout.com/backend-admin-authentication 15/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

]);
if (Auth::guard('admin')->attempt([
'email' => $request->email,
'password' => $request->password
], $request->get('remember'))) {
return redirect()->intended(route('admin.dashboard'));
}
return back()->withInput($request->only('email', 'remember'));
}

Now add the Auth facade in the controller like below:

use Auth;

In the login method, we are rstly validating the user input for
email and password. Then we are using the Auth:: facade to
de ne our admin guard and then making the attempt to
authenticate the admin user.

If the authentication is successful we are redirecting the admin


users to admin.dashboard route which loads the admin dashboard
view. If authentication is not successful then we are returning
the user back to the login page.

At this point, you can load the login page and test the login
page, but I recommend that you complete the full post and
then try it.

Adding Admin Logout Functionality


https://www.larashout.com/backend-admin-authentication 16/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

Next we will add the logout function to LoginController class.


Open LoginController class and add the below function.

/**
* @param Request $request
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
*/
public function logout(Request $request)
{
Auth::guard('admin')->logout();
$request->session()->invalidate();
return redirect()->route('admin.login');
}

Now open resources/views/admin/partials/header.blade.php


le and replace the Logout link from:

<a class="dropdown-item" href="page-login.html"><i class="fa fa-sign-out fa-lg"

to:

<a class="dropdown-item" href="{{ route('admin.logout') }}"><i class="fa fa-sig

Now we have a working, log out for the admin area.

Redirecting Authenticated Admin To Dashboard


Page
https://www.larashout.com/backend-admin-authentication 17/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

Now we have added the login functionality, we want to make


sure if an admin is authenticated then redirect them to the
dashboard page when they try to load the login route again. As
they are already logged in so there is no point to show them
the login page.

For this we need to adjust the RedirectIfAuthenticated


middleware which comes with the Laravel and located at
app/H p/Middleware. Open this middleware and update the
handle() method with the below one.

/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @param string|null $guard
* @return mixed
*/
public function handle($request, Closure $next, $guard = null)
{
switch($guard){
case 'admin':
if (Auth::guard($guard)->check()) {
return redirect('/admin');
}
break;
default:
if (Auth::guard($guard)->check()) {
return redirect('/');

https://www.larashout.com/backend-admin-authentication 18/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

}
break;
}
return $next($request);
}

In this method, we are adding a switch statement for the $guard

value. If $guard value is admin then checking if its authenticated


then retrun to the /admin which is our dashboard route.

If the $guard value is user then we are returning to the making


website homepage / .

Redirecting Unauthenticated Admin To Login


Page
Next, we want to make a check if the admin is not
authenticated then don’t let them load the dashboard view
instead redirect them to the login page. For this open
app/Exceptions/Handler.php le and add the below method at
the bottom of the class.

/**
* @param \Illuminate\Http\Request $request
* @param AuthenticationException $exception
* @return \Illuminate\Http\JsonResponse|\Illuminate\Http\RedirectResponse|\Sym
*/
protected function unauthenticated($request, AuthenticationException $exception
{

https://www.larashout.com/backend-admin-authentication 19/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

if ($request->expectsJson()) {
return response()->json(['message' => $exception->getMessage()], 401);
}
$guard = array_get($exception->guards(), 0);
switch($guard){
case 'admin':
$login = 'admin.login';
break;
default:
$login = 'login';
break;
}
return redirect()->guest(route($login));
}

In the above method, we are getting the current guard from the
AuthenticationException class and running the switch
statement on it. Based on the guard value we are redirecting
the user to the right login page.

Don’t forget to import, AuthenticationException class in the top


of the class like below:

use Illuminate\Auth\AuthenticationException;

Now we will protect our dashboard route, so only authenticated


admin can load the dashboard view. Open admin.php routes le
and replace the dashboard route with below one.

https://www.larashout.com/backend-admin-authentication 20/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

Route::group(['middleware' => ['auth:admin']], function () {

Route::get('/', function () {
return view('admin.dashboard.index');
})->name('admin.dashboard');

});

We are adding the admin.dashboard route into a route group and


passing the middleware auth:admin so that all the admin routes
under this group will be protected using the admin guard.

Testing

Now you can go ahead and try to login the admin using
email [email protected] and password is password . Try to load the
login page when admin is logged in, you will be redirected to
dashboard view. Also try to load the dashboard page
without login as admin and you will be redirected to the
login page.

Conclusion
In this part, we have successfully created the login functionality
for admin users. In the next part of this series, we will start
adding some core functionalities which we will be using

https://www.larashout.com/backend-admin-authentication 21/46
2/13/2020 Laravel E-Commerce Application Development – Backend Admin Authentication | LaraShout

throughout our application like a base repository, base form


request, and base controller.

Code Repository

You can nd the code base of this series on Laravel


eCommerce Application repository.

If you have any question about this post, please leave a


comment in the comment box below.

45 comments on “Laravel E-Commerce Application


Development – Backend Admin Authentication”

Boris says:

MAY 22, 2019 AT 2:54 PM

Hi,

This part of tutorial is great and works perfect.

I tried to access this route http://localhost:8000/admin and the error occured

“Route [login] not de ned.”

I expected redirection to login page.

Best regards

REPLY

https://www.larashout.com/backend-admin-authentication 22/46

You might also like