How to Create Facebook for Developers for login Laravel 8
step 1: Install ui
Note:
composer require laravel/ui
php artisan ui vue --auth
step 2: Install Laravel Project
First Install a Laravel project to run below command
composer create-project --prefer-dist laravel/laravel Login_System_PHPStep 3: Setup Database Credentials
Create a new database custom auth and now open your .env file and add your database credentials.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=#Your database name
DB_USERNAME=root #Your database username
DB_PASSWORD=#Your database passwordNow run the migration command and generate a table in the database.
Step: public/assets/css/style.css
/* =============== */
/* Version : css 3 */
/* Creat by : Soeng Souy */
/* =============== */
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
display: flex;
-ms-flex-align: center;
align-items: center;
background-color: #f5f8fb;
}
.form-signin {
width: 100%;
max-width: 480px;
margin: auto;
}
.p-5 {
padding: 2rem !important;
}
/* image */
.mb-3, .my-3 {
margin-bottom: 1rem !important;
}
img {
vertical-align: middle;
border-style: none;
}
/* btn */
.btn-primary {
color: #fff !important;
background-color: #1BA262 !important;
border-color: #1BA262 !important;
padding: 1em;
}
.btn-primary:hover {
color: #fff !important;
background-color: #168652 !important;
border-color: #168652 !important;
padding: 1em;
}
.btn-group-sm>.btn, .btn-sm {
padding: 1.25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
a {
color: #21c87a;
text-decoration: none;
background-color: transparent;
}
p {
color: #646f79;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a:hover {
color: #168652;
text-decoration: none;
}
.text-muted {
color: #8c98a4 !important;
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-facebook:hover {
color: #fff;
background-color: #30497c;
border-color: #2d4373;
}
.btn-twitter {
color: #fff;
background-color: #0c85d0;
border-color: #0b7ec4;
}
.btn-twitter:hover {
color: #fff;
background-color: #0d8ddc;
border-color: #0c85d0;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
background-color:#21C87A;
box-shadow: none !important;
}
.custom-control-label:before{
box-shadow: none !important;
}
/* login form */
.login-form {
width: 100%;
max-width: 480px;
margin: auto;
}
.login-form form {
padding: 30px;
}
input:focus {
box-shadow: none !important;
border: 1px solid #20C477 !important;
outline-width: 0;
}
.form-control {
display: block;
width: 100%;
height: calc(1.7em + 1.5rem + 2px);
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
color: #151b26;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #e3e6f0;
border-radius: 0.25rem;
transition: all 0.2s ease-in-out;
}
.input-group-text {
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 0.75rem 1rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
color: #8f95a0;
text-align: center;
white-space: nowrap;
background-color: #fff;
border: 1px solid #e3e6f0;
border-radius: 0.25rem;
}
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.login-form h2 {
margin: 0 0 15px;
}
.form-control, .login-btn {
border-radius: 2px;
}
.input-group-prepend .fa {
font-size: 18px;
}
.login-btn {
font-size: 15px;
font-weight: bold;
min-height: 40px;
}
.social-btn .btn {
border: none;
margin: 10px 3px 0;
opacity: 1;
}
.social-btn .btn:hover {
opacity: 0.9;
}
.social-btn .btn-secondary, .social-btn .btn-secondary:active {
background: #507cc0 !important;
}
.social-btn .btn-info, .social-btn .btn-info:active {
background: #64ccf1 !important;
}
.social-btn .btn-danger, .social-btn .btn-danger:active {
background: #df4930 !important;
}
.or-seperator {
margin-top: 20px;
text-align: center;
border-top: 1px solid #ccc;
}
.or-seperator i {
padding: 0 10px;
color: #8c98a4;
background: #f7f7f7;
position: relative;
font-size: 0.75rem;
top: -11px;
z-index: 1;
} Now run the migration command and generate a table in the database.
php artisan migrateStep 4: Create Register Page Routes
Now go in your routes>web.php file and create two routes here.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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('auth.login');
});
// ------------------------------register---------------------------------------
Route::get('/register', 'App\Http\Controllers\Auth\RegisterController@register')->name('register');
Route::post('/register', 'App\Http\Controllers\Auth\RegisterController@storeUser')->name('register');
Route::view('/home', 'home')->middleware('auth');
Route::group(['middleware' => 'auth:admin'], function () {
});
Auth::routes();
// -----------------------------login-----------------------------------------
Route::get('/login', 'App\Http\Controllers\Auth\LoginController@login')->name('login');
Route::post('/login', 'App\Http\Controllers\Auth\LoginController@authenticate');
Route::get('/logout', 'App\Http\Controllers\Auth\LoginController@logout')->name('logout');
// -----------------------------forget password ------------------------------
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');
Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');
Step 5: Create Register Page Controller
Now create a new controller RegisterController to adding the below code in your terminal.
php artisan make:controller Auth/RegisterControllerAfter creating the register controller add the below code on it.
app\Http\Controllers\Auth\RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Hash;
class RegisterController extends Controller
{
public function register()
{
return view('auth.register');
}
public function storeUser(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:8|confirmed',
'password_confirmation' => 'required',
]);
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
return redirect('login');
}
}Step 6: Create Register Blade Files
Now you need to create your blades files. First, create new folder layouts in your resources>views directory, then create a new file app.blade.php in the layout folder the same as below.
resources\views\layouts\app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>
<!-- --------------library bootstrap --------------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
</body>
</html>Now create a new folder auth in your resources>views directory and add a new file register.blade.php then add the below code on it.
resources\views\auth\register.blade.php
@extends('layouts.app')
<div class="login-form">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign up</h1>
<p>Fill out the form to get started.</p>
</div>
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input id="name" type="text" class="form-control form__input @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}"placeholder="Name" autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-envelope form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Email" autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Password" autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-key"></i>
</span>
</div>
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" autocomplete="new-password">
</div>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Signup</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="sign-in.html">Signin</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
You can run your register functionality run perfectly in your browser. Now we learn how to work login functionality in laravel without auth.
Step 7: Create Login Controller
Now create your LoginController to add the below command in your terminal and add the below code on it.
php artisan make:controller Auth/LoginControllerThe controller is shown in your App\Http\Controllers directory.
app\Http\Controllers\Auth\LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Auth;
class LoginController extends Controller
{
public function login()
{
return view('auth.login');
}
public function authenticate(Request $request)
{
$request->validate([
'email' => 'required|string|email',
'password' => 'required|string',
]);
$credentials = $request->only('email', 'password');
if (Auth::attempt($credentials)) {
return redirect()->intended('home');
}
return redirect('login')->with('error', 'Oppes! You have entered invalid credentials');
}
public function logout() {
Auth::logout();
return redirect('login');
}
}Step 8: Create Login Blade File
After creating a login controller to showing a login view just create a login page inside the auth folder and add the below code.
resources/views/auth/login.blade.php
@extends('layouts.app')
<div class="login-form">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign in</h1>
<p>Signin to manage your account.</p>
</div>
@if(session()->has('error'))
<div class="alert alert-danger">
{{ session()->get('error') }}
</div>
@endif
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-6">
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input class="custom-control-input"type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="custom-control-label" for="remember">
Remember Me
</label>
</div>
<!-- End Checkbox -->
</div>
<div class="col-6 text-right">
<a class="float-right" href="recover-account.html">Forgot Password?</a>
</div>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Signin</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Do not have an account? <a href="{{route('register')}}">Signup</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
Step 9: Add Home Functionality
Add Route
Route::get('home', 'HomeController@home')->name('home');Add Controller
php artisan make:controller HomeControllerNow add the below code in your HomeContoller.
app\Http\Controllers\HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Session;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('home');
}
}After successfully login you will be redirected to the home page, so you have to create a new page in your resources/views directory and add the below code on it. This page show after you have successfully log in a user.
resources/views/home.blade.php
@extends('layouts.app')
<div class="login-form">
<form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Admin Dashboard</h1>
<p>Welcome to my dashboard</p>
</div>
<div class="text-center mb-3">
<p class="text-muted"><a href="reset-password.php">Reset Password</a></p>
</div>
<div class="text-center mb-3">
<p class="text-muted"><a href="{{route('logout')}}">Logout</a></p>
</div>
<div class="or-seperator"><i>JOIN</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
@soengsouy
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
@soengsouy
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>After custom registration and login functionality in Laravel now we learn how to create custom forgot and reset password functionality in Laravel. First, create forgot password functionality in Laravel. Create two routes in your web.php file.
Step 10: Create Forget Password Routes
routes/web.php
// -----------------------------forget password ------------------------------
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');Step 11: Create Forget Password Controller
Now you need to create a ForgotPasswordController just run the below command.
php artisan make:controller Auth/ForgotPasswordControllerAfter creating the controller now add the below code on it.
app/Http/Controllers/Auth/ForgotPasswordController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use DB;
use Carbon\Carbon;
use Mail;
class ForgotPasswordController extends Controller
{
public function getEmail()
{
return view('auth.password.email');
}
public function postEmail(Request $request)
{
$request->validate([
'email' => 'required|email|exists:users',
]);
$token = Str::random(60);
DB::table('password_resets')->insert(
['email' => $request->email, 'token' => $token, 'created_at' => Carbon::now()]
);
Mail::send('auth.password.verify',['token' => $token], function($message) use ($request) {
$message->from($request->email);
$message->to('codingdriver15@gmail.com');
$message->subject('Reset Password Notification');
});
return back()->with('message', 'We have e-mailed your password reset link!');
}
}Step 12: Create Forget Password Migration
If you add your email in your forget password input then your send a link via mail function using the controller function so here you need to add a Forget password migration to running just below command.
php artisan make:migration create_password_resets_tableAfter creating a password reset table add the below code on it.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePasswordResetsTable extends Migration {
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('password_resets', function (Blueprint $table) {
$table->string('email')->index();
$table->string('token');
$table->timestamp('created_at');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('password_resets');
}
}Now insert it on the database runs the below command.
php artisan migrateStep 13: Forget Password View File
In your Auth folder now create a password folder and then create an email.blade.php file and then add the below code on it.
resources\views\auth\password\email.blade.php
@extends('layouts.app')
<div class="login-form">
<form method="POST" action="/forget-password">
@csrf
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Recover account</h1>
<p>Enter your email address and an email with instructions will be sent to you.</p>
</div>
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Email" autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Recover account</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="{{route('register')}}">Signin</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
Now if you add an email to forget password option and send then its go in your email trap where you can click the link and update your password easily. First, add your email trap details in your .env file. If you have not any email trap account then please create first to go mailtrap.io. Mailtrap is a free mail testing website.
Step 14: Add Mailtrap Details in .env File
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=331e7bae#####
MAIL_PASSWORD=25a1052b#####
MAIL_ENCRYPTION=null
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=331e7bae#####
MAIL_PASSWORD=25a1052b#####
MAIL_ENCRYPTION=null
Now Checkout the mail trap where you received an email. Below create a blade file to sending email in your views>auth directory this file goes in your email trap inbox.
Step 15: Create Verify Blade
resources/views/auth/verify.blade.php
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Verify Your Email Address</div>
<div class="card-body">
@if (session('resent'))
<div class="alert alert-success" role="alert">
{{ __('A fresh verification link has been sent to your email address.') }}
</div>
@endif
<a href="{{ url('/reset-password/'.$token) }}">Click Here</a>
</div>
</div>
</div>
</div>
</div>Now click the link which is received in your inbox now you redirect a link where your update your new password check out how it works.
Step 16: Create Reset Password Routes
Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');
Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');
Step 17: Create a Reset Password Controller
After create reset password routes now you need to create a new controller ResetPasswordController in your App>Http directory.
php artisan make:controller Auth\ResetPasswordControllerNow add the below code in this controller.
app\Http\Controllers\Auth\ResetPasswordController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;
use App\Models\User;
use Hash;
class ResetPasswordController extends Controller
{
public function getPassword($token) {
return view('auth.password.reset', ['token' => $token]);
}
public function updatePassword(Request $request)
{
$request->validate([
'email' => 'required|email|exists:users',
'password' => 'required|string|min:6|confirmed',
'password_confirmation' => 'required',
]);
$updatePassword = DB::table('password_resets')
->where(['email' => $request->email, 'token' => $request->token])
->first();
if(!$updatePassword)
return back()->withInput()->with('error', 'Invalid token!');
$user = User::where('email', $request->email)
->update(['password' => Hash::make($request->password)]);
DB::table('password_resets')->where(['email'=> $request->email])->delete();
return redirect('/login')->with('message', 'Your password has been changed!');
}
}Step 18: Create Reset Password Blade File
Now create to showing reset password option blade file in your views>authdirectory.
resources\views\auth\password\reset.blade.php
@extends('layouts.app')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Reset Password</div>
<div class="card-body">
<form method="POST" action="/reset-password">
@csrf
<input type="hidden" name="token" value="{{ $token }}">
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" autocomplete="new-password">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
Reset Password
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Well, you have done Laravel Custom Authentication system – Custom Login, Register, Forget Password in your Laravel app. I hope you enjoy more this tutorial. If you have any query please send a comment below.
Step 19: Download Socialite Package
The Laravel socialite package makes authentification with traditional social networks simple. So download the socialite package just running the below command.
composer require laravel/socialiteAfter successfully install the socialite package, now configure the aliases and providers array adding aliased and provider in config/app.php.
config/app.php
'providers' => [
// Other service providers…
Laravel\Socialite\SocialiteServiceProvider::class,
],
'aliases' => [
// Other aliases…
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
], now open the config\services.php and add the below code on it.
config\services.php
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('FACEBOOK_REDIRECT'),
],Step 20: Get secrets from Facebook
Here we get CLIENT ID and CLIENT SECRET for the Facebook login button in laravel based project, So we need to go https://developers.facebook.com/ and create an app. Create an app in the config/service.php file just like below.
1) First Go to My Apps and click create the new app you get a popup just like below. add your new app name and your Facebook email id on it.
2) Next, go to Settings -> Basic, copy your App Id and App Secret and add in your .env file we have displayed below. Follow the next step before going to the Facebook login step.
3) Now click on the ‘+’ button beside ‘PRODUCTS’, select quickstart you got a window there your see four option (‘ios’, ‘android’, ‘web’, ‘other’) select web option then your see below image where you need to add your website URL: https://localhost:8000 and click on ‘Save’ as shown below…
4) Then go to Facebook Login -> Settings, scroll down to ‘Valid OAuth Redirect URL’ and add your callback /redirect URL: https://localhost:8000/callback and Save changes as illustrated below…
Now our App settings are done, copy your client id, client secret, and predict you're and save in .env file.
FACEBOOK_CLIENT_ID=2249929###
FACEBOOK_CLIENT_SECRET=1ea76a73f#########
FACEBOOK_REDIRECT=http://localhost:8000/callbackStep 21: Make Migration & Add FIllable Property
Now open app/User.php and fillable property facebook_id inside the fillable array.
protected $fillable = [
'name', 'email', 'password', 'facebook_id'
];Now, open app/database/create_users_table.php and put the below code here.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->string('facebook_id')->nullable();
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
After adding the migration file now run the migrate command.
php artisan migrateStep 7: Add Routes
In this step we create routes for Facebook login, add two routes in your web.php file.
app/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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('auth.login');
});
// ------------------------------register---------------------------------------
Route::get('/register', 'App\Http\Controllers\Auth\RegisterController@register')->name('register');
Route::post('/register', 'App\Http\Controllers\Auth\RegisterController@storeUser')->name('register');
Route::view('/home', 'home')->middleware('auth');
Route::group(['middleware' => 'auth:admin'], function () {
});
Auth::routes();
// -----------------------------login-----------------------------------------
Route::get('/login', 'App\Http\Controllers\Auth\LoginController@login')->name('login');
Route::post('/login', 'App\Http\Controllers\Auth\LoginController@authenticate');
Route::get('/logout', 'App\Http\Controllers\Auth\LoginController@logout')->name('logout');
// -----------------------------forget password ------------------------------
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');
Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');
// -----------------------------login facebook ------------------------------
Route::get('/redirect', 'App\Http\Controllers\Auth\SocialAuthFacebookController@redirect');
Route::get('/callback', 'App\Http\Controllers\Auth\SocialAuthFacebookController@callback');
Step 22: Create SocialAuthController
php artisan make:controller SocialauthController
php artisan make:controller SocialauthControllerdd
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response,File;
use Socialite;
use App\User;
class SocialauthController extends Controller
{
public function redirect()
{
return Socialite::driver('facebook')->redirect();
}
public function callback()
{
try {
$user = Socialite::driver('facebook')->user();
$create['name'] = $user->getName();
$create['email'] = $user->getEmail();
$create['facebook_id'] = $user->getId();
$userModel = new User;
$createdUser = $userModel->addNew($create);
Auth::loginUsingId($createdUser->id);
return redirect()->route('home');
} catch (Exception $e) {
return redirect('redirect');
}
}
}Step 23: Add Facebook-Button in Login Page
Add the below code in your login.blade.php file.
Resources/Views/Auth/login.blade.php
@extends('layouts.app')
<div class="login-form">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign in</h1>
<p>Signin to manage your account.</p>
</div>
@if(session()->has('error'))
<div class="alert alert-danger">
{{ session()->get('error') }}
</div>
@endif
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Email" autocomplete="email" autofocus">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Password" autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-6">
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input class="custom-control-input"type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="custom-control-label" for="remember">
Remember Me
</label>
</div>
<!-- End Checkbox -->
</div>
<div class="col-6 text-right">
<a class="float-right" href="{{route('forget-password')}}">Forgot Password?</a>
</div>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Signin</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Do not have an account? <a href="{{route('register')}}">Signup</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<a href="{{url('/redirect')}}" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</a>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>Step 9: Run Development Server
After successfully update all run the development server just adding the below command in terminal.
php artisan serveAfter this go to the browser and check using the login page.
https://localhost:8000/
0 Comments
CAN FEEDBACK
Emoji