Laravel 7 Custom Authentication Login And Registration Example Tutorial
Today, in this article, we are going to you how to create a custom authentication login and registration in laravel 7. normally we are knowing that laravel is providing in-build authentication. but some requirement reasons to we need to custom authentication login and registration.
we are given some steps for creating a custom authentication login and registration in laravel 7.
Overview
Step 1: Install Laravel
Step 2: Setting Database Configuration
Step 3: Create Table using migration
Step 4: Create Route
Step 5: Create the Controller
Step 6: Create Blade File
Step 7: Run The Application
Step 1: Install Laravel
We are going to install laravel 7, so first open the command prompt or terminal and go to go to xampp htdocs folder directory using the command prompt. after then run the below command.
1 | composer create-project --prefer-dist laravel/laravel laravel7_custom_auth_login_register |
Step 2: Setting Database Configuration
After complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.
1 2 3 4 5 6 | DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name(laravel7_custom_auth_login_register) DB_USERNAME=Enter_Your_Database_Username(root) DB_PASSWORD=Enter_Your_Database_Password(root) |
Step 3: Create Table using migration
Run the below command using you can migrate the table.
1 | php artisan migrate |
Step 4: Create Route
Add the following route code in the “routes/web.php” file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::get('login', 'AuthController@index'); Route::post('post-login', 'AuthController@postLogin'); Route::get('register', 'AuthController@register'); Route::post('post-register', 'AuthController@postRegister'); Route::get('dashboard', 'AuthController@dashboard'); Route::get('logout', 'AuthController@logout'); ?> |
Step 5: Create the Controller
Here below command help to create the Authcontroller and paste below the following code in this controller.
1 | php artisan make:controller AuthController |
AuthController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <?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 register() { return view('register'); } 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 postRegister(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'); } } ?> |
Step 6: Create Blade File
Finally, We will create a login.blade.php, register.blade.php and dashboard.blade.php files in the “resources/views/” folder directory and paste the below code.
login.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Login Form - XpertPhp</title> <link href="{{url('assets/css/styles.css')}}" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script> </head> <body class="bg-primary"> <div id="layoutAuthentication"> <div id="layoutAuthentication_content"> <main> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-5"> <div class="card shadow-lg border-0 rounded-lg mt-5"> <div class="card-header"><h3 class="text-center font-weight-light my-4">Login</h3></div> <div class="card-body"> <form action="{{url('post-login')}}" method="POST" id="logForm"> {{ csrf_field() }} <div class="form-group"> <label class="small mb-1" for="inputEmailAddress">Email</label> <input class="form-control py-4" id="inputEmailAddress" name="email" type="email" placeholder="Enter email address" /> @if ($errors->has('email')) <span class="error">{{ $errors->first('email') }}</span> @endif </div> <div class="form-group"> <label class="small mb-1" for="inputPassword">Password</label> <input class="form-control py-4" id="inputPassword" type="password" name="password" placeholder="Enter password" /> @if ($errors->has('password')) <span class="error">{{ $errors->first('password') }}</span> @endif </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input class="custom-control-input" id="rememberPasswordCheck" type="checkbox" /> <label class="custom-control-label" for="rememberPasswordCheck">Remember password</label> </div> </div> <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0"> <a class="small" href="#">Forgot Password?</a> <button class="btn btn-primary" type="submit">Login</button> </div> </form> </div> <div class="card-footer text-center"> <div class="small"><a href="{{url('register')}}">Need an account? Sign up!</a></div> </div> </div> </div> </div> </div> </main> </div> <div id="layoutAuthentication_footer"> <footer class="py-4 bg-light mt-auto"> <div class="container-fluid"> <div class="d-flex align-items-center justify-content-between small"> <div class="text-muted">Copyright © Your Website 2019</div> <div> <a href="#">Privacy Policy</a> · <a href="#">Terms & Conditions</a> </div> </div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="{{url('assets/js/scripts.js')}}"></script> </body> </html> |
register.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Register Form - XpertPhp</title> <link href="{{url('assets/css/styles.css')}}" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script> </head> <body class="bg-primary"> <div id="layoutAuthentication"> <div id="layoutAuthentication_content"> <main> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-7"> <div class="card shadow-lg border-0 rounded-lg mt-5"> <div class="card-header"><h3 class="text-center font-weight-light my-4">Create Account</h3></div> <div class="card-body"> <form action="{{url('post-register')}}" method="POST" id="regForm"> {{ csrf_field() }} <div class="form-group"> <label class="small mb-1" for="inputFirstName">Full Name</label> <input class="form-control py-4" id="inputFirstName" type="text" name="name" placeholder="Enter Full Name" /> @if ($errors->has('name')) <span class="error">{{ $errors->first('name') }}</span> @endif </div> <div class="form-group"> <label class="small mb-1" for="inputEmailAddress">Email</label> <input class="form-control py-4" id="inputEmailAddress" type="email" aria-describedby="emailHelp" name="email" placeholder="Enter email address" /> @if ($errors->has('email')) <span class="error">{{ $errors->first('email') }}</span> @endif </div> <div class="form-group"> <label class="small mb-1" for="inputPassword">Password</label> <input class="form-control py-4" id="inputPassword" type="password" name="password" placeholder="Enter password" /> @if ($errors->has('password')) <span class="error">{{ $errors->first('password') }}</span> @endif </div> <div class="form-group mt-4 mb-0"> <button class="btn btn-primary btn-block" type="submit">Create Account</button> </div> </form> </div> <div class="card-footer text-center"> <div class="small"><a href="{{url('login')}}">Have an account? Go to login</a></div> </div> </div> </div> </div> </div> </main> </div> <div id="layoutAuthentication_footer"> <footer class="py-4 bg-light mt-auto"> <div class="container-fluid"> <div class="d-flex align-items-center justify-content-between small"> <div class="text-muted">Copyright © Your Website 2019</div> <div> <a href="#">Privacy Policy</a> · <a href="#">Terms & Conditions</a> </div> </div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="{{url('assets/js/scripts.js')}}"></script> </body> </html> |
dashboard.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Dashboard - XpertPhp</title> <link href="{{url('assets/css/styles.css')}}" rel="stylesheet" /> <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script> </head> <body class="sb-nav-fixed"> <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark"> <a class="navbar-brand" href="#">XpertPhp</a><button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button ><!-- Navbar Search--> <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0"> <div class="input-group"> <input class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" /> <div class="input-group-append"> <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button> </div> </div> </form> <!-- Navbar--> <ul class="navbar-nav ml-auto ml-md-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown"> <a class="dropdown-item" href="#">Settings</a><a class="dropdown-item" href="#">Activity Log</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="{{url('logout')}}">Logout</a> </div> </li> </ul> </nav> <div id="layoutSidenav"> <div id="layoutSidenav_nav"> <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion"> <div class="sb-sidenav-menu"> <div class="nav"> <div class="sb-sidenav-menu-heading">Core</div> <a class="nav-link" href="#" ><div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div> Dashboard</a > <div class="sb-sidenav-menu-heading">Interface</div> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts" ><div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div> Layouts <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div ></a> <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion"> <nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="#">Static Navigation</a><a class="nav-link" href="#">Light Sidenav</a></nav> </div> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages" ><div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div> Pages <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div ></a> <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion"> <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages"> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth" >Authentication <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div ></a> <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages"> <nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="login.html">Login</a><a class="nav-link" href="#">Register</a><a class="nav-link" href="#">Forgot Password</a></nav> </div> <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError" >Error <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div ></a> <div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages"> <nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="#">401 Page</a><a class="nav-link" href="#">404 Page</a><a class="nav-link" href="500.html">500 Page</a></nav> </div> </nav> </div> <div class="sb-sidenav-menu-heading">Addons</div> <a class="nav-link" href="#" ><div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div> Charts</a ><a class="nav-link" href="#" ><div class="sb-nav-link-icon"><i class="fas fa-table"></i></div> Tables</a > </div> </div> <div class="sb-sidenav-footer"> <div class="small">Logged in as:</div> Start Bootstrap </div> </nav> </div> <div id="layoutSidenav_content"> <main> <div class="container-fluid"> <h1 class="mt-4">Dashboard</h1> <ol class="breadcrumb mb-4"> <li class="breadcrumb-item active">Dashboard</li> </ol> <div class="row"> <div class="col-xl-3 col-md-6"> <div class="card bg-primary text-white mb-4"> <div class="card-body">Primary Card</div> <div class="card-footer d-flex align-items-center justify-content-between"> <a class="small text-white stretched-link" href="#">View Details</a> <div class="small text-white"><i class="fas fa-angle-right"></i></div> </div> </div> </div> <div class="col-xl-3 col-md-6"> <div class="card bg-warning text-white mb-4"> <div class="card-body">Warning Card</div> <div class="card-footer d-flex align-items-center justify-content-between"> <a class="small text-white stretched-link" href="#">View Details</a> <div class="small text-white"><i class="fas fa-angle-right"></i></div> </div> </div> </div> <div class="col-xl-3 col-md-6"> <div class="card bg-success text-white mb-4"> <div class="card-body">Success Card</div> <div class="card-footer d-flex align-items-center justify-content-between"> <a class="small text-white stretched-link" href="#">View Details</a> <div class="small text-white"><i class="fas fa-angle-right"></i></div> </div> </div> </div> <div class="col-xl-3 col-md-6"> <div class="card bg-danger text-white mb-4"> <div class="card-body">Danger Card</div> <div class="card-footer d-flex align-items-center justify-content-between"> <a class="small text-white stretched-link" href="#">View Details</a> <div class="small text-white"><i class="fas fa-angle-right"></i></div> </div> </div> </div> </div> <div class="row"> <div class="col-xl-6"> <div class="card mb-4"> <div class="card-header"><i class="fas fa-chart-area mr-1"></i>Area Chart Example</div> <div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div> </div> </div> <div class="col-xl-6"> <div class="card mb-4"> <div class="card-header"><i class="fas fa-chart-bar mr-1"></i>Bar Chart Example</div> <div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div> </div> </div> </div> </div> </main> <footer class="py-4 bg-light mt-auto"> <div class="container-fluid"> <div class="d-flex align-items-center justify-content-between small"> <div class="text-muted">Copyright © XpertPhp 2020</div> <div> <a href="#">Privacy Policy</a> · <a href="#">Terms & Conditions</a> </div> </div> </div> </footer> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="{{url('assets/js/scripts.js')}}"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script> <script src="{{url('assets/demo/chart-area-demo.js')}}"></script> <script src="{{url('assets/demo/chart-bar-demo.js')}}"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script> <script src="{{url('assets/demo/datatables-demo.js')}}"></script> </body> </html> |
Step 7: Run The Application
We can start the server and run this application using the below command.
1 | php artisan serve |
Now we will run our example using the below Url in the browser.
1 | http://127.0.0.1:8000/login |