Laravel passport authentication issues with decoupled vuejs client - php

Question

Hello fellow developpers, I need your wisdom
I am creating a laravel API with an oauth2 authentication process (passport authorization code flow) used by a Vuejs decoupled client and I can't authenticate through the usual process (401 Unauthenticated).
If I try with the laravel project blade views it works as expected, but as soon as I try to do a separated project for the frontend, I end up with a 401 Unauthenticated error when getting to the oauth/authorize route and I can't get any information about what's wrong so I can't go further in my project.
For now, I don't even use inputs, I just send the request I need :
(of course i send the parameters that suits the ones I have in the oauth client database)
public function authorizeTpp(Request $request)
{
$query = http_build_query([
'client_id' => '3',
'redirect_uri' => 'http://api.dirapp.test/auth/callback',
'response_type' => 'code',
'scope' => '*',
]);
return redirect('http://api.dirapp.test/oauth/authorize?'.$query);
}
Here is my AuthServiceProvider :
public function boot()
{
$this->registerPolicies();
Passport::routes();
}
Here is my Kernel :
protected $middleware = [
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
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,
CreateFreshApiToken::class,
],
'api' => [
'throttle:60,1',
'bindings',
],
];
And here are my routes :
web.php :
Auth::routes();
Route::get('auth/callback', 'Auth\LoginController#authCallback');
api.php :
Route::get('authorize', 'Auth\LoginController#authorizeTpp');
and the routes :
+--------+----------+-----------------------------------------+-----------------------------------+---------------------------------------------------------------------------+--------------+
| Domain | Method | URI | Name | Action | Middleware |
+--------+----------+-----------------------------------------+-----------------------------------+---------------------------------------------------------------------------+--------------+
| | GET|HEAD | api/authorize | | App\Http\Controllers\Auth\LoginController#authorizeTpp | api,guest |
| | POST | api/create-client | | App\Http\Controllers\HomeController#createOauthClient | api |
| | POST | api/create-user | | App\Http\Controllers\HomeController#createUser | api |
| | GET|HEAD | api/user | | Closure | api,auth:api |
| | GET|HEAD | auth/callback | | App\Http\Controllers\Auth\LoginController#authCallback | web,guest |
| | GET|HEAD | home | home | App\Http\Controllers\HomeController#index | web |
| | POST | login | | App\Http\Controllers\Auth\LoginController#login | web,guest |
| | GET|HEAD | login | login | App\Http\Controllers\Auth\LoginController#showLoginForm | web,guest |
| | POST | logout | logout | App\Http\Controllers\Auth\LoginController#logout | web |
| | GET|HEAD | oauth/authorize | passport.authorizations.authorize | Laravel\Passport\Http\Controllers\AuthorizationController#authorize | web,auth |
| | POST | oauth/authorize | passport.authorizations.approve | Laravel\Passport\Http\Controllers\ApproveAuthorizationController#approve | web,auth |
| | DELETE | oauth/authorize | passport.authorizations.deny | Laravel\Passport\Http\Controllers\DenyAuthorizationController#deny | web,auth |
| | POST | oauth/clients | passport.clients.store | Laravel\Passport\Http\Controllers\ClientController#store | web,auth |
| | GET|HEAD | oauth/clients | passport.clients.index | Laravel\Passport\Http\Controllers\ClientController#forUser | web,auth |
| | PUT | oauth/clients/{client_id} | passport.clients.update | Laravel\Passport\Http\Controllers\ClientController#update | web,auth |
| | DELETE | oauth/clients/{client_id} | passport.clients.destroy | Laravel\Passport\Http\Controllers\ClientController#destroy | web,auth |
| | GET|HEAD | oauth/personal-access-tokens | passport.personal.tokens.index | Laravel\Passport\Http\Controllers\PersonalAccessTokenController#forUser | web,auth |
| | POST | oauth/personal-access-tokens | passport.personal.tokens.store | Laravel\Passport\Http\Controllers\PersonalAccessTokenController#store | web,auth |
| | DELETE | oauth/personal-access-tokens/{token_id} | passport.personal.tokens.destroy | Laravel\Passport\Http\Controllers\PersonalAccessTokenController#destroy | web,auth |
| | GET|HEAD | oauth/scopes | passport.scopes.index | Laravel\Passport\Http\Controllers\ScopeController#all | web,auth |
| | POST | oauth/token | passport.token | Laravel\Passport\Http\Controllers\AccessTokenController#issueToken | throttle |
| | POST | oauth/token/refresh | passport.token.refresh | Laravel\Passport\Http\Controllers\TransientTokenController#refresh | web,auth |
| | GET|HEAD | oauth/tokens | passport.tokens.index | Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController#forUser | web,auth |
| | DELETE | oauth/tokens/{token_id} | passport.tokens.destroy | Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController#destroy | web,auth |
| | POST | password/email | password.email | App\Http\Controllers\Auth\ForgotPasswordController#sendResetLinkEmail | web,guest |
| | GET|HEAD | password/reset | password.request | App\Http\Controllers\Auth\ForgotPasswordController#showLinkRequestForm | web,guest |
| | POST | password/reset | password.update | App\Http\Controllers\Auth\ResetPasswordController#reset | web,guest |
| | GET|HEAD | password/reset/{token} | password.reset | App\Http\Controllers\Auth\ResetPasswordController#showResetForm | web,guest |
| | GET|HEAD | register | register | App\Http\Controllers\Auth\RegisterController#showRegistrationForm | web,guest |
| | POST | register | | App\Http\Controllers\Auth\RegisterController#register | web,guest |
+--------+----------+-----------------------------------------+-----------------------------------+---------------------------------------------------------------------------+--------------+
When using internal laravel blade views, I can go through the whole process,
going to oauth/authorize route, getting the 'authorize' view where I can validate or cancel the client registration, then going to oauth/token through the callback route, and then getting my user authenticated and redirected to the homepage.
As soon as I try to get the same results with an external/decoupled frontend project (Vuejs), the oauth/authorize route gives me a 401 Unauthenticated error while using same credentials.
I don't know if it is related or not, but when using the decoupled client I don't have a session anymore and I loose the 'intended_url' usually used by the auth process to do the proper redirection and it brings me to the homepage instead.
To fix this, my API send to my client the proper encoded intended_url so I can send it back to the login function when needed and go to the real intended_url after the auth process.
I don't know what i'm doing wrong and I need help, I think I might have misunderstood the way passport works but there is not much informations about the authorization code flow process through a decoupled client that I can get.
I spent a few days on this without any success so if you have any information or can give me any help it would be awesome.
Thanks.