Laravel + React, consume api with Laravel authentication

Question

we have a Laravel project with react as the front-end. Basically react is inside the laravel project, we used php artisan preset react to add it.

As this application needs authentication, we used the custom laravel auth to give access to the users. Then when the authentication is correct, we redirect the user to a route that will be managed by react and react router. The problem is that we need to consume our API endpoints from the same app, and those endpoints MUST be protected. The laravel Auth is not working there, the sessión information is not being sent on each request. I’ve tried https://laravel.com/docs/5.7/authentication#stateless-http-basic-authentication that although it solves the problem is not convenient to log in and then when want to consume another resource show a prompt to log in again. Also change the api routes to a web middleware is not an option.

Does someone knows how to protect the laravel API routes with the normal laravel authentication

Jacobo Jacobo · Accepted Answer · 2019-04-16T09:51:45

The solution was simple, even that is on the documentation, the necessary steps should be clarified.

We need to:

Add passport composer require laravel/passport
Make the migrations php artisan migrate
Install passport php artisan passport:install

The fourth step is more complex. We need to open our User.php model file. And first we need to import the HasApiTokens and tell the model to use it.

use Laravel\Passport\HasApiTokens;

class User extends Authenticatable

{

    use HasApiTokens, Notifiable;

    .......

}

Then on our config/auth.php we need to modify the api array and change the driver to passport

'api' => [

    //for API authentication with Passport

    'driver' => 'passport',

    'provider' => 'users',

],

Then on our app/Http/Kernel.php we need to add a middleware to the $middlewareGroups array in the key web.

protected $middlewareGroups = [

    'web' => [

        ................

        //for API authentication with Passport

        \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,

    ],

Now we can use the auth:api middleware on our api routes.

Route::middleware('auth:api')->group( function(){
    ...your routes here
});

Laravel + React, consume api with Laravel authentication

2 Answers