Laravel 7/6 Custom Login Registration Example Tutorial

In this tutorial you will learn about the Laravel 7/6 Custom Login Registration Example Tutorial and its application with practical example.

In this Laravel 7/6 Custom Login Registration Example Tutorial I will show you how to create custom login and registration system in laravel. In this tutorial you will learn to create custom login and registration system in laravel. Though laravel comes with default authentication system we can also create custom login, registration and logout functionality. In the step by step custom authentication tutorial I will show you to create controller, routes, model, and blade views files for custom login, registration and logout functionality.

Table Of Contents−

Laravel 7/6 Custom Login Registration Example Tutorial

Install Laravel Fresh New Setup

Setup Database Credentials
Make Route
Create Controller & Methods

Create Blade View
Run Development Server
Conclusion

1). Install Laravel Fresh New Setup

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

2). Setup Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Next, we will migrate the table into the database using the below command :

php artisan migrate

1	php artisan migrate

3). Make Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('login', 'AuthController@index');
  Route::post('post-login', 'AuthController@postLogin'); 
  Route::get('registration', 'AuthController@registration');
  Route::post('post-registration', 'AuthController@postRegistration'); 
  Route::get('dashboard', 'AuthController@dashboard'); 
  Route::get('logout', 'AuthController@logout');

Route::get('login', 'AuthController@index');

Route::post('post-login', 'AuthController@postLogin');

Route::get('registration', 'AuthController@registration');

Route::post('post-registration', 'AuthController@postRegistration');

Route::get('dashboard', 'AuthController@dashboard');

Route::get('logout', 'AuthController@logout');

4). Create Controller

Now, lets create a controller named AuthController using command given below –

php artisan make:controller AuthController

1	php artisan make:controller AuthController

After successfully create controller go to app/controllers/AuthController.php and update the below code in your controller:

<?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 AuthController 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');
    }
}

<?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 AuthController 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');

}

5). Create Blade view

Now, we will create three-blade view files as following:

login blade.php

<!DOCTYPE html>
<html>
<head>
<title>Login Form</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() }}">
<!--Bootsrap 4 CDN-->
<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 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>

<!DOCTYPE html>

<html>

<head>

<title>Login Form</title>

</head>

<body>

<h3 class="login-heading mb-4">Welcome back!</h3>

<label for="inputEmail">Email address</label>

@if ($errors->has('email'))

<span class="error">{{ $errors->first('email') }}</span>

@endif

</div>

<label for="inputPassword">Password</label>

@if ($errors->has('password'))

<span class="error">{{ $errors->first('password') }}</span>

@endif

</div>

<div class="text-center">If you have an account?

</form>

</div>

</body>

</html>

registration blade.php

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</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() }}">
<!--Bootsrap 4 CDN-->
<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">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>

<!DOCTYPE html>

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<h3 class="login-heading mb-4">Register here!</h3>

@if ($errors->has('name'))

<span class="error">{{ $errors->first('name') }}</span>

@endif

</div>

<label for="inputEmail">Email address</label>

@if ($errors->has('email'))

<span class="error">{{ $errors->first('email') }}</span>

@endif

</div>

<label for="inputPassword">Password</label>

@if ($errors->has('password'))

<span class="error">{{ $errors->first('password') }}</span>

@endif

</div>

<div class="text-center">If you have an account?

</form>

</div>

</body>

</html>

dashboard.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Dashboard</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() }}">
<!--Bootsrap 4 CDN-->
<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 Dashboard!</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>

<!DOCTYPE html>

<html>

<head>

<title>Dashboard</title>

</head>

<body>

<h3 class="login-heading mb-4">Welcome Dashboard!</h3>

Welcome {{ ucfirst(Auth()->user()->name) }}

</div>

<a class="small" href="{{url('logout')}}">Logout</a>

</div>

</body>

</html>

Next, we will create a style.css file inside app/public folder and updates the below code in your file:

: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;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
.form-label-group>label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@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;
}

: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;

}

/* Fallback for Edge

-------------------------------------------------- */

@supports (-ms-ime-align: auto) {

.form-label-group>label {

display: none;

}

.form-label-group input::-ms-input-placeholder {

color: #777;

}

/* Fallback for IE

-------------------------------------------------- */

@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;

}

6). Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

 http://localhost:8000/login

1	http://localhost:8000/login

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

1). Install Laravel Fresh New Setup

2). Setup Database

3). Make Route

4). Create Controller

5). Create Blade view

6). Run Development Server

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example