Laravel Custom Login Registration Example Tutorial

Today, We want to share with you custom login in laravel.In this post we will show you laravel login and registration example, hear for auth middleware in laravel we will give you demo and example for implement.In this post, we will learn about PHP Laravel 6 Sessions Tutorial with an example.

Laravel 7/6 Custom Login Registration Example Tutorial

In this tutorial we learn to all about custom login in laravel Examples like as a laravel 7 make auth, laravel 5 login tutorial, laravel/ui:auth, auth middleware in laravel or many more.

Install Laravel Fresh New Setup

composer create-project --prefer-dist laravel/laravel Blog

Setup Database

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=pakainfo_users
 DB_USERNAME=4cgandhi
 DB_PASSWORD=infinityhionknsjhd54

php artisan migrate

Make Route

 Route::get('login', '[email protected]');
  Route::post('post-login', '[email protected]'); 
  Route::get('registration', '[email protected]');
  Route::post('post-registration', '[email protected]'); 
  Route::get('dashboard', 'Cus[email protected]'); 
  Route::get('logout', '[email protected]');

CustomLoginController.php

php artisan make:controller CustomLoginController

app/controllers/CustomLoginController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator,Redirect,Response;
Use App\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Session;
 
class CustomLoginController extends Controller
{
 
    public function index()
    {
        return view('login');
    }  
 
    public function registration()
    {
        return view('registration');
    }
     
    public function postLogin(Request $request)
    {
        request()->validate([
        'email' => 'required',
        'password' => 'required',
        ]);
 
        $credentials = $request->only('email', 'password');
        if (Auth::attempt($credentials)) {
            // Authentication passed...
            return redirect()->intended('dashboard');
        }
        return Redirect::to("login")->withSuccess('Oppes! You have entered invalid credentials');
    }
 
    public function postRegistration(Request $request)
    {  
        request()->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:6',
        ]);
         
        $data = $request->all();
 
        $check = $this->create($data);
       
        return Redirect::to("dashboard")->withSuccess('Great! You have Successfully loggedin');
    }
     
    public function dashboard()
    {
 
      if(Auth::check()){
        return view('dashboard');
      }
       return Redirect::to("login")->withSuccess('Opps! You do not have access');
    }
 
    public function create(array $data)
    {
      return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password'])
      ]);
    }
     
    public function logout() {
        Session::flush();
        Auth::logout();
        return Redirect('login');
    }
}

Create 3 Main Blade view

Login Blade.php

<!DOCTYPE html>
<html>
<head>
<title>Login Form - Pakainfo.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url('style.css')}}">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
<div class="col-md-8 col-lg-6">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-8 mx-auto">
<h3 class="login-heading mb-4">Welcome back!</h3>
<form action="{{url('post-login')}}" method="POST" id="logForm">
{{ csrf_field() }}
<div class="form-label-group">
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" >
<label for="inputEmail">Email address</label>
@if ($errors->has('email'))
<span class="error">{{ $errors->first('email') }}</span>
@endif    
</div> 
<div class="form-label-group">
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password">
<label for="inputPassword">Password</label>
@if ($errors->has('password'))
<span class="error">{{ $errors->first('password') }}</span>
@endif  
</div>
<button class="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2" type="submit">Sign In</button>
<div class="text-center">If you have an account?
<a class="small" href="{{url('registration')}}">Sign Up</a></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Registration.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Registration Form - Pakainfo.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url('style.css')}}">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
<div class="col-md-8 col-lg-6">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-8 mx-auto">
<h3 class="login-heading mb-4">Register here!</h3>
<form action="{{url('post-registration')}}" method="POST" id="regForm">
{{ csrf_field() }}
<div class="form-label-group">
<input type="text" id="inputName" name="name" class="form-control" placeholder="Full name" autofocus>
<label for="inputName">Name</label>
@if ($errors->has('name'))
<span class="error">{{ $errors->first('name') }}</span>
@endif       
</div> 
<div class="form-label-group">
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" >
<label for="inputEmail">Email address</label>
@if ($errors->has('email'))
<span class="error">{{ $errors->first('email') }}</span>
@endif    
</div> 
<div class="form-label-group">
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password">
<label for="inputPassword">Password</label>
@if ($errors->has('password'))
<span class="error">{{ $errors->first('password') }}</span>
@endif  
</div>
<button class="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2" type="submit">Sign Up</button>
<div class="text-center">If you have an account?
<a class="small" href="{{url('login')}}">Sign In</a></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Dashbaord.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Dashboard - Pakainfo.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url('style.css')}}">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
<div class="col-md-8 col-lg-6">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-8 mx-auto">
<h3 class="login-heading mb-4">Welcome To Pakainfo!</h3>
<div class="card">
<div class="card-body">
Welcome {{ ucfirst(Auth()->user()->name) }}
</div>
<div class="card-body">
<a class="small" href="{{url('logout')}}">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

style.css file inside app/public

:root {
--input-padding-x: 1.5rem;
--input-padding-y: 0.75rem;
}
.login,
.image {
min-height: 100vh;
}
.bg-image {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/form-bk.jpg');
background-size: cover;
background-position: center;
}
.login-heading {
font-weight: 300;
}
.btn-login {
font-size: 0.9rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1rem;
border-radius: 2rem;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group>input,
.form-label-group>label {
padding: var(--input-padding-y) var(--input-padding-x);
height: auto;
border-radius: 2rem;
}
.form-label-group>label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0;
/* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
cursor: text;
/* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown)~label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}

@supports (-ms-ime-align: auto) {
.form-label-group>label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.form-label-group>label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}
.error{
color:red;
margin-left: 10px;
}

Run Development Server

 php artisan serve
 
 php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

 http://localhost:5489/login

I hope you get an idea about custom login in laravel.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article: