Laravel 8 authentication with Bootstrap and Fortify
Tags: laravel, fortify, bootstrap, auth
Published: 2020-10-10 19:07:46

---
canonical_url: https://jasminetracey.com/posts/laravel-8-with-bootstrap-livewire-and-fortify
---

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

```bash
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](https://visualstudio.microsoft.com/)

## 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](https://github.com/laravel/fortify)

```bash
composer require laravel/fortify
```

Next, we will publish Fortify's resources:

```bash
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
```

Next, we will migrate the database:

```bash
php artisan migrate
```

## Install [bootstrap](https://getbootstrap.com/)
We will also be installing jquery and popper.js because bootstrap requires these packages
```bash
npm i
npm install --save bootstrap jquery popper.js cross-env
```

Import packages in the **resources/js/bootstrap.js** file
```js
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**
```bash
rm -rf resources/css

mkdir resources/sass

touch resources/sass/app.scss
```

Import packages in the **resources/sass/app.scss** file
```scss
// bootstrap
@import "~bootstrap/scss/bootstrap";
```

Next update **webpack.mix.js**
```js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
```

Compile assets
```bash
npm run dev
```

## Add Auth Views

In your **resources/views** folder create two folders **auth** and **layouts**
```bash
mkdir resources/views/layouts resources/views/auth
```

Next, create the following views
```bash
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.

{% gist https://gist.github.com/jasminetracey/e4d4de1cffe2105fbc5c8b9cd3ded1b3 %}

## 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. 

```php
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
<?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](https://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
```php
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](https://github.com/laravel/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.

{% link https://dev.to/jasminetracey/updating-laravel-8-user-profile-information-using-bootstrap-livewire-and-fortify-1cdo %}

{% github jasminetracey/lara8auth %}