How to Create a Blog with Laravel 5+ Part 4 (Authentication)
This might be the tricky part to create a secure website but not in Laravel, creating authentication in Laravel is so easy thanks to their two commands, we just have to run a couple of commands and almost everything is configured for us out of the box we just have to remove and update few blades files that are not needed and we’re done.
Let’s get started
Artisan Commands
Just run these commands and watch the magic happens.
php artisan make:auth
php artisan migrate
Once successfully generating authentication scaffolding, the resources
directory may look like this now.
resources
- assets
- lang
- views
- auth
- - passwords
- - - email.blade.php
- - - reset.blade.php
- - login.blade.php
- - register.blade.php
- layouts
- - app.blade.php
- pages
- partials
- home.blade.php
- main.blade.php
Noticed the new directory and blade files added, under auth
, layouts
and home.blade.php
, it’s complete at this stage actually, navigate to your Blog http://127.0.0.1:8000/login
and amazed it’s there already working just have different layout, what we need to do now is simply update that layout and we’re done.
_header.blade.php
Let’s add Login
, Register
menu items and a Logout
link in the header section.
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name') }} @yield('title')</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="{{ asset('css/ie10-viewport-bug-workaround.css') }}" />
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{ asset('css/blog.css') }}" />
@yield('stylesheet')
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<ul class="nav navbar-nav">
<li><a class="blog-nav-item {{ Request::is('/') ? 'active' : '' }}" href="/">Home</a></li>
<li><a class="blog-nav-item {{ Request::is('show-case') ? 'active' : '' }}" href="/show-case">Show Case</a></li>
<li><a class="blog-nav-item {{ Request::is('services') ? 'active' : '' }}" href="/services">Services</a></li>
<li><a class="blog-nav-item {{ Request::is('contact') ? 'active' : '' }}" href="/contact">Contact</a></li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a class="blog-nav-item {{ Request::is('login') ? 'active' : '' }}" href="{{ route('login') }}">Login</a></li>
<li><a class="blog-nav-item {{ Request::is('register') ? 'active' : '' }}" href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</nav>
</div>
</div>
auth/login.blade.php
@extends('main')
@section('title', '| Login')
@section('content')
<div class="container">
<div class="row mt-5">
<!--code here didn't touch-->
</div>
</div>
@endsection
auth/register.blade.php
@extends('main')
@section('title', '| Register')
@section('content')
<div class="container">
<div class="row mt-5">
<!--code here didn't touch-->
</div>
</div>
@endsection
auth/passwords/email.blade.php
@extends('main')
@section('title', '| Forgot Password')
@section('content')
<div class="container">
<div class="row mt-5">
<!--code here didn't touch-->
</div>
</div>
@endsection
auth/passwords/reset.blade.php
@extends('main')
@section('title', '| Reset Password')
@section('content')
<div class="container">
<div class="row mt-5">
<!--code here didn't touch-->
</div>
</div>
@endsection
Finishing…, horrayy
Now that all authentication pages are updated, we’ve also displayed Login
and Register
pages to site header section, we can tell it’s safe to delete the unnecessary directory and blade files.
NOTE: Make sure to check your end first before deleting these files, better safe than sorry and of course backup your works first.
Directory & file to remove
Directory and file listed here can be safely remove.
app/Http/Contollers/HomeController.php
- layouts
- - app.blade.php
- home.blade.php
One more thing…
By default with the authentication scaffolding upon successful login or registration, it redirects you to /home
URL, which in this case deleted, and we resulted to 404 Error, let’s correct that one.
routes/web.php
Update routes
to the below code and remove get /home
, since we already have one.
<?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('/', 'PagesController@getIndex');
Route::get('show-case', 'PagesController@getShowCase');
Route::get('services', 'PagesController@getServices');
Route::get('contact', 'PagesController@getContact');
Auth::routes();
app/Http/Contollers/Auth/LoginController.php, app/Http/Contollers/Auth/RegisterController.php and app/Http/Contollers/Auth/ResetPasswordController.php
Update $redirectTo
properties to the following code below.
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = '/';
That’s it, happy coding ^_^, see you in the next part.