Custom Authentication (SignIn / SignUp) in Laravel

by avinash 22. April 2016 Intermediate, Laravel 6

Hello everyone, welcome to justlaravel.com. As routing and pagination are very simple in laravel, authentication is not much different, it is very simple too, everything is configured out of the box.

Working Demo Project on Github

By default, laravel comes with 2 authentication controllers: Auth Controller and Password Controller.
Auth Controller, handles new registrations and authentication, Password Controller, manages forgotten passwords.

Default routes for authentication are,

// Authentication routes...
Route::get('auth/login', 'Auth\AuthController@getLogin');
Route::post('auth/login', 'Auth\AuthController@postLogin');
Route::get('auth/logout', 'Auth\AuthController@getLogout');
// Registration routes...
Route::get('auth/register', 'Auth\AuthController@getRegister');
Route::post('auth/register', 'Auth\AuthController@postRegister');

// Authentication routes...

Route::get('auth/login', 'Auth\AuthController@getLogin');

Route::post('auth/login', 'Auth\AuthController@postLogin');

Route::get('auth/logout', 'Auth\AuthController@getLogout');

// Registration routes...

Route::get('auth/register', 'Auth\AuthController@getRegister');

Route::post('auth/register', 'Auth\AuthController@postRegister');

So when we go to localhost:8000/auth/ login, login form appears, of course, we have placed our view files in resources directory, in previous versions of laravel, it shipped with these view files too.

We are not going to use these, as we completely customize our authentication.We ‘ll use modal for SignIn/SignUp as modals are very popular these days and very fancy too.

Note: we are not using any validations here, validations are discussed in separate post here, make sure you look at it

Firstly,let’ss create a modal, we are using w3css here,
In resources/views location, create a new file named customAuthentication.blade.php, as we said we use w3css modal along with w3css tabs for login and register.

<li class="w3-right"><a class="w3-green" href="#" id="auth"
onclick="document.getElementById('authentication').style.display='block'">SignIn/SignUp</a></li>

1 2	<li class="w3-right"><a class="w3-green" href="#" id="auth" onclick="document.getElementById('authentication').style.display='block'">SignIn/SignUp</a></li>

above line of code calls the modal when SignIn/SignUp is clicked,
and the code for modal is,

<div id="authentication" class="w3-modal">
<span
onclick="document.getElementById('authentication').style.display='none'"
class="w3-closebtn w3-grey w3-hover-red w3-container w3-padding-16 w3-display-topright">X</span>
<div class="w3-modal-content w3-card-8 w3-animate-zoom"
style="max-width: 600px">
<div class="col-md-6 w3-card-8 w3-teal" onclick="openForm('Login')">
<h3>Sign In</h3>
</div>
<div class="col-md-6 w3-card-8 w3-teal" onclick="openForm('Register')">
<h3>Sign Up</h3>
</div>
<div style="margin-top: 25px !important;">
<div id="Login" class="w3-container form">
<div class="w3-container ">
<div class="w3-section">
<br> <br>
<form action="/login" method="POST">
{{ csrf_field() }} <input type="hidden" name="redirurl"
value="{{ $_SERVER['REQUEST_URI'] }}"> <label><b>Username</b></label>
<input name="username"
class="w3-input w3-border w3-margin-bottom" type="text"
placeholder="Enter Username" required> <label><b>Password</b></label>
<input class="w3-input w3-border w3-margin-bottom"
name="password" type="password" placeholder="Enter Password"
required> <input type="submit"
class="w3-btn w3-btn-block w3-green" value="Login"> <input
class="w3-check w3-margin-top" type="checkbox"
checked="checked"> Remember me
</form>
</div>
</div>
<div class="w3-container w3-border-top w3-padding-16 ">
<button
onclick="document.getElementById('authentication').style.display='none'"
type="button" class="w3-btn w3-red">Cancel</button>
<span class="w3-right w3-padding w3-hide-small">Forgot <a href="#">password?</a></span>
</div>
</div>
</div>
<div id="Register" class="w3-container form ">
<div class="w3-container">
<div class="w3-section">                  
<form action="/register" method="POST" id="regForm">
{{ csrf_field() }} <input type="hidden" name="redirurl"
value="{{ $_SERVER['REQUEST_URI'] }}"> <label><b>Email</b></label>
<input class="w3-input w3-border w3-margin-bottom" type="text"
name="email" placeholder="Enter Email"
value="{{ old('email') }}" required> <label><b>Username</b></label>
<input class="w3-input w3-border w3-margin-bottom" type="text"
name="username" placeholder="Enter username" required
value="{{ old('username') }}"> <label><b>Password</b></label> <input
class="w3-input w3-border w3-margin-bottom" type="password"
name="password" required placeholder="Enter Password"> <label><b>Confirm
Password</b></label> <input
class="w3-input w3-border w3-margin-bottom" required
type="password" name="password_confirmation"
placeholder="Enter Password">
<button type="submit" class="w3-btn w3-btn-block w3-green">SignUp</button>
</form>
</div>
</div>
<div class="w3-container w3-border-top w3-padding-16 ">
<button
onclick="document.getElementById('authentication').style.display='none'"
type="button" class="w3-btn w3-red">Cancel</button>
</div>
</div>
</div>
</div>
<script> 
openForm("Login");
function openForm(formName) {
var x = document.getElementsByClassName("form");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; }
document.getElementById(formName).style.display = "block"; }
</script>

<span

onclick="document.getElementById('authentication').style.display='none'"

class="w3-closebtn w3-grey w3-hover-red w3-container w3-padding-16 w3-display-topright">X</span>

<div class="w3-modal-content w3-card-8 w3-animate-zoom"

style="max-width: 600px">

</div>

</div>

{{ csrf_field() }} <input type="hidden" name="redirurl"

value="{{ $_SERVER['REQUEST_URI'] }}"> <label><b>Username</b></label>

<input name="username"

class="w3-input w3-border w3-margin-bottom" type="text"

placeholder="Enter Username" required> <label><b>Password</b></label>

<input class="w3-input w3-border w3-margin-bottom"

name="password" type="password" placeholder="Enter Password"

required> <input type="submit"

class="w3-btn w3-btn-block w3-green" value="Login"> <input

class="w3-check w3-margin-top" type="checkbox"

checked="checked"> Remember me

</form>

</div>

<button

onclick="document.getElementById('authentication').style.display='none'"

type="button" class="w3-btn w3-red">Cancel</button>

<span class="w3-right w3-padding w3-hide-small">Forgot <a href="#">password?</a></span>

</div>

{{ csrf_field() }} <input type="hidden" name="redirurl"

value="{{ $_SERVER['REQUEST_URI'] }}"> <label><b>Email</b></label>

<input class="w3-input w3-border w3-margin-bottom" type="text"

name="email" placeholder="Enter Email"

value="{{ old('email') }}" required> <label><b>Username</b></label>

<input class="w3-input w3-border w3-margin-bottom" type="text"

name="username" placeholder="Enter username" required

value="{{ old('username') }}"> <label><b>Password</b></label> <input

class="w3-input w3-border w3-margin-bottom" type="password"

name="password" required placeholder="Enter Password"> <label><b>Confirm

Password</b></label> <input

class="w3-input w3-border w3-margin-bottom" required

type="password" name="password_confirmation"

placeholder="Enter Password">

<button type="submit" class="w3-btn w3-btn-block w3-green">SignUp</button>

</form>

</div>

<button

onclick="document.getElementById('authentication').style.display='none'"

type="button" class="w3-btn w3-red">Cancel</button>

</div>

openForm("Login");

function openForm(formName) {

var x = document.getElementsByClassName("form");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none"; }

document.getElementById(formName).style.display = "block"; }

</script>

Now, when we fill the signup form, it is sent to register controller, there we store the user details in the users table, here we use the default table users came along with laravel installation.

public function register(Request $request) {
$user = new User ();
$user->name = $request->get ( 'username' );
$user->email = $request->get ( 'email' );
$user->password = Hash::make ( $request->get ( 'password' ) );
$user->remember_token = $request->get ( '_token' );
$user->save ();
return redirect ( '/' );
}

public function register(Request $request) {

$user = new User ();

$user->name = $request->get ( 'username' );

$user->email = $request->get ( 'email' );

$user->password = Hash::make ( $request->get ( 'password' ) );

$user->remember_token = $request->get ( '_token' );

$user->save ();

return redirect ( '/' );

}

After registration, we will be able to login,

public function login(Request $request) {
if (Auth::attempt ( array (
'name' => $request->get ( 'username' ),
'password' => $request->get ( 'password' ) 
) )) {
session ( [ 
'name' => $request->get ( 'username' ) 
] );
return Redirect::back ();
} else {
Session::flash ( 'message', "Invalid Credentials , Please try again." );
return Redirect::back ();
}
}

public function login(Request $request) {

if (Auth::attempt ( array (

'name' => $request->get ( 'username' ),

'password' => $request->get ( 'password' )

) )) {

session ( [

'name' => $request->get ( 'username' )

] );

return Redirect::back ();

} else {

Session::flash ( 'message', "Invalid Credentials , Please try again." );

return Redirect::back ();

}

Logout functionality is done flushing session, and calling Auth::logout function,

public function logout() {
Session::flush ();
Auth::logout ();
return Redirect::back ();
}

public function logout() {

Session::flush ();

Auth::logout ();

return Redirect::back ();

}

and routes file will look like,

<?php
/*
* |--------------------------------------------------------------------------
* | Application Routes
* |--------------------------------------------------------------------------
* |
* | Here is where you can register all of the routes for an application.
* | It's a breeze. Simply tell Laravel the URIs it should respond to
* | and give it the controller to call when that URI is requested.
* |
*/
Route::get ( '/', function () {
return view ( 'customAuthentication' );
} );
Route::post ( '/login', 'MainController@login' );
Route::post ( '/register', 'MainController@register' );
Route::get ( '/logout', 'MainController@logout' );

<?php

* |--------------------------------------------------------------------------

* | Application Routes

* |--------------------------------------------------------------------------

* |

* | Here is where you can register all of the routes for an application.

* | It's a breeze. Simply tell Laravel the URIs it should respond to

* | and give it the controller to call when that URI is requested.

* |

Route::get ( '/', function () {

return view ( 'customAuthentication' );

} );

Route::post ( '/login', 'MainController@login' );

Route::post ( '/register', 'MainController@register' );

Route::get ( '/logout', 'MainController@logout' );

Working Demo Project on Github

See the output in screenshots below,

justLaravel - Custom Authentication — justLaravel – Custom Authentication

Working Demo Project on Github

We did not check for validations here, we look at validations in seperate post. Feel free to look at previous posts on routing and pagination

6 thoughts on “Custom Authentication (SignIn / SignUp) in Laravel”

1

Lucas Mahle on April 22, 2016 Reply

Why do not you put these codes in Gist? Not the entire application, but the created codes and complete views.

Great post.
- 2
  
  avinash on April 23, 2016 Reply
  
  Hi Lucas Mahle,
  
  I ‘ve kept the gists in the demo page of this app , you can see the gists in application’s demo pagehttp://justlaravel.com/demos/customAuthentication/
  
  Complete application is also available on github, https://github.com/avinashn/Custom-Authentication-in-Laravel
3

mandeep on July 13, 2016 Reply

Nice one tutorial….
I want to make a user/client/cumstomer/employee etc.(one of them)form With login socia sites network. How i make it .
My aim is when i run this command php artisan make:auth
This make the admin pannel for our app.
2. How i make a news letters subscription function in laravel 5.2 for latest news.
3.How i use Paypal functionality .And how i check the account detail on my local system .Besause i want to work on localhost and i see the user payment detail in laravel 5.2
Please tell me about these topic…
- 4
  
  avinash on July 13, 2016 Reply
  
  There is tutorial already on sending emails, you can extend that to send newsletters subscription mails check it here http://justlaravel.com/sending-emails-using-sendgrid-laravel/
  
  Tutorial on payment gateways is coming soon, stay tuned.
5

Nasar on June 17, 2017 Reply

useless