Laravel 6 Custom Authentication Login and Registration Example Tutorial – onlinecode
In this post we will give you information about Laravel 6 Custom Authentication Login and Registration Example Tutorial – onlinecode. Hear we will give you detail about Laravel 6 Custom Authentication Login and Registration Example Tutorial – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, in this article, we are going to you how to create a custom authentication login and registration in laravel 6. 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 6.
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 6, 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.
composer create-project --prefer-dist laravel/laravel larave6_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.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name(larave6_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.
php artisan migrate
Step 4: Create Route
Add the following route code in the “routes/web.php” file.
<?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.
php artisan make:controller AuthController
AuthController.php
<?php namespace AppHttpControllers; use IlluminateHttpRequest; use Validator,Redirect,Response; Use AppUser; use IlluminateSupportFacadesAuth; use IlluminateSupportFacadesHash; 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
<!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 - onlinecode</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 > <div id="layoutAuthentication"> <div id="layoutAuthentication_content"> <main> <div > <div > <div > <div > <div ><h3 >Login</h3></div> <div > <form action="{{url('post-login')}}" method="POST" id="logForm"> {{ csrf_field() }} <div > <label for="inputEmailAddress">Email</label> <input id="inputEmailAddress" name="email" type="email" placeholder="Enter email address" /> @if ($errors->has('email')) <span >{{ $errors->first('email') }}</span> @endif </div> <div > <label for="inputPassword">Password</label> <input id="inputPassword" type="password" name="password" placeholder="Enter password" /> @if ($errors->has('password')) <span >{{ $errors->first('password') }}</span> @endif </div> <div > <div > <input id="rememberPasswordCheck" type="checkbox" /> <label for="rememberPasswordCheck">Remember password</label> </div> </div> <div > <a href="#">Forgot Password?</a> <button type="submit">Login</button> </div> </form> </div> <div > <div ><a href="{{url('register')}}">Need an account? Sign up!</a></div> </div> </div> </div> </div> </div> </main> </div> <div id="layoutAuthentication_footer"> <footer > <div > <div > <div >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
<!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 - onlinecode</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 > <div id="layoutAuthentication"> <div id="layoutAuthentication_content"> <main> <div > <div > <div > <div > <div ><h3 >Create Account</h3></div> <div > <form action="{{url('post-register')}}" method="POST" id="regForm"> {{ csrf_field() }} <div > <label for="inputFirstName">Full Name</label> <input id="inputFirstName" type="text" name="name" placeholder="Enter Full Name" /> @if ($errors->has('name')) <span >{{ $errors->first('name') }}</span> @endif </div> <div > <label for="inputEmailAddress">Email</label> <input id="inputEmailAddress" type="email" aria-describedby="emailHelp" name="email" placeholder="Enter email address" /> @if ($errors->has('email')) <span >{{ $errors->first('email') }}</span> @endif </div> <div > <label for="inputPassword">Password</label> <input id="inputPassword" type="password" name="password" placeholder="Enter password" /> @if ($errors->has('password')) <span >{{ $errors->first('password') }}</span> @endif </div> <div > <button type="submit">Create Account</button> </div> </form> </div> <div > <div ><a href="{{url('login')}}">Have an account? Go to login</a></div> </div> </div> </div> </div> </div> </main> </div> <div id="layoutAuthentication_footer"> <footer > <div > <div > <div >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
<!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 - onlinecode</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 > <nav > <a href="#">onlinecode</a><button id="sidebarToggle" href="#"><i ></i></button ><!-- Navbar Search--> <form > <div > <input type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" /> <div > <button type="button"><i ></i></button> </div> </div> </form> <!-- Navbar--> <ul > <li > <a id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i ></i></a> <div aria-labelledby="userDropdown"> <a href="#">Settings</a><a href="#">Activity Log</a> <div ></div> <a href="{{url('logout')}}">Logout</a> </div> </li> </ul> </nav> <div id="layoutSidenav"> <div id="layoutSidenav_nav"> <nav id="sidenavAccordion"> <div > <div > <div >Core</div> <a href="#" ><div ><i ></i></div> Dashboard</a > <div >Interface</div> <a href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts" ><div ><i ></i></div> Layouts <div ><i ></i></div ></a> <div id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion"> <nav ><a href="#">Static Navigation</a><a href="#">Light Sidenav</a></nav> </div> <a href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages" ><div ><i ></i></div> Pages <div ><i ></i></div ></a> <div id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion"> <nav id="sidenavAccordionPages"> <a href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth" >Authentication <div ><i ></i></div ></a> <div id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages"> <nav ><a href="login.html">Login</a><a href="#">Register</a><a href="#">Forgot Password</a></nav> </div> <a href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError" >Error <div ><i ></i></div ></a> <div id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages"> <nav ><a href="#">401 Page</a><a href="#">404 Page</a><a href="500.html">500 Page</a></nav> </div> </nav> </div> <div >Addons</div> <a href="#" ><div ><i ></i></div> Charts</a ><a href="#" ><div ><i ></i></div> Tables</a > </div> </div> <div > <div >Logged in as:</div> Start Bootstrap </div> </nav> </div> <div id="layoutSidenav_content"> <main> <div > <h1 >Dashboard</h1> <ol > <li >Dashboard</li> </ol> <div > <div > <div > <div >Primary Card</div> <div > <a href="#">View Details</a> <div ><i ></i></div> </div> </div> </div> <div > <div > <div >Warning Card</div> <div > <a href="#">View Details</a> <div ><i ></i></div> </div> </div> </div> <div > <div > <div >Success Card</div> <div > <a href="#">View Details</a> <div ><i ></i></div> </div> </div> </div> <div > <div > <div >Danger Card</div> <div > <a href="#">View Details</a> <div ><i ></i></div> </div> </div> </div> </div> <div > <div > <div > <div ><i ></i>Area Chart Example</div> <div ><canvas id="myAreaChart" width="100%" height="40"></canvas></div> </div> </div> <div > <div > <div ><i ></i>Bar Chart Example</div> <div ><canvas id="myBarChart" width="100%" height="40"></canvas></div> </div> </div> </div> </div> </main> <footer > <div > <div > <div >Copyright © onlinecode 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.
php artisan serve
Now we will run our example using the below Url in the browser.
http://127.0.0.1:8000/login
Hope this code and post will helped you for implement Laravel 6 Custom Authentication Login and Registration Example Tutorial – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs