Custom Authentication Sign In Sign Up in Laravel

Custom Authentication Sign In Sign Up in Laravel

Create dabase Table

CREATE TABLE `users` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`remember_token` varchar(255) NOT NULL,
`updated_at` varchar(255) NOT NULL,
`created_at` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Assign routes URL http://localhost/laravel/login
laravel\app\Http\routes.php

Route::get('login',function(){
   return view('login');
});
Route::post ( '/login', 'MainController@login' );
Route::post ( '/register', 'MainController@register' );
Route::get ( '/logout', 'MainController@logout' );

Create Login template
laravel\resources\views\login.blade.php

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

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Authentication in Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ asset('/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />   
<script src="{{ asset('/bootstrap/js/modernizr.min.js') }}"></script>
<script src="{{ asset('/bootstrap/js/bootstrap.min.j') }}"></script>
<script src="{{ asset('/bootstrap/js/jquery.min.js') }}"></script>
</head>
<body id="page-top" class="index">
 <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
            </div>
 
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#home">Home</a>
                    </li>
                    @if (session()->get('name'))
     <li class="laravel-right">Welcome {{session()->get('name') }} , <a class="laravel-right" href="/laravel/logout">Logout</a> </li> @else
     <li class="laravel-right"><a class="laravel-green" href="#" id="auth" onclick="document.getElementById('authentication').style.display='block'">Login / SignUp</a></li>
     @endif
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <section class="content">
        <div class="container">
            <div class="row">
                <div id="authentication" class="laravel-modal">
  <span onclick="document.getElementById('authentication').style.display='none'" class="laravel-closebtn laravel-grey laravel-hover-red laravel-container laravel-padding-16 laravel-display-topright">X</span>
 
  <div class="laravel-modal-content laravel-card-8 laravel-animate-zoom" style="max-width: 600px">
   <div class="col-md-6 laravel-card-8 laravel-teal" onclick="openForm('Login')">
    <h3>Sign In</h3>
   </div>
   <div class="col-md-6 laravel-card-8 laravel-teal"
    onclick="openForm('Register')">
    <h3>Sign Up</h3>
   </div>
   <div style="margin-top: 25px !important;">
    <div id="Login" class="laravel-container form">
     <div class="laravel-container ">
      <div class="laravel-section">
       <br> <br>@if (count($errors->login) > 0)
       <div class="alert alert-danger">
        <ul>
         @foreach ($errors->login->all() as $error)
         <P>{{ $error }}</p>
         @endforeach
        </ul>
       </div>
       @endif 
       @if (Session::has('message'))
       <div class="alert alert-warning">{{ Session::get('message') }}</div>
       @endif
       <form action="/laravel/login" method="POST">
        {{ csrf_field() }} <input type="hidden" class="form-control" name="redirurl" value="{{ $_SERVER['REQUEST_URI'] }}"> 
        <div class="form-group">
        <label><b>Username</b></label>
        <input name="username" class="form-control" type="text" placeholder="Enter Username" required> 
        </div>
        <div class="form-group">
        <label><b>Password</b></label>
        <input class="form-control" name="password" type="password" placeholder="Enter Password" required> 
        </div>
        <div class="form-group"><input type="submit" class="btn btn-success" value="Login" style="width:100%;"></div> 
        <div class="checkbox"><label><input  type="checkbox" checked="checked"> Remember me</label>
       </form>
      </div>
     </div>
     <div class="laravel-container laravel-border-top laravel-padding-16 ">
      <button onclick="document.getElementById('authentication').style.display='none'" type="button" class="btn btn-danger">Cancel</button>
      <span class="laravel-right laravel-padding laravel-hide-small">Forgot <a href="#">password?</a></span>
     </div>
    </div>
   </div>
   <div id="Register" class="laravel-container form ">
    <div class="laravel-container">
     <div class="laravel-section">
 
      <br> <br> 
      @if (count($errors->register) > 0)
      <div class="alert alert-danger">
       <ul>
        @foreach ($errors->register->all() as $error)
        <P>{{ $error }}</p>
        @endforeach
       </ul>
      </div>
      @endif
      <form action="/laravel/register" method="POST" id="regForm">
       {{ csrf_field() }} <input type="hidden" name="redirurl"
        value="{{ $_SERVER['REQUEST_URI'] }}"> 
       <div class="form-group">
       <label><b>Email</b></label>
       <input class="form-control" type="text" name="email" placeholder="Enter Email" value="{{ old('email') }}" required> 
       </div>
       <div class="form-group">
       <label><b>Username</b></label>
       <input class="form-control" type="text" name="name" placeholder="Enter username" required value="{{ old('name') }}"> 
       </div>
       <div class="form-group">
       <label><b>Password</b></label> 
       <input class="form-control" type="password" name="password" required placeholder="Enter Password"> 
       </div> 
       <div class="form-group">
       <label><b>Confirm Password</b></label> 
       <input class="form-control" required type="password" name="password_confirmation" placeholder="Enter Password">
       </div>
       <div class="form-group"><input type="submit" class="btn btn-success" value="SignUp" style="width:100%;"></div> 
      </form>
     </div>
    </div>
    <div class="laravel-container laravel-border-top laravel-padding-16 ">
     <button onclick="document.getElementById('authentication').style.display='none'" type="button" class="btn btn-danger">Cancel</button>
    </div>
   </div>
  </div>
 </div>
 <div class="fluid-container"></div>
            </div>
        </div>
    </section>
 <script> 
openForm("Login");
function openForm(formName) {
     
    var x = document.getElementsByClassName("form");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    document.getElementById(formName).style.display = "block";  
}
</script>
@if (Session::has('message'))
 <script>  $('#auth').click(); </script>
 @endif @if($errors->login->any())
 <script>  $('#auth').click();</script>
 @endif @if($errors->register->any())
 <script>  $('#auth').click(); openForm('Register');</script>
 @endif
<style>
.navbar {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}
.navbar a:focus {
  outline: none;
}
.navbar .navbar-nav {
  letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
  outline: none;
}
.navbar-default,
.navbar-inverse {
  border: none;
}
 
.laravel-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.laravel-grey, .laravel-hover-grey:hover {
    color: #000!important;
    background-color: #9e9e9e!important;
}
.laravel-container {
    padding: 0.01em 16px;
}
.laravel-padding-16, .laravel-padding-hor-16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important;
}
.laravel-display-topright {
    position: absolute;
    right: 0;
    top: 0;
}
.laravel-closebtn {
    text-decoration: none;
    float: right;
    font-size: 24px;
    font-weight: bold;
    color: inherit;
}
.laravel-animate-zoom {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
}
.laravel-card-8 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
}
.laravel-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}
.laravel-teal, .laravel-hover-teal:hover {
    color: #fff!important;
    background-color: #009688!important;
}
.laravel-card-8 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
}
.laravel-section {
    margin-top: 36px!important;
    margin-bottom: 16px!important;
}
.laravel-green, .laravel-hover-green:hover {
    color: #fff!important;
    background-color: #4CAF50!important;
}
.laravel-right {
    float: right!important;
}
</style> 
</body>
</html>

Create Controller

laravel\app\Http\Controllers\MainController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use Hash;
use Auth;
use Redirect;
use Session;
use Validator;
use Illuminate\Support\Facades\Input;
 
class MainController extends Controller {
public function login(Request $request) {
  $rules = array (
     
    'username' => 'required',
    'password' => 'required'
  );
  $validator = Validator::make ( Input::all (), $rules );
  if ($validator->fails ()) {
   return Redirect::back ()->withErrors ( $validator, 'login' )->withInput ();
  } else {
   if (Auth::attempt ( array (
      
     'name' => $request->get ( 'username' ),
     'password' => $request->get ( 'password' ) 
   ) )) {
    session ( [ 
       
      'name' => $request->get ( 'username' ) 
    ] );
    return Redirect::back ();
   } else {
    Session::flash ( 'message', "Invalid Credentials , Please try again." );
    return Redirect::back ();
   }
  }
 }
 public function register(Request $request) {
  $rules = array (
    'email' => 'required|unique:users|email',
    'name' => 'required|unique:users|alpha_num|min:4',
    'password' => 'required|min:6|confirmed'
  );
  $validator = Validator::make ( Input::all (), $rules );
  if ($validator->fails ()) {
   return Redirect::back ()->withErrors ( $validator, 'register' )->withInput ();
  } else {
   $user = new User ();
   $user->name = $request->get ( 'name' );
   $user->email = $request->get ( 'email' );
   $user->password = Hash::make ( $request->get ( 'password' ) );
   $user->remember_token = $request->get ( '_token' );
    
   $user->save ();
   return Redirect::back ();
  }
 }
 public function logout() {
  Session::flush ();
  Auth::logout ();
  return Redirect::back ();
 }
}

localhost url http://localhost/laravel/login

Tutorial101

article

Saturday, May 14, 2016

Custom Authentication Sign In Sign Up in Laravel

Related Post

Search This Blog

HOME

Category

Popular Posts