DEV Community

Cover image for Laravel 8 authentication with Bootstrap and Fortify
Jasmine Tracey
Jasmine Tracey

Posted on • Updated on • Originally published at jasminetracey.com

Laravel 8 authentication with Bootstrap and Fortify

#laravel #fortify #bootstrap #auth

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
Enter fullscreen mode Exit fullscreen mode

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=
Enter fullscreen mode Exit fullscreen mode

Install Fortify 

composer require laravel/fortify
Enter fullscreen mode Exit fullscreen mode

Next, we will publish Fortify's resources:

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
Enter fullscreen mode Exit fullscreen mode

Next, we will migrate the database:

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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) {
}
Enter fullscreen mode Exit fullscreen mode

Delete resources/css folder and create app.scss file in resources/sass

rm -rf resources/css

mkdir resources/sass

touch resources/sass/app.scss
Enter fullscreen mode Exit fullscreen mode

Import packages in the resources/sass/app.scss file

// bootstrap
@import "~bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

Next update webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
Enter fullscreen mode Exit fullscreen mode

Compile assets

npm run dev
Enter fullscreen mode Exit fullscreen mode

Add Auth Views

In your resources/views folder create two folders auth and layouts

mkdir resources/views/layouts resources/views/auth
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
    });

    // ...
}
Enter fullscreen mode Exit fullscreen mode

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;

    // ...
}
Enter fullscreen mode Exit fullscreen mode

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}"
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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.

jasminetracey

Updating Laravel 8 User profile information using bootstrap livewire and fortify

Jasmine Tracey ・ Jan 29 '21 ・ 4 min read

#bootstrap #laravel #livewire #fortify

GitHub logo jasminetracey / lara8auth

This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify

BOOTSTRAP 4 LARAVEL FORTIFY AUTHENTICATION

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

View on GitHub


Top comments (13)

Collapse
 
gottaloveit profile image
Joe Passavanti •

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" ?

Collapse
 
jasminetracey profile image
Jasmine Tracey •

Thanks for the correction. I mistyped.

Collapse
 
theajstars profile image
theajstars •

Thanks so muchh Jasmine!
Twas a good tutorial

Collapse
 
danplaton4 profile image
Platon Dan •

Where is the livewire here?

Collapse
 
jasminetracey profile image
Jasmine Tracey •

Sorry forgot to update tags I split the article in two the livewire section is in the next article

Collapse
 
danplaton4 profile image
Platon Dan •

Can you please link the Livewire article too?

Collapse
 
liqi2001 profile image
LIQI2001 •

Undefined variable: token at reset password blade, did you guys face this issue?

Collapse
 
liqi2001 profile image
LIQI2001 •

i found the issue, at reset-password.blade.php
should be:
request()->token

Collapse
 
darkrevenger profile image
darkrevenger •

I just created an account to thank you for this! You rock!

Thread Thread
 
eymen profile image
Eymen Eid •

me to, he's legend

Collapse
 
liqi2001 profile image
LIQI2001 •

i found the issue, at reset-password.blade.php
should be:

Collapse
 
liqi2001 profile image
LIQI2001 •

i found the issue, at reset-password.blade.php
should be:

Collapse
 
youdevs profile image
Carlos Hernández •

Thanks so much! still working!

Read next

sofiamurphy profile image

Enhancing Telemedicine App Performance: Tips and Best Practices

Sofia Murphy -

devanshbhardwaj123 profile image

Top 170+ Software Testing : Interview Question

Devanshbhardwaj123 -

mddanishyusuf profile image

Search Engine For 200k+ Open Source Icons

Mohd Danish -

muhammetandic profile image

Setting Up Express development environment (Typescript, Eslint, Prettier)

muhammetandic -