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

[dlogvin]

Maaaaybe PKCE is what im looking for?

[bulletproof-coding]

I used tymon/jwt-auth in a similar scenario with no issues.

[dlogvin]

I used tymon/jwt-auth in a similar scenario with no issues.

Thanks a lot for the answer! Yes. It might seem like this is a good course of action.

But, for my use case, as all parties are primary, maybe I don't even need to create new clients and whatnot? I was considering using sanctum since the setup is super easy, and it has stateful sessions, which also somehow can facilitate passkey integration since sessions are also of huge importance to that.

Plus, it has something super similar to scopes as Passport does.

What do you think?

[bulletproof-coding]

For multi-containers environments you will need sticky sessions. I choose the jwt to avoid sessions.

[dlogvin]

For multi-containers environments you will need sticky sessions. I choose the jwt to avoid sessions.

Got any resources you could share on sticky sessions? I might as well use that.

Cheers.

[bulletproof-coding]

No. They are basically cache stored sessions (memcache for example).