DEV Community: Dog Smile Factory

4 Steps to Automate Repeated Tasks Using Laravel

Dog Smile Factory — Fri, 10 Jul 2020 11:17:09 +0000

When I was building my Covid-19 Dashboard app, I needed a way to automatically query the Covid Tracking Project API on a daily basis and update my database. Accomplishing this with Laravel consists of the following steps:

Create an Artisan console command to start the task
Create a job that performs the work
Tell Laravel when the task needs to run
Update the server to work with Laravel

All of this assumes that you have already created the database and tables that you need. Building the database is outside the scope of this article. I will be using my Covid-19 Dashboard as an example. The code for this project can be found here.

Step 1 - Create an Artisan console command

An Artisan console command is like a switch or a button that you can press whenever you want Laravel to start performing a specific task. You can "activate the switch" or "press the button" to initiate your task, and this can be done in different ways. One way is to type the Artisan command into the command line of your console. Another way is to include the command inside your application code so that your task will be executed at a specific date and time.

Here's something nice. You can use one Artisan command to make another! To create your new command, use the Laravel supplied Artisan make:command. For the Covid-19 Dashboard project, I needed a job that would query the Covid Tracking Project API and update my database. But first, I needed a command that would start this job. I decided to call this command LoadApiData, so I entered the following in the console.

php artisan make:command LoadApiData

Laravel then generated the following class, named LoadApiData, and placed it in the app/Console/Commands folder.

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class LoadApiData extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'command:name';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        //
    }
}

The class generated by Laravel is not complete. We finish it by filling in the signature and description properties of the class, as well as the handle() method.

The signature will be used to run our command. When we type it into the console, the command will be executed. In my example it looks like this.

protected $signature = 'app:load_api_data';

The description should be very brief, just a few words that get displayed in the console whenever we list our console commands. In my example it looks like this.

protected $description = 'Load data from the Covid Tracking Project API';

The handle() method gets called when the command is executed. We will use this function to kick off the job that performs the actual work that needs to be done. In my example, that job is the LoadApiDataJob class. As you can see, the name of my job class is the same as the name as my command class, except for the word "Job" appended to it.

public function handle()
  {
    LoadApiDataJob::dispatch();
  }

The finished LoadApiData class is shown here.

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use App\Jobs\LoadApiDataJob;

class LoadApiData extends Command
{
  /**
   * The name and signature of the console command.
   *
   * @var string
   */
  protected $signature = 'app:load_api_data';

  /**
   * The console command description.
   *
   * @var string
   */
  protected $description = 'Load data from the Covid Tracking Project API';

  /**
   * Create a new command instance.
   *
   * @return void
   */
  public function __construct()
  {
    parent::__construct();
  }

  /**
   * Execute the console command.
   *
   * @return mixed
   */
  public function handle()
  {
    LoadApiDataJob::dispatch();
  }
}

Step 2 - Create a Job

Next, we need a job that will do the heavy lifting and performs the tasks we want to accomplish. This job will be initiated by the command we just built. Once again we can use an Artisan command to generate a skeleton class that will help us get started. In the command line I typed the following.

php artisan make:job LoadApiDataJob

Laravel then generated the following class, named LoadApiDataJob, and placed it in the app/Jobs folder.

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;

class LoadApiDataJob implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        //
    }
}

When the job is called, the handle() method will be executed, so the logic for completing our automated task is placed in this function. For the Covid-19 Dashboard, this is a two part process. First, state specific data is retrieved from the API and then used to update the state_historical_data table. Then United States national level data is retrieved from the API, and this data is used to update the us_historical_data table. The finished code for this is shown below.

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\DB;
use Carbon\Carbon;
use App\Helpers\Misc;

class LoadApiDataJob implements ShouldQueue
{
  use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

  /**
   * Create a new job instance.
   *
   * @return void
   */
  public function __construct()
  {
    //
  }

  /**
   * Execute the job.
   *
   * @return void
   */
  public function handle()
  {
    $job = Misc::jobStart('LoadApiDataJob');

    // Retrieve state data from dev api
    $query_string = 'https://covidtracking.com/api/states/daily';
    $response = Http::get($query_string)->getBody();
    $apiRecords = json_decode((string) $response);
    $count = count($apiRecords);

    for ($i = 0; $i < $count; $i++) {
      $r = $apiRecords[$i];
      $date = Misc::formatDate($r->date);
      if ($date['carbonDate']->lessThan($job['earliestDate'])) {
        continue;
      }
      if ($date['carbonDate']->greaterThan($job['latestDate'])) {
        continue;
      }

      $death = property_exists($r, 'death')  ? $r->death : 0;
      $death = $death === NULL ? 0 : $death;
      $deathIncrease = property_exists($r, 'deathIncrease') ? $r->deathIncrease : 0;
      $deathIncrease = $deathIncrease === NULL ? 0 : $deathIncrease;
      $totalTestResults = property_exists($r, 'totalTestResults') ? $r->totalTestResults : 0;
      $totalTestResults = $totalTestResults === NULL ? 0 : $totalTestResults;
      $totalTestResultsIncrease = property_exists($r, 'totalTestResultsIncrease') ? $r->totalTestResultsIncrease : 0;
      $totalTestResultsIncrease = $totalTestResultsIncrease === NULL ? 0 : $totalTestResultsIncrease;
      $positive = property_exists($r, 'positive') ? $r->positive : 0;
      $positive = $positive === NULL ? 0 : $positive;
      $positiveIncrease = property_exists($r, 'positiveIncrease') ? $r->positiveIncrease : 0;
      $positiveIncrease = $positiveIncrease === NULL ? 0 : $positiveIncrease;

      DB::table('state_historical_data')
        ->updateOrInsert(
          ['day' => $date['formattedDate'], 'state' => $r->state],
          [
            'total_deaths' => $death, 'daily_deaths' => $deathIncrease,
            'total_tests' => $totalTestResults, 'daily_tests' => $totalTestResultsIncrease,
            'total_cases' => $positive, 'daily_cases' => $positiveIncrease
          ]
        );
    }

    // Retrieve US data from dev api
    $query_string = 'https://covidtracking.com/api/us/daily';
    $response = Http::get($query_string)->getBody();
    $apiRecords = json_decode((string) $response);
    $count = count($apiRecords);

    for ($i = 0; $i < $count; $i++) {
      $r = $apiRecords[$i];
      $date = Misc::formatDate($r->date);
      if ($date['carbonDate']->lessThan($job['earliestDate'])) {
        continue;
      }
      if ($date['carbonDate']->greaterThan($job['latestDate'])) {
        continue;
      }

      $death = property_exists($r, 'death')  ? $r->death : 0;
      $death = $death === NULL ? 0 : $death;
      $deathIncrease = property_exists($r, 'deathIncrease') ? $r->deathIncrease : 0;
      $deathIncrease = $deathIncrease === NULL ? 0 : $deathIncrease;
      $totalTestResults = property_exists($r, 'totalTestResults') ? $r->totalTestResults : 0;
      $totalTestResults = $totalTestResults === NULL ? 0 : $totalTestResults;
      $totalTestResultsIncrease = property_exists($r, 'totalTestResultsIncrease') ? $r->totalTestResultsIncrease : 0;
      $totalTestResultsIncrease = $totalTestResultsIncrease === NULL ? 0 : $totalTestResultsIncrease;
      $positive = property_exists($r, 'positive') ? $r->positive : 0;
      $positive = $positive === NULL ? 0 : $positive;
      $positiveIncrease = property_exists($r, 'positiveIncrease') ? $r->positiveIncrease : 0;
      $positiveIncrease = $positiveIncrease === NULL ? 0 : $positiveIncrease;

      DB::table('us_historical_data')
        ->updateOrInsert(
          ['day' => $date['formattedDate'], 'state' => 'US'],
          [
            'total_deaths' => $death, 'daily_deaths' => $deathIncrease,
            'total_tests' => $totalTestResults, 'daily_tests' => $totalTestResultsIncrease,
            'total_cases' => $positive, 'daily_cases' => $positiveIncrease
          ]
        );
    }

    Misc::jobEnd('LoadApiDataJob');
  }
}

At this point, we can test our work. All we have to do is enter our new command in the console, using the same signature we defined in the LoadApiData class. We enter the command we created in step 1, and the command then executes the job we created in step 2.

php Artisan app:load_api_data

Step 3 - Schedule the Job

Once we've determined that our logic is working as planned, we can schedule our task to run whenever we want. We accomplish this inside of class app/Console/Kernel.php. Once again we use the command signature that we defined in step 1 when we built the LoadApiData class. To update the Covid-19 database three times every day, at 2:00, 10:00 and 18:30, we could modify the schedule() function in Kernel.php ****to look like this.

/**
   * Define the application's command schedule.
   *
   * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
   * @return void
   */
  protected function schedule(Schedule $schedule)
  {
    $schedule->command('app:load_api_data')->dailyAt('2:00');
    $schedule->command('app:load_api_data')->dailyAt('10:00');
    $schedule->command('app:load_api_data')->dailyAt('18:30');
  }

You can schedule your commands to run at any frequency you want. The Laravel documentation has all the details.

Step 4 - Update the server cron table

Unix-like servers contain a software utility called cron that is used for scheduling jobs. Using cron can be a difficult and error prone undertaking, but Laravel has found a way to simplify the process, so that you only need to have the most minimal interaction with the utility. For your application, you just add one entry to the cron table, and it's always the same entry for any Laravel application. This entry will tell your server to call the Laravel scheduler every minute of every day. Then, instead of cron, Laravel can assume the responsibility for keeping track of what needs to run, and when it needs to run, as described in step 3.

The Covid-19 Dashboard application is set up on my server like this, with the public files in the html directory and the private files in the covid19 directory.

var
|---www
    |---covid19.bob-humphrey.com
        |----html
        |----covid19

I updated the cron table on my server, which is running Ubuntu 18.04, by entering

crontab -e

This brought up a text editing application that I could use to edit the cron table. I added the following entry to the bottom of the table and then saved the file.

* * * * * cd /var/www/covid19.bob-humphrey.com/covid19 && php artisan schedule:run >> /dev/null 2>&1

The only thing that changes from one project to the next is the folder being pointed to on the server. Just make sure it's the one that contains your project's private files.

Building a Covid-19 Dashboard with Laravel

Dog Smile Factory — Sat, 27 Jun 2020 13:53:09 +0000

As the Covid-19 epidemic continues to rage throughout the United States, many Americans including myself have been sheltering in place for months. As the situation shows no sign of improvement in the forseeable future, I decided to use some of the ample available time to build my own version of a Covid-19 Dashboard.

I chose Laravel to build this project, as it contains tools for all of the tasks I needed to accomplish, including retrieving data from an API, crunching the numbers, storing everything in a database, and presenting the results using component based views.

My data source is the COVID Tracking Project, an organization described by its website as "made up of hundreds of volunteer data-gatherers, developers, scientists, reporters, designers, editors, and other dedicated contributors." Every day, data is collected from the states, territories, and District of Columbia, and posted on their website. Since the data is also made availabe through an API, my application can automatically update itself on a regular basis without any intervention on my part.

This image from their website shows the kind of state level data that is collected every day, including number of deaths, number of tests, and confirmed cases.

Overview

The home page of the application was created to provide a quick snapshot showing the state of the pandemic across the entire United States.

I realize that the USA is not the entire world, and so this app reflects only a small portion of the global pandemic. However, this is the country where I live, we currently have more cases than anywhere else, and so this is where I chose to focus my efforts.

The seven day average is my favorite measurement for trying to assess the current state of the coronavirus epidemic. It smooths out the highs and lows that result from lags in reporting, and allows you to see trends as they develop. Given the uncertain nature of data collection for this disease, the trends may offer more relevant information than any individual numbers.

By comparing the current seven day average to the seven day average from two weeks ago, you can get a pretty good idea as to how the number of covid-19 cases are improving or getting worse. I use this fourteen day percent change as the basis for building the application home page.

The page consists of the following graphs:

The first graph shows the fourteen day percent change for each day since May 1st, for the entire United States. An amount below zero indicates that the rate of deaths is declining. Ominously, on the day being reported here (June 25, 2020), the measure moved sharply into positive territory for the first time since the beginning of May, indicating a sudden rapid increase in the number of deaths.

The next chart is a color coded map showing the current day's percent change for each state, with bright green indicating improving numbers, and dark red indicating rapid deterioration. This map shows a definite pattern of worsening death rates across much of the southern USA.

Next, there is another graph showing the number of states where the death rate is currently improving, compared with the number of states where it is staying the same or getting worse.

Finally, there are the same three charts, but this time showing the number of cases. You can see that there has been a rapid increase in the growth of new cases since the middle of May. At first this increase was confined to the southern states, then it started showing up in the western states, and it currently is beginning to trend negatively throughout the midwest.

Below this is a table of each state (and territory) showing the current percent change in the number of new cases, again comparing the current day to the rate from two weeks previous.

Additional Information

There's a lot more information beyond this home page summary. Just about every item on every page is a link to further data, and it is easy to drill down and find more specifics for any particular state.

The following measurements are available for each state and territory, and for the country as a whole, for every day since the beginning of the epidemic.

How bad is the epidemic?

total number of deaths
total deaths per capita
seven day total deaths
seven day average deaths
daily deaths
total number of cases
total cases per capita
seven day total cases
seven day average cases
daily new cases

Is it getting better or worse?

seven day deaths percent increase
fourteen day trend (comparing the current seven day average number of deaths to the average from fourteen days ago)
days for deaths to double (based on the seven day deaths increase, how many days until the entire number of deaths is twice as large as it is now)
seven day cases percent increase
fourteen day trend (comparing the current seven day average number of new cases to the average from fourteen days ago)
days for cases to double (based on the seven day cases increase, how many days until the entire number of cases is twice as large as it is now)

Is there enough testing?

number of tests
number of tests per capita
seven day tests
seven day tests average
daily tests
percentage of positive tests (tests that find infected persons)

Here is what the State of Florida page looks like for May 25, 2020.

If you are on the Florida page and you click on Days for Cases to Double, you will be taken to the following screen, which shows the number of days it will take in each state for the number of cases to double from the current amount, based on the current rate of increase.

Back end

As I mentioned above, the entire project was built using Laravel.

Three times a day, Laravel automatically runs a job to query the COVID-Project API. The returned dataset is immediately loaded into a MySQL database.

Laravel then kicks off a series of jobs that transforms this basic data into the various measurements detailed above. The sequence of steps looks like this:

The counts are compared to population size to arrive at per capita numbers.
Seven day averages are computed.
Seven day increase is computed.
Seven day averages are compared to the seven day averages from 14 days earlier.
Doubling rates are estimated, based on the previous seven day increase.

Finally, there are a number of steps that are executed to separate all of the statistics into categories and rankings. These make it easier to present the various data using color coded maps and sorted tables.

Front end components

The front end of the app was also built with Laravel, using the framework's easy to code and easy to maintain components. Here is how the components are structured for the Days for Cases to Double page shown above.

The components can then be arranged into a layout using Laravel Blade component tags.

<div class="grid grid-cols-3">
  <div class="col-span-1">
    <x-title />
    <x-menu />
    <x-credits />
    <x-articles />
    <x-author />
  </div>
  <div class="col-span-2">
    <x-pageTitle
      :pageTitle="$pageTitle"
      :date="$date"
      pageType="day"
      :path="$path"
    />
    <x-dateMenu :path="$path" />
    <x-map :stateData="$stateData" />
    <x-scaleDisplay :scale="$scale" />
    <x-dayDataTable
      :stateData="$stateData"
      :usData="$usData"
      :path="$path"
      :date="$date"
    />
  </div>
</div>

Some of the components used to build the project include:

Maps - Using an open source SVG file availble on Wikipedia.
Charts - Using Larapex Charts.
Tables - Using plain HTML.

TailwindCSS was used for styling, and AlpineJs was used to add a little bit of JavaScript behavior, for things like hiding and displaying the menu on small screens.

Useful Techniques

This project demonstrates a number of useful techniques for using Laravel to create a data driven application. Some of these include:

Creating jobs that automatically perform tasks, such as querying an api and updating a database, on a daily schedule
Reading a CSV file and loading the information into a database
Creating categories and assigning measurements to them
Building components
Making charts and graphs
Creating a color coded map
Using icons
Adding a little bit of interactivity with Alpine js

Links to the app and code

If you are interested, the code for the app is available on Gitlab.

You can also check out a working version of the app here.

Thanks for your interest. Please stay safe, and wear a mask!

5 Reasons to Give Inter Fonts a Try

Dog Smile Factory — Mon, 04 May 2020 13:32:30 +0000

As a typical coder, I've always found it challenging to design my sites in a professional manner. However, I feel like I've seen some recent improvement in this department, and I give much of the credit for this to my recent discovery of the Inter family of web fonts. Created by Rasmus Andersson, a designer at Figma, these fonts were made with the express intention of making text easier to read on computer screens.

As an example, consider this simple design for a short biography of singer-songwriter Mary Chapin Carpenter, created using the default san serif font on my PC.

Now here's that same design, but recreated using Inter fonts.

Both designs are fine, and the differences are subtle, but the second design comes a little closer to what I want, thanks entirely to the greater range of choice I have when using Inter.

So let's consider some of the reasons why you might want to give these wonderful fonts a try.

Wide Range of Weights and Styles

The Inter family consists of 9 different weights, each with its associated italic, for a total of 18 different styles! This really improves our ability to express ourselves.

Most websites are created to communicate information, and the main tool for accomplishing this is through words and text. To facilitate this communication, we use HTML to organize our sites into logical elements, such as articles, headings, and paragraphs.

Artful use of typography supports this organization and makes it immediately clear and understandable to our readers. We want a large font with a heavy weight to give emphasis to the h1 heading. We also want the h2 heading to stand out, but with a smaller size and less heavy weight so that it's clearly subordinate to the main heading. Having a wide range of font weights at our disposal improves our ability to convey our intent and communicate clearly.

At the other end of the weight range scale, the lightweight fonts can also be very useful. Small text used for things like footnotes and labels can look a whole lot better when rendered in one of the Thin or Extra Light fonts

Completeness

Inter fonts include 2528 different characters, with support for the Latin, Greek, and Cyrillic alphabets!

Over 150 different languages are supported!

Readability

Using a single font family can lead to more harmonious designs. Mixing different fonts can be tricky for us non-designers, but with Inter fonts we have fewer reasons to do this. Using a single font family increases the likelihood that all the elements on the page are going to look good together, and this makes our sites more attractive, readable and easier to understand.

Open Source and Free

Let's face it, commercial fonts can be quite expensive. They are certainly worth the cost to the shops and companies that are making a profit from their work. But for us developers, and especially those who are just getting started as coders, it's probably impossible to justify that kind of investment.

One of the great things about Inter fonts is that they are open source and completely free to use for just about any purpose. The SIL Open Font License 1.1 contains all the details. With Inter fonts, you get many of the benefits of a commercial font family without the usual associated cost.

Easy to Use

It's easy to get started with Inter fonts. You can download them and add them to your project (instructions below), or you can just grab them from Google if that works better for you.

Using with Tailwind CSS

Here is how you can add these fonts to any project that uses Tailwind CSS.

Download the fonts from the Inter website. There is a link for downloading on the top menu bar.
Extract the compressed folder. Copy the files in the Inter Web directory to the same folder that contains your tailwind CSS file.
Add the fonts to the style.css file, which will look like this. Of course, you don't need to add every font, just the ones you're going to use.

@tailwind base;

@font-face {
  font-family: "inter_black";
  src: url("Inter-Black.woff") format("woff"), url("Inter-Black.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_black_italic";
  src: url("Inter-BlackItalic.woff") format("woff"), url("Inter-BlackItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_bold";
  src: url("Inter-Bold.woff") format("woff"), url("Inter-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_bold_italic";
  src: url("Inter-BoldItalic.woff") format("woff"), url("Inter-BoldItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_extrabold";
  src: url("Inter-ExtraBold.woff") format("woff"), url("Inter-ExtraBold.woff2")
      format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_extrabold_italic";
  src: url("Inter-ExtraBoldItalic.woff") format("woff"), url("Inter-ExtraBoldItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_extralight";
  src: url("Inter-ExtraLight.woff") format("woff"), url("Inter-ExtraLight.woff2")
      format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_extralight_italic";
  src: url("Inter-ExtraLightItalic.woff") format("woff"), url("Inter-ExtraLightItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_italic";
  src: url("Inter-Italic.woff") format("woff"), url("Inter-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_light";
  src: url("Inter-Light.woff") format("woff"), url("Inter-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_light_italic";
  src: url("Inter-LightItalic.woff") format("woff"), url("Inter-LightItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_medium";
  src: url("Inter-Medium.woff") format("woff"), url("Inter-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_medium_italic";
  src: url("Inter-MediumItalic.woff") format("woff"), url("Inter-MediumItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_regular";
  src: url("Inter-Regular.woff") format("woff"), url("Inter-Regular.woff2")
      format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_semibold";
  src: url("Inter-SemiBold.woff") format("woff"), url("Inter-SemiBold.woff2")
      format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_semibold_italic";
  src: url("Inter-SemiBoldItalic.woff") format("woff"), url("Inter-SemiBoldItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "inter_thin";
  src: url("Inter-Thin.woff") format("woff"), url("Inter-Thin.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter_thin_italic";
  src: url("Inter-ThinItalic.woff") format("woff"), url("Inter-ThinItalic.woff2")
      format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@tailwind components;

@tailwind utilities;

Update the Tailwind configuration file tailwind.config.js. Again, just add the fonts you're going to need.

module.exports = {
  theme: {
    extend: {},
    fontFamily: {
      inter_black: [`inter_black`],
      inter_black_italic: [`inter_black_italic`],
      inter_bold: [`inter_bold`],
      inter_bold_italic: [`inter_bold_italic`],
      inter_extrabold: [`inter_extrabold`],
      inter_extrabold_italic: [`inter_extrabold_italic`],
      inter_extralight: [`inter_extralight`],
      inter_extralight_italic: [`inter_extralight_italic`],
      inter_italic: [`inter_italic`],
      inter_light: [`inter_light`],
      inter_light_italic: [`inter_light_italic`],
      inter_medium: [`inter_medium`],
      inter_medium_italic: [`inter_medium_italic`],
      inter_regular: [`inter_regular`],
      inter_semibold: [`inter_semibold`],
      inter_semibold_italic: [`inter_semibold_italic`],
      inter_thin: [`inter_thin`],
      inter_thin_italic: [`inter_thin_italic`],
    },
  },
  variants: {},
  plugins: [],
}

Compile the style.css and tailwind.config.js files into your tailwind.css file.

npx tailwind build style.css -o src/css/tailwind.css

To use the fonts, just add the one you want to the class attribute of your HTML elements.

<h2 class="font-inter_semibold text-2xl"></h2>

or for React:

<h2 className="font-inter_semibold text-2xl"></h2>

Examples of the available weights

Below are the nine weights available, with their regular and italic styles.

Thin

Extra Light

Light

Regular

Medium

Semi Bold

Bold

Extra Bold

Black

Websites using Inter fonts

Need a little more convincing? Check out this sampling of websites that make good use of the Inter font family. Maybe they will inspire you with some of the possibilities for using these beautiful fonts.

Credits

Learn more about Inter fonts at https://rsms.me/inter

Heading photo by Daria Shevtsova from Pexels

Mary Chapin Carpenter information from Wikipedia

Quote used to illustrate example weights by Mary Chapin Carpenter from "The Hard Way", Come On, Come On

Authenticating a React App with Laravel Sanctum - Part 4

Dog Smile Factory — Tue, 21 Apr 2020 14:15:58 +0000

This series of articles discusses how to use Laravel Sanctum to provide authentication for a front end React application. In part one, I outlined the steps required to build and configure the Laravel back end. Part two discussed the React app display, including the application state and the use of React context. Part three was a step by step look at how a user logs in and authenticates. This final article will focus on the user registration process.

For additional reference, there is a live version of the finished app as well as complete code listings for the React client application and the Laravel server application.

Registration Process Outline

Before someone can use our app, she first has to sign up or register, providing the app with some personal information that can be used to identify her in the future. Here are the steps that are required to accomplish this registration.

User - The user fills out the signup form.
User - The user clicks the Signup button.
React - React sends a message to the API sanctum/csrf-cookie endpoint.
Laravel - Laravel responds with a CSRF token.
React - React sends a POST message to the API api/register endpoint, along with the username, email and password information provided by the user.
Laravel - Laravel matches the endpoint to the route we created in the routes/api.php file, and calls the register function in UserController.
Laravel - The register function in UserController validates the information provided by the user.
Laravel - If the validation was successful, Laravel creates a new User record and adds it to the database, returning a 200 message to the browser. If the validation was not successful, a 422 message is returned.
React - If registration was successful, React sends a GET message to the API api/user endpoint.
Laravel - Laravel matches the endpoint to the route in the routes/api.php file, and returns the new user information, including userId.
React - React receives the user information and updates userId and userName in state.
React - authStatus is set to LOGGED_IN and the logout component is displayed to the user.

Registration Code

We'll now review the code that accomplishes each of these steps.

When the user clicks the signup button, the signup() function in AppContext is run. The first thing that's done is to set the axios withCredentials attribute to true.

// REACT APP src/contexts/AppContext.js - signup()
const login = () => {
    axios.defaults.withCredentials = true;

Then axios is used to send a GET message to the sanctum/csrf-cookie endpoint. Laravel responds with a CSRF token that will then be attached to all subsequent calls to the API, protecting the application from cross site forgery requests.

// REACT APP src/contexts/AppContext.js - signup()
// CSRF COOKIE
    axios.get(hostName + "sanctum/csrf-cookie").then(

Next, axios sends a POST request to the api/register endpoint, along with the username, email and password that the user entered in the signup form.

// REACT APP src/contexts/AppContext.js - signup()
// SIGNUP / REGISTER
axios.post(hostName + "api/register", {
  name: userNameInput,
  email: userEmail,
  password: userPassword,
})

Laravel matches the endpoint to the route that was created in the routes/api.php file, and calls the register function in UserController.

// LARAVEL APP routes/api.php
Route::post('/register', 'UserController@register');

The register function in UserController validates the information provided by the user. Laravel creates a new User record, adds it to the database, and responds with a 200 message if the validation was successful.

// LARAVEL APP app/Http/Controllers/UserController.php
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();
        $user = $this->create($request->all());
        $this->guard()->login($user);
        return response()->json([
            'user' => $user,
            'message' => 'registration successful'
        ], 200);
    }
    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            //'password' => ['required', 'string', 'min:4', 'confirmed'],
            // NO PASSWORD CONFIRMATION
            'password' => ['required', 'string', 'min:4'],
        ]);
    }

If the registration was successful, React sends a GET message to the API api/user endpoint.

// REACT APP src/contexts/AppContext.js - signup()
// GET USER
axios.get(hostName + "api/user").then(

Laravel matches the endpoint to the route in the routes/api.php file, and returns the currently logged in user.

// LARAVEL APP routes/api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

React receives the user information and updates userId and userName in state. authStatus is set to LOGGED_IN, which results in the logout component being displayed to the user.

// REACT APP src/contexts/AppContext.js - signup()
(response) => {
    //console.log(response);
    setUserId(response.data.id);
    setUserName(response.data.name);
    setErrorMessage("");
    setAuthStatus(LOGGED_IN);
},

The entire signup function looks like this. If any of the calls to the API results in an error response being returned, an error message is created and displayed to the user by way of the errorMessage state attribute.

// REACT APP src/contexts/AppContext.js - signup()
const signup = () => {
  axios.defaults.withCredentials = true
  // CSRF COOKIE
  axios.get(hostName + "sanctum/csrf-cookie").then(
    (response) => {
      //console.log(response);
      // SIGNUP / REGISTER
      axios
        .post(hostName + "api/register", {
          name: userNameInput,
          email: userEmail,
          password: userPassword,
        })
        .then(
          (response) => {
            //console.log(response);
            // GET USER
            axios.get(hostName + "api/user").then(
              (response) => {
                //console.log(response);
                setUserId(response.data.id)
                setUserName(response.data.name)
                setErrorMessage("")
                setAuthStatus(LOGGED_IN)
              },
              // GET USER ERROR
              (error) => {
                setErrorMessage("Could not complete the sign up")
              }
            )
          },
          // SIGNUP ERROR
          (error) => {
            if (error.response.data.errors.name) {
              setErrorMessage(error.response.data.errors.name[0])
            } else if (error.response.data.errors.email) {
              setErrorMessage(error.response.data.errors.email[0])
            } else if (error.response.data.errors.password) {
              setErrorMessage(error.response.data.errors.password[0])
            } else if (error.response.data.message) {
              setErrorMessage(error.response.data.message)
            } else {
              setErrorMessage("Could not complete the sign up")
            }
          }
        )
    },
    // COOKIE ERROR
    (error) => {
      setErrorMessage("Could not complete the sign up")
    }
  )
}

Logout

All that's left now is for the user to logout. The process for this is pretty simple.

The user presses the logout button.
React runs the AppContext logout() function.
Axios calls the API api/logout endpoint.

// REACT APP src/contexts/AppContext.js - logout()
function logout() {
  axios.defaults.withCredentials = true
  axios.get(hostName + "api/logout")

Laravel matches the endpoint to the route we created in the routes/api.php file, and calls the logout function in UserController.

// LARAVEL APP routes/api.php
Route::post('/logout', 'UserController@logout');

The logout() function in UserController logs the user out and returns a 200 message to the browser.

// LARAVEL APP app/Http/Controllers/UserController.php
public function logout()
{
    Auth::logout();
    return response()->json(['message' => 'Logged Out'], 200);
}

The logout() function in React then reinitializes the application state. authStatus is set to NOT_LOGGED_IN, which returns the user back to where he started, displaying the original splash screen. Here is the entire logout() function.

// REACT APP src/contexts/AppContext.js - logout()
function logout() {
  axios.defaults.withCredentials = true
  axios.get(hostName + "api/logout")
  setUserId(0)
  setUserName("")
  setUserNameInput("")
  setUserEmail("")
  setUserPassword("")
  setAuthStatus(NOT_LOGGED_IN)
}

Authenticating a React App with Laravel Sanctum - Part 3

Dog Smile Factory — Thu, 16 Apr 2020 11:50:34 +0000

This series of articles discusses how to use Laravel Sanctum to provide authentication for a front end React application. In part one, I outlined the steps required to build and configure the Laravel back end. Part two discussed the React app display, including the application state and the use of React context. In this article, we will walk through the various things that need to occur when the user attempts to login or register with the application.

For additional reference, there is a live version of the finished app as well as complete code listings for the React client application and the Laravel server application.

Login Process Outline

Let's start with an outline of each of the steps that needs to occur when the user logs in to our application.

User - The user fills out the login form.
User - The user clicks the Login button.
React - React sends a message to the API sanctum/csrf-cookie endpoint.
Laravel - Laravel responds with a CSRF token.
React - React sends a POST message to the API api/login endpoint, along with the email and password information provided by the user.
Laravel - Laravel matches the endpoint to the route we created in the routes/api.php file, and calls the login function in UserController.
Laravel - The login function in UserController calls a function in the Auth class to authenticate the user with the credentials provided.
Laravel - Laravel returns a 200 message to the browser if authentication was successful, or a 401 message if it was not.
React - If authentication was successful, React sends a GET message to the API api/user endpoint.
Laravel - Laravel matches the endpoint to the route in the routes/api.php file, and returns the currently logged in user.
React - React receives the user information and updates userId and userName in state.
React - authStatus is set to LOGGED_IN and the logout component is displayed to the user.

Login Code

Now we'll take a look at the code that accomplishes each of these steps.

When the user clicks the login button, the login function in AppContext is run. The first thing that's done is to set the axios withCredentials attribute to true. This is an important step that cannot be skipped.

// REACT APP src/contexts/AppContext.js - login()
const login = () => {
    axios.defaults.withCredentials = true;

Then axios is used to send a GET message to the sanctum/csrf-cookie endpoint. Laravel responds with a CSRF token that will then be attached to all subsequent calls to the API. The token is used by Laravel to verify that the authenticated user is the one who is actually making the requests to the application. This protects the application from cross site forgery requests.

// REACT APP src/contexts/AppContext.js - login()
// CSRF COOKIE
    axios.get(hostName + "sanctum/csrf-cookie").then(

Next, axios sends a POST request to the api/login endpoint, along with the email and password that the user entered in the login form.

// REACT APP src/contexts/AppContext.js - login()
// LOGIN
axios.post(hostName + "api/login", {
  email: userEmail,
  password: userPassword,
})

Laravel matches the endpoint to the route we created in the routes/api.php file, and calls the login function in the UserController.

// LARAVEL APP routes/api.php
Route::post('/login', 'UserController@login');

The login function in UserController calls a function in the Auth class to authenticate the user with the credentials provided. Laravel responds with a 200 message if authentication was successful, or a 401 message if it was not.

// LARAVEL APP app/Http/Controllers/UserController.php
    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            // Authentication passed...
            $authuser = auth()->user();
            return response()->json(['message' => 'Login successful'], 200);
        } else {
            return response()->json(['message' => 'Invalid email or password'], 401);
        }
    }

If authentication was successful, React sends a GET message to the API api/user endpoint.

// REACT APP src/contexts/AppContext.js - login()
// GET USER
axios.get(hostName + "api/user").then(

Laravel matches the endpoint to the route in the routes/api.php file, and returns the currently logged in user.

// LARAVEL APP routes/api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

React receives the user information and updates userId and userName in state. authStatus is set to LOGGED_IN, which results in the logout component being displayed to the user.

// REACT APP src/contexts/AppContext.js - login()
    (response) => {
        setUserId(response.data.id);
        setUserName(response.data.name);
        setErrorMessage("");
        setAuthStatus(LOGGED_IN);
},

The entire login function looks like this. If any of the calls to the API results in an error response being returned, an error message is created and displayed to the user by way of the errorMessage state attribute.

// REACT APP src/contexts/AppContext.js - login()
const login = () => {
  axios.defaults.withCredentials = true
  // CSRF COOKIE
  axios.get(hostName + "sanctum/csrf-cookie").then(
    (response) => {
      //console.log(response);
      // LOGIN
      axios
        .post(hostName + "api/login", {
          email: userEmail,
          password: userPassword,
        })
        .then(
          (response) => {
            //console.log(response);
            // GET USER
            axios.get(hostName + "api/user").then(
              (response) => {
                //console.log(response);
                setUserId(response.data.id)
                setUserName(response.data.name)
                setErrorMessage("")
                setAuthStatus(LOGGED_IN)
              },
              // GET USER ERROR
              (error) => {
                setErrorMessage("Could not complete the login")
              }
            )
          },
          // LOGIN ERROR
          (error) => {
            if (error.response) {
              setErrorMessage(error.response.data.message)
            } else {
              setErrorMessage("Could not complete the login")
            }
          }
        )
    },
    // COOKIE ERROR
    (error) => {
      setErrorMessage("Could not complete the login")
    }
  )
}

Part 4

This article has detailed how the login function works in the React portion of our authentication application. Part 4 will provide a similar breakdown for the signup function.

Authenticating a React App with Laravel Sanctum - Part 2

Dog Smile Factory — Sat, 11 Apr 2020 14:34:52 +0000

This series of articles discusses how to use Laravel Sanctum to provide authentication for a front end React application. In part one, I outlined the steps required to build and configure the Laravel back end. In this article, we turn our attention to the React front end. I will be focussing on the areas that are unique to this application, namely the communication between React on the client and Laravel on the server. I am assuming that you already have the basic skills needed to build a React app.

For additional reference, there is a live version of the finished app as well as complete code listings for the React client application and the Laravel server application.

Creating a React Project

To get started, create a new project named react-auth with create-react-app.

npx create-react-app react-auth

Then add axios, which will be used to make XMLHttpRequests to the Laravel API from the browser.

cd c:/react-auth
npm install axios

Styling with TailwindCSS

There are different approaches for styling React components. I'm a big fan of TailwindCSS, which can be installed like this.

npm install tailwindcss

Next, create a configuration file named tailwind.config.js by using the following command.

npx tailwind init

In the root directory of the application, manually create a file named style.css. Along with tailwind.config.js, this file can be used to customize Tailwind. Initially, the file should look like this.

@tailwind base;

@tailwind components;

@tailwind utilities;

If you'd like, you can make any changes you want to tailwind.config.js and style.css. Whether you make any customizations or not, you have to run a build step that creates the actual css file used that will be used by the application.

npx tailwind build style.css -o src/css/tailwind.css

Finally, make the styles available to our components by importing tailwind.css into App.js.

import "./css/tailwind.css"

Icons

The forms in my application make use of a number of different icons. It's easy to include them by using React Icons.

npm install react-icons --save

And with this, all of the dependencies have now been installed.

App Overview

Let's take a look at how the app is going to work. It begins by displaying the following splash screen.

There's a menu on the right side for choosing between

Signup - allowing first time users to register, and
Login - allowing restistered users to access the application.

To signup, the user enters a user name, email address, and password.

Previously registered users can login with email and password.

A logged in user can then logout.

After the user has logged out, the app will once again display the opening splash screen. There's nothing unusual or surprising here. This is the standard authentication sequence that everyone is more than familiar with.

State Management

Let's take a look at the state that's required to implement this process. This application is going to use React Context for managing the state. The context is defined in the contexts/AppContext.js file.

The main components of the state are:

authStatus - Used to control which component is visible at any particular time. As the user proceeds through each step of authentication, this value is changed so that the next component will be displayed.

User information (userId and userName). userId is the key that can be used by the Laravel backend to retrieve user information from the database. There's really no use for it in this simple authentication application, but userId would be an important piece of information in almost any project that's going to work with a real backend API.

Form information (userNameInput, userEmail, and userPassword) These are the items that will be obtained from the forms and passed to Laravel to perform the authentication functions.

Code Organization

The App.js file for the application looks like this.

import React from "react"
import "./css/tailwind.css"
import { AppProvider } from "./contexts/AppContext"
import AuthContainer from "./components/AuthContainer"

function App() {
  return (
    <div className="flex w-full justify-center bg-blue-200 pt-16 pb-32">
      <div className="lg:flex w-11/12 lg:w-3/4 xl:w-3/5">
        <AppProvider>
          <AuthContainer />
        </AppProvider>
      </div>
    </div>
  )
}

export default App

App.js is basically just an AuthContainer component wrapped in an AppProvider component. AuthContainer is used to hold all the form components (splash screen, signup, login, logout) along with the logic needed to display the correct one at the appropriate time. AppProvider is needed so that the rest of the components can have access to the state by way of the context.

Here is the components/AuthContainer.js file.

import React, { useContext } from "react"
import {
  NOT_LOGGED_IN,
  LOG_IN_FORM,
  SIGN_UP_FORM,
  LOGGED_IN,
} from "../constants/AuthStatus"
import AuthNotLoggedIn from "./AuthNotLoggedIn"
import AuthSignup from "./AuthSignup"
import AuthLogin from "./AuthLogin"
import AuthLogout from "./AuthLogout"
import { AppContext } from "../contexts/AppContext"

const AuthContainer = () => {
  const appContext = useContext(AppContext)
  const { authStatus } = appContext
  const showNotLoggedIn = authStatus === NOT_LOGGED_IN ? "" : "hidden"
  const showLoginForm = authStatus === LOG_IN_FORM ? "" : "hidden"
  const showSignupForm = authStatus === SIGN_UP_FORM ? "" : "hidden"
  const showLoggedIn = authStatus === LOGGED_IN ? "" : "hidden"

  return (
    <div className="w-full">
      <div className={showNotLoggedIn + " justify-end py-4"}>
        <AuthNotLoggedIn />
      </div>
      <div className={showLoginForm + " justify-end py-4"}>
        <AuthLogin option="login" />
      </div>
      <div className={showSignupForm + " justify-end py-4"}>
        <AuthSignup option="signup" />
      </div>
      <div className={showLoggedIn + " justify-end py-4"}>
        <AuthLogout />
      </div>
    </div>
  )
}

export default AuthContainer

The following lines of code give the component access to the state in the context.

import React, { useContext } from "react";
import { AppContext } from "../contexts/AppContext";

const AuthContainer = () => {
  const appContext = useContext(AppContext);
  const { authStatus } = appContext;

AuthContainer just has one job. It reads the current status from the state authStatus variable, and then based on that value it shows the appropriate component to the user. All of the components are in the src/components folder.

Splash Screen

When the app begins, authStatus is initialized to NOT_LOGGED_IN, causing the splash screen from the component AuthNotLoggedIn to be made visible. AuthNotLoggedIn contains two components. The first is an illustration created by Katerina Limpitsouni and made freely available at her website unDraw. The second is the AuthMenu component, which is also used in the signup and login displays. AuthMenu has two buttons.

When the Signup button is clicked, the changeAuthStatusSignup() function in AppContext.js is run, and the value of authStatus is changed to SIGN_UP_FORM. This causes the current display to be hidden and the AuthSignup component to be made visible.

When the Login button is clicked, the changeAuthStatusLogin() function in AppContext.js is run, and the value of authStatus is changed to LOG_IN_FORM. This causes the current display to be hidden and the AuthLogin component to be made visible.

Part 3

This article has outlined how the user interface part of our React application works. In Part 3, we'll take a look at what happens when the user fills in the login form and presses the submit button, initiating communications between the React front end and the Laravel back end.

Authenticating a React App with Laravel Sanctum - Part 1

Dog Smile Factory — Wed, 08 Apr 2020 17:17:47 +0000

My tech stack of choice for building web applications is React on the front end and Laravel on the back. One of the challenges of this approach involves authenticating the user so that database resources are only available to authorized individuals. This task is a lot more straightforward now that the Sanctum package has been added to Laravel 7.

To show how this works, I've created a simple application made up of three parts

the user signs up for access
the user logs in
the user logs out

You can try it out here and view the complete code for the React client application and the Laravel server application.

Laravel with Sanctum

Laravel Sanctum handles all the work of authenticating your users. However, there are a lot of little details to get this set up. Just take them one at a time, don't miss any steps, and you'll have your application working perfectly in very short order.

This guide assumes that you have a basic familiarity with setting up and running a Laravel application, including using the command line and running Laravel artisan commands.

Database

First, you're going to need a database for saving your information. I used MySQL for this application and created a database named auth.

Install Laravel

Then I created my Laravel app, using Composer:

composer create-project --prefer-dist laravel/laravel APP_NAME

There are detailed instructions for starting a new project on the Laravel site.

Edit the .env file to update the application name and your database information.

APP_NAME=Laravel_Sanctum_Authentication
APP_ENV=local
APP_KEY=base64:XXXXXXX
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=auth
DB_USERNAME=XXXXXXX
DB_PASSWORD=XXXXXXX

Install and Configure Sanctum

CD into the application directory and add Sanctum to the project.

composer require laravel/sanctum

Next, create a Sanctum configuration file and the database tables.

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

php artisan migrate

Update app/Http/Kernel.php to add the Sanctum middleware to the API middleware group.

Add the following lines of code:

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

and

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:60,1',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

as shown below:

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;
use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\TrustProxies::class,
        \Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Configure CORS

We need to setup Cross-Origin Resource Sharing so that requests to our API are rejected, except when they come from our front end React application.

Make the following changes to config/cors.php.

'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://auth.bob-humphrey.com', 'http://localhost:3000'],
    //'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,

Modify paths to indicate which endpoints need to be protected: in this case api/* and sanctum/csrf-cookie.

'paths' => ['api/*', 'sanctum/csrf-cookie'],

Modify allowed-origins to specify the urls from which requests will be accepted. This will be the production and development urls of your React app, https://auth.bob-humphrey.com (for my app) and http://localhost:3000.

'allowed_origins' => ['https://auth.bob-humphrey.com', 'http://localhost:3000'],

Then set support_credentials to true.

'supports_credentials' => true,

User Controller

Next, create the User controller.

php artisan make:controller UserController

Edit app/Http/Controllers/UserController so that it looks like this.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
use App\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;

class UserController extends Controller
{
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();
        $user = $this->create($request->all());
        $this->guard()->login($user);
        return response()->json([
            'user' => $user,
            'message' => 'registration successful'
        ], 200);
    }
    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            //'password' => ['required', 'string', 'min:4', 'confirmed'],
            // NO PASSWORD CONFIRMATION
            'password' => ['required', 'string', 'min:4'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }
    protected function guard()
    {
        return Auth::guard();
    }

    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            // Authentication passed...
            $authuser = auth()->user();
            return response()->json(['message' => 'Login successful'], 200);
        } else {
            return response()->json(['message' => 'Invalid email or password'], 401);
        }
    }

    public function logout()
    {
        Auth::logout();
        return response()->json(['message' => 'Logged Out'], 200);
    }
}

The controller contains the register, login, and logout methods that will be called by our front end. It also contains a validator method to validate the data and a create method to add a new user to the database.

API Routes

Now we update routes/api as follows.

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login', 'UserController@login');
Route::post('/register', 'UserController@register');
Route::get('/logout', 'UserController@logout');

The /user route is modified to make use of the Sanctum middleware we just installed. The front end app will not be able to get a successful response from this endpoint unless the user has first authenticated. If we were building a full blown API, all of the API routes would be protected with the Sanctum middleware.

We have also added three new endpoints to provide access to the login, register, and logout functions. Please note that all endpoints in the routes/api.php file will be prefixed with "/api". Therefore, the endpoint for the login route is "/api/login", the endpoint for the register route is "/api/register", and so forth.

Add a New User for Testing

At this point Laravel is completely set up to handle user authentication. Let's add a new user to the database so that we can test our setup. We can use tinker to accomplish this.

php artisan tinker

factory(App\User::class)->create(['email'=>'bill@gmail.com','name'=>'Bill', 'password'=> bcrypt('bill')]);

exit     (to leave tinker)

Part 2

The back end is finished and we're now ready to build the front end. In part two, we will walk through the tasks required to create a React app, with forms for user registration, login, and logout.