Consume own api but with user logins

What is the best way to set up Laravel with a decoupled js front-end with admin & member accounts? I've tried a few different things using Passport but not convinced I'm doing things the best way.

So I know you can add the CreateFreshApiToken on web. I tried this method where I kept my auth routes, added my JS "catch-all" route with web auth middleware so if I logged in with the standard blade login form it redirects to the protected routes which serve up my js front end. Clear the session and refresh takes you back to the login page. This feels very wrong.

If I make a full SPA type app with a JS login form and my own api login controller, when I try and log in I get informed that I have no personal access token and need to create one. I understand this is something you can create on a per user basis but is meant for external access and not same domain api consumption?

I'm a bit lost now on what the best way forward is. Ideally I want a full js frontend which allows users to browse the site publicly + ability to login to view private content. I already have this working fine in my web routes with blade views but just wanting to redo the front end in React and shift all my backend logic over to the api.

Any advice greatly appreciated