In this tutorial, I will share how to setup Laravel Fortify with Bootstrap 4 in a Laravel 8 application. We will cover:
- setting up a laravel app
- user registration
- login
- resetting password
- email verification
Install Laravel 8 project
composer create-project --prefer-dist laravel/laravel lara8auth
cd lara8auth
Open your newly created project in IDE of choice I will be using Visual Studio Code
Configure database
In your .env file update the database configuration variables so that your laravel application knows which database to use.
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=
Install Fortify
composer require laravel/fortify
Next, we will publish Fortify's resources:
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
Next, we will migrate the database:
php artisan migrate
Install bootstrap
We will also be installing jquery and popper.js because bootstrap requires these packages
npm i
npm install --save bootstrap jquery popper.js cross-env
Import packages in the resources/js/bootstrap.js file
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {
}
Delete resources/css folder and create app.scss file in resources/sass
rm -rf resources/css
mkdir resources/sass
touch resources/sass/app.scss
Import packages in the resources/sass/app.scss file
// bootstrap
@import "~bootstrap/scss/bootstrap";
Next update webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Compile assets
npm run dev
Add Auth Views
In your resources/views folder create two folders auth and layouts
mkdir resources/views/layouts resources/views/auth
Next, create the following views
touch resources/views/layouts/app.blade.php
touch resources/views/auth/login.blade.php
touch resources/views/auth/register.blade.php
touch resources/views/auth/forgot-password.blade.php
touch resources/views/auth/reset-password.blade.php
touch resources/views/auth/verify-email.blade.php
touch resources/views/home.blade.php
The code for the files created above is listed below.
Update Fortify Provider
Next, we will need to update the boot method in app/Providers/FortifyServiceProvider. This is to tell fortify how to authenticate the user and where the views we created early are located.
public function boot()
{
Fortify::loginView(function () {
return view('auth.login');
});
Fortify::authenticateUsing(function (Request $request) {
$user = User::where('email', $request->email)->first();
if ($user &&
Hash::check($request->password, $user->password)) {
return $user;
}
});
Fortify::registerView(function () {
return view('auth.register');
});
Fortify::requestPasswordResetLinkView(function () {
return view('auth.forgot-password');
});
Fortify::resetPasswordView(function ($request) {
return view('auth.reset-password', ['request' => $request]);
});
Fortify::verifyEmailView(function () {
return view('auth.verify-email');
});
// ...
}
Next register FortifyServiceProvider by adding it to the providers array in config\app.php App\Providers\FortifyServiceProvider::class,
.
In your app/Models/User.php file ensure the class implements MustVerifyEmail
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable implements MustVerifyEmail
{
use HasFactory, Notifiable;
// ...
}
We also need to tell fortify that we want to enable email verification. In the config/fortify.php file uncomment the line that says Features::emailVerification()
.
If you want to test email verification you will need to update your email variables in .env. You can use a free mail server mailtrap.io
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=info@lara8auth.com
MAIL_FROM_NAME="${APP_NAME}"
Finally we will add the home route to the routes/web.php file
Route::middleware(['auth', 'verified'])->group(function () {
Route::view('home', 'home')->name('home');
});
We have completed our setup. You should have a working authentication system using laravel fortify and bootstrap.
Conclusion
To find out more about laravel fortify features you can go the the github respository Fortify
Thanks for reading please comment below and share if you found this article helpful.
In my next article, I will cover updating user profile information and changing your password from the profile page.
Updating Laravel 8 User profile information using bootstrap livewire and fortify
Jasmine Tracey ・ Jan 29 '21
jasminetracey / lara8auth
This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify
This is a simple auth starter setup for laravel 8 projects
Features
- User Login
- User Registration
- Email Verification
- Forget Password
- Reset Password
- Change Password
- Update User Profile
- TwoFactor Authentication
- Browser Session Management
Top comments (13)
In this text:
We also need to tell fortify that we want to enable email verification. In the app/fortify.php file uncomment the line that says Features::emailVerification().
Shouldn't the file to modify be "config/fortify.php" ?
Thanks for the correction. I mistyped.
Thanks so muchh Jasmine!
Twas a good tutorial
Where is the livewire here?
Sorry forgot to update tags I split the article in two the livewire section is in the next article
Can you please link the Livewire article too?
Undefined variable: token at reset password blade, did you guys face this issue?
i found the issue, at reset-password.blade.php
should be:
request()->token
I just created an account to thank you for this! You rock!
me to, he's legend
i found the issue, at reset-password.blade.php
should be:
i found the issue, at reset-password.blade.php
should be:
Thanks so much! still working!