How can show error message in failed login? - laravel

Question

I make authentication system using the following command:
php artisan make:auth
It works fine. But when I try to customize the design and other stuff everything seems messy to me.i.e: When I try with wrong credential it then I can't show the message like: 'Invalid Username/password'. I inspect the all controller inside Auth folder but no detail code is there. My requirement is so simple: I just want to pass error message from controller to view and show it with my custom designed HTML template. Here is my login form:
#extends('layouts.login')
#section('content')
<div class="content">
<!-- BEGIN LOGIN FORM -->
<form class="login-form" method="POST" action="{{ route('login') }}">
#csrf
<h3 class="form-title">Login to your account</h3>
CUSTOM_ERROR_MESSAGE_IF_LOGIN_FAILED
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<!-- <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username"/> -->
<input id="email" type="email" class="form-control placeholder-no-fix" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="input-icon">
<i class="fa fa-lock"></i>
<!-- <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password"/> -->
<input id="password" type="password" class="form-control placeholder-no-fix" name="password" required autocomplete="current-password">
</div>
</div>
<div class="form-actions">
<label class="checkbox">
<!-- <input type="checkbox" name="remember" value="1"/> -->
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
Remember me </label>
<button type="submit" class="btn blue pull-right">
Login <i class="m-icon-swapright m-icon-white"></i>
</button>
</div>
<div class="forget-password">
<h4>Forgot your password ?</h4>
<p>
no worries, click <a href="{{ route('password.request') }}" >
here </a>
to reset your password.
</p>
</div>
<div class="create-account">
<p>
Don't have an account yet ? <a href="javascript:;" id="register-btn">
Create an account </a>
</p>
</div>
</form>
<!-- END LOGIN FORM -->
</div>
#endsection
How can I show CUSTOM_ERROR_MESSAGE_IF_LOGIN_FAILED?

Answer 1

First of all, believe me, we all have been there where you are now. It is frustrating when learning a new framework and how does it work.
One word of advice is to go through documentation thoroughly, there is nothing which you can't find there when it comes to Laravel. Well at least, nothing basics which you frequently need.
Now about your problem, you said:
I just want to pass error message from controller to view and show it
with my custom designed HTML template.
So I am going to take a wild guess and say that you are handling the login process yourself instead of using build-in Laravel functionality.
In case I am wrong and you are using build in laravel login functionlity then all you need to do is following:
Case 1: When you are using build in Laravel Login functionality
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
Laravel returns the errors with keys 'email' when putting wrong credentials and try to login so just print the message using $errors->first('email') wherver you want and style it however you feel like it.
Now, if I am right and you are using custom login method:
Case 2: When you are using custom Login functionality
In your controller, you can customize your messages like so:
$messages = [
'email.required' => 'Email is required!',
'password.required' => 'Password is required!'
];
$validatedData = $request->validate([
'email' => 'required|email',
'password' => 'required|string',
], $messages);
Of course, this is just an example, you can have various validation and respective custom messages. If you want to use inbuild error messages of validation then just don't provide messages array like so:
$validatedData = $request->validate([
'email' => 'required|email',
'password' => 'required|string',
]);
When you use validate() method on $request, if validation fails, Laravel by default returns a valid error response to the blade, this response will have keys same as your request variable name and value as the error message and you can access them easily, same as in Case 1:
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
And you are set.
Ultimately, maybe from your controller you want to return some custom error also other than validation the use following case:
Case 3: When you are using custom Login functionality and want to return some custom error message other than validation
Inside your controller use withErrors() method:
return Redirect::back()->withErrors(
[
'email' => 'Snap! you are done!'
]
);
As you might have guessed, showing this error inside your view is exactly the same as before:
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
I hope it helps
Happy coding :)

Answer 2

You can output your error messages using:
#if(count($errors) > 0)
#foreach( $errors->all() as $message )
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>{{ $message }}</span>
</div>
#endforeach
#endif
And you if you have a custom route, you need to redirect to the login page from your controller and passing the errors:
$errors = ['ur errors'];
return redirect()->back()->withErrors($errors);

Answer 3

Well, once in time I hovered over the same problem but found out that the messages were there and the only mistake was that the element which contains the error message was hidden by display:none and changed it like so .invalid-feedback { display: inline-block !important; }
After that I was able to see all the error messages. further more, I also, in LoginController, overrode the method sendFailedLoginResponse in AuthenticatesUsers
`protected function sendFailedLoginResponse(Request $request)
{
throw ValidationException::withMessages([
$this->username() => [trans('auth.failed')],
'password' => [trans('auth.password')],
]);
}`