Using Hydra via API to authenticate VueJs website

Hi all,
I am working on an authentication implementation for our VueJs frontend and Hydra. I am using the nuxtjs oauth2 module (https://auth.nuxtjs.org/#getting-started) and its coming along pretty well, but I have a question. I have a login view with the username and password fields. When I don’t fill the fields or give them a wrong input, Hydra still returns me a code/token.
Here is my settings from the nuxt.config.js file:

 auth: {
    strategies: {
      hydra: {
        _scheme: "oauth2",
        authorization_endpoint: "http://localhost:4444/oauth2/auth",
        userinfo_endpoint: "http://localhost:4444/userinfo",
        access_token_endpoint: "http://localhost:4444/oauth2/token",
        scope: ["openid"],
        response_type: "code",
        redirect_uri: "http://localhost:4000",
        client_id: "reaction-admin",
        token_key: "id_token",
        grant_type: "authorization_token",
        state: "UNIQUE_AND_NON_GUESSABLE",
        token_endpoint_auth_method: "client_secret_post",
      },
    },
  },

After some more debugging and testing, I found out I needed to include the “token_endpoint_auth_method”: “client_secret_post” in the client to make it ‘work’.
Now I’m at the point where I receive a login_challenge token via the url call.
What I don’t get is how to use this and how to make a full request with username and password to receive a correct token.

Can anyone help me understand how to make an API request using a custom login form?

Have you seen https://www.ory.sh/hydra/docs/implementing-consent ?

Thanks for the link. It helped a bit, but there is one thing I don’t get.
The flow starts with challenging the request, which i implemented now. At the end of that flow I receive a url where I need to redirect to (http://hydra:4444/oauth2/auth?.…).
But when is the user inserting the username + password? Should I now redirect to that link or do something else?
In the docs the next step is to do the consent. Do I need to do that before asking for credentials or does this log the user in based on cached credentials?

I am trying to figuring out how I should do a request with username and password
When I do a challenge GET request to the admin I get this error somehow while it worked before strangely enough.

Request:

Access to XMLHttpRequest at 'http://localhost:4445/oauth2/auth/requests/login?login_challenge=fb2dd474dce74b12851c29aa44ed1a32' from origin 'http://localhost:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error:

 ERROR  Cannot set headers after they are sent to the client                                                                                                                                     17:08:17

  at ServerResponse.setHeader (_http_outgoing.js:485:11)
  at Storage.setCookie (server.js:1448:20)
  at Storage.setUniversal (server.js:1260:10)
  at Oauth2Scheme.login (server.js:1122:25)
  at Auth.login (server.js:447:41)
  at server.js:439:51

Is this some setting I just broke maybe?

So I’ve been working on the flow for a couple of days now and I managed to implement the Login & Consent flow. I am now at the point where the auth module needs to set the token in the session/storage and verify it with the audience.
I am using the /oauth2/token endpoint to get the authorization token with the code I received.
The request looks like this:

Request URL: http://localhost:4444/oauth2/token
Request Method: POST
Accept: application/json

code: eS4YTuzBAVgcV7_usDi1eay2hZgxizg2q4C4dCYa3IU.w8p0AG1VxJTkt2gwHTIGuN0s_Pk_VSv7g_ewAc8gKus
client_id: example-storefront
redirect_uri: http://localhost:4000
response_type: code
grant_type: authorization_code

When the request is triggered, I receive a 401, which is odd to me because I request a token based on a code via a public endpoint.
Does anyone know what I should do to make this final step work?

[EDIT]
This is the error I get as response:

{
    "error": "invalid_client",
    "error_description": "Client authentication failed (e.g., unknown client, no client authentication included, or unsupported authentication method)",
    "status_code": 401,
    "error_debug": "crypto/bcrypt: hashedPassword is not the hash of the given password"
}

After some fine-tuning I managed to call the token endpoint and received a new Bearer code.
Once I run the /userinfo endpoint I encounter a 401 error.
The code should be correct and the request looks fine, but still encounter this issue.

what did you change?

I created an external container that handles the authentication flow and returns to the redirect_uri with the code. Then I added trigger the setToken of the auth module (basically calls the /oauth2/token endpoint and gets the user).
The token has a status of 200 so it seems thats just fine. But when I check the developer tools what the response is, it shows me Failed to load data. then redirects me again to the login page. When I do the /oauth2/token via postman, I get results and a valid token which I can use to get user data without a 401.