Impossible to work with oauth with a front-end fully detached from laravel?

[dlogvin]

Hello. I have a standalone ReactJS app, and I am creating an authentication service in another Laravel app.

This is an issue, because it seems like Passport fully relies on passport routes. Maybe I am wrong, but that's what I understood. And this is, at this point, making me desperate to find a solution. My whole workflow has stopped to figure this issue out.

This makes this a little bit complicated since I can not use sessions. Regardless of that, by following Passport's documentation, this is what I did:

<?php

namespace App\Models\Passport;

use Laravel\Passport\Client as BaseClient;

class Client extends BaseClient
{
    /**
     * Determine if the client should skip the authorization prompt.
     */
    public function skipsAuthorization(): bool
    {
        return $this->firstParty(); // Skip authorization for first-party clients
    }
}

Then, I created the client:

php artisan passport:client

 Which user ID should the client be assigned to? (Optional):
 >

 What should we name the client?:
 > ServiceName

 Where should we redirect the request after authorization? [http://app.test/auth/callback]:
 > http://localhost:5173/auth/callback

   INFO  New client created successfully.

  Client ID ................................................................................................... 9e16a70a-34d3-4a4c-b7c0-734b1cbe9791
  Client secret ........................................................................................... 8Htimi8GgUbEL8uGdkKjowtZsgm0HQZbJ4kL1w9l

Here is where things get complicated: I implemented a TOTP 2FA flow, which makes it impossible for me to use password type of grant since those were verified first. Moreover, as I am using ReactJS, I need to proxy the whole token issuance.

This is how I am trying to handle the token issuance after TOTP verification:

public function checkOTP(Request $request)
    {

        // Validate input
        $request->validate([
            'user_id'   => 'required',
            'totp_code' => 'required|digits:6',
            'client_id' => 'required|string',
        ]);

        try {
            // Extract user from token instead of requiring email/password
            $userId = 1;
            $user = User::findOrFail($userId);

            // Validate the OAuth client
            $client = DB::table('oauth_clients')->where('id', $request->client_id)->first();
            if (!$client) {
                return response()->json(["code" => 400, "message" => "OAuth client not found."], 400);
            }

            // Verify TOTP
            $google2fa = new Google2FA();
            if (!$google2fa->verifyKey(decrypt($user->{'2FA_key'}), $request->totp_code)) {
                return response()->json(["code" => 403, "message" => "Invalid 2FA code."], 403);
            }

            // HANDLE ACCESS TOKEN CREATION

            return response()->json([
                'access_token' => ????
            ]);

        } catch (\Exception $e) {
            return response()->json(["code" => 500, "message" => "Failed to authenticate.", "error" => $e->getMessage()], 500);
        }
    }

But I am not sure how to handle this token issuance. The documentation seems to be forcing the user to access a route within the laravel's project.

In the front-end, I am doing the following:

const CLIENT_ID = "9e16a70a-34d3-4a4c-b7c0-734b1cbe9791";
const REDIRECT_URI = encodeURIComponent("http://localhost:5173/auth/callback");
const APP_URL = `https://app.test:5173/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=`;

<Button
                                className="hidden md:inline-flex"
                                onClick={() => {
                                    const popup = window.open(
                                        APP_URL,
                                        "_blank",
                                        "width=500,height=600"
                                    );

                                    const interval = setInterval(() => {
                                        if (popup?.closed) {
                                            clearInterval(interval);
                                            console.log("Popup closed by user");
                                        }
                                    }, 1000);
                                }}
                            >
                                Login with APP
                            </Button>

The front-end APP_URL makes no sense, I know. But I am completely lost on how to handle this without accessing the web routes within my laravel app.

Any help would be extremely appreciated. Cheers