loading...
Cover image for Laravel 8 authentication with Bootstrap and Fortify

Laravel 8 authentication with Bootstrap and Fortify

jasminetracey profile image Jasmine Tracey Updated on ・3 min read

In this tutorial, I will share how to setup Laravel Fortity 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'll 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 be 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 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 verfication. In the app/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 go cover updating user profile information and changing your password from profile page.

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

Posted on by:

jasminetracey profile

Jasmine Tracey

@jasminetracey

I am Jasmine Tracey, a frontend and backend developer. I have been in programming for almost five years. I have been mostly focused with web development, mobile development and UI designing

Discussion

pic
Editor guide
 

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?