What’s the problem of using Password Grant Tokens for Nuxt SPA

I want to develop a Nuxt SPA with Laravel as backend. Read the Passport document and now confused about the following paragraph because I don’t want to redirect the user to backend login page:

Authorization Code Grant with PKCE

The Authorization Code grant with “Proof Key for Code Exchange” (PKCE) is a secure way to authenticate single page applications or native applications to access your API. This grant should be used when you can’t guarantee that the client secret will be stored confidentially or in order to mitigate the threat of having the authorization code intercepted by an attacker. A combination of a “code verifier” and a “code challenge” replaces the client secret when exchanging the authorization code for an access token.

What’s the problem of making the following request in client browser and save the token in client browser?

http->post('http://your-app.com/oauth/token', [
    'form_params' => [
        'grant_type' => 'password',
        'client_id' => 'client-id',
        'client_secret' => 'client-secret',
        'username' => '[e-mail]',
        'password' => 'my-password',
        'scope' => '',
    ],

Answer

The latest OAuth 2.0 Security Best Current Practice disallows the password grant entirely.

“The resource owner password credentials grant MUST NOT be used. This grant type insecurely exposes the credentials of the resource owner to the client. Even if the client is benign, this results in an increased attack surface (credentials can leak in more places than just the AS) and users are trained to enter their credentials in places other than the AS.

Furthermore, adapting the resource owner password credentials grant to two-factor authentication, authentication with cryptographic credentials, and authentication processes that require multiple steps can be hard or impossible (WebCrypto, WebAuthn).”