Laravel Passwordless Authentication Part 3
6 months ago
admin
Laravel
In the third part of this tutorial, we will add the registration and login forms, and finally, we will add the required routes.
Create the registration form
Inside views let's create a new folder 'auth' inside let's add a new file 'register.blade.php' inside we have the registration form.
@extends('layouts.app')
@section('content')
<div class="row my-5">
<div class="col-md-6 mx-auto">
@include('layouts.alerts')
<div class="card">
<div class="card-header bg-white text-center">
<h5 class="mt-2">
Create an account
</h5>
</div>
<div class="card-body">
<form action="{{route('store')}}" method="POST">
@csrf
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="form-outline mb-4">
<input type="text" name="name" id="name" class="form-control" />
<label class="form-label" for="name">Name*</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" name="email" id="email" class="form-control" />
<label class="form-label" for="email">Email address*</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>
</form>
</div>
</div>
</div>
</div>
@endsection
Create the login form
Always inside the 'auth' folder let's add a new file 'login.blade.php' Inside we have the login form.
@extends('layouts.app')
@section('content')
<div class="row my-5">
<div class="col-md-6 mx-auto">
@include('layouts.alerts')
<div class="card">
<div class="card-header bg-white text-center">
<h5 class="mt-2">
Login
</h5>
</div>
<div class="card-body">
<form action="{{route('login')}}" method="POST">
@csrf
<!-- 2 column grid layout with text inputs for the first and last names -->
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" name="email" id="email" class="form-control" />
<label class="form-label" for="email">Email address*</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>
</form>
</div>
</div>
</div>
</div>
@endsection
Update the welcome page
Next, let's update the welcome page:
@extends('layouts.app')
@section('content')
<div class="row my-5">
<div class="col-md-8 mx-auto">
<div class="card">
<div class="card-header bg-white text-center">
<h4 class="mt-2">
Welcome
</h4>
</div>
</div>
</div>
</div>
@endsection
Add routes
Finally, let's add the routes we need.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::middleware('auth')->group(function() {
Route::get('/', function () {
return view('welcome');
})->name('home');
Route::post('logout', [UserController::class, 'logout'])->name('logout');
});
Route::middleware('guest')->group(function() {
Route::get('register', [UserController::class, 'register'])->name('register');
Route::post('register', [UserController::class, 'store'])->name('store');
Route::get('login', [UserController::class, 'login'])->name('login');
Route::post('login', [UserController::class, 'auth'])->name('auth');
Route::middleware('signed')->get('session/{email}',
[UserController::class, 'session'])->name('user.session');
});