Keycloak: how to log in into keycloak without popup

[jvnm-dev]

Next 14, next-auth v5.0.0-beta.19
I am trying to integrate keycloak into my app. It works but when I enter my app credentials I have a keycloak popup which asks me keycloak credentials (that I have in a .env file).

How can I log in into keycloak in the background with next-auth so I don't have that popup?

My code:

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  ...authConfig,
  providers: [
    KeycloakProvider({
      clientId: process.env.KEYCLOAK_CLIENT_ID,
      clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
      issuer: process.env.KEYCLOAK_URL,
    }),
  ],
});

The keycloak popup I have (after clicking on submit in my app log in form)

[k-taro56]

I can't fully understand your question, but perhaps the answer is "you can't".
In particular, I don't know if it is possible to bypass Keycloak's credentials by putting them in next-auth's .env.
If you want credential authentication, use CredentialProvider instead of Keycloak.

[jvnm-dev]

Thanks for answering. Actually, those credentials are the keycloak credentials, it's kind of protected I guess.
Others app using keycloak in my company are passing a token that they get by calling {ISSUER}/protocol/openid-connect/token but I can't find a way to do that with next-auth. So, that means next-auth cannot handle keycloak method if keycloak is protected?

[k-taro56]

Maybe, next-auth calls {ISSUER}/protocol/openid-connect/token.
Why do you think so? 🤔

And if we don't call that endpoint, what do you think will happen?

[jvnm-dev]

I think that the call is not made or the token is not passed automatically because I have that log in page that pops up when I sign in into my app log in form. If it was passed it would not open that pop up I guess

[jvnm-dev]

Ok I found new things. The authorization url given by next-auth is the pop up.
I enabled debug mode and here is the result:

[auth][debug]: authorization url is ready {
  "url": "http://censored.com:5600/auth/realms/WebFrontEndClient/protocol/openid-connect/auth?response_type=code&client_id=WebFrontEndClient&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fkeycloak&code_challenge=HgJhI9SgQEXOosVTZaCdx751SRJVGrPGFduHCmSPkPI&code_challenge_method=S256&scope=openid+profile+email",
  "cookies": [
    {
      "name": "authjs.pkce.code_verifier",
      "value": "eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIiwia2lkIjoicWUTVROEpPV3NJVm5GTkZ4Q2xEREQzZGR0cFhtb1ZqUjU5TkpnRHliMmN0dVByLUtaOWV0aHdyeW9vOWVSS2OHhaTi1iM2dmWnVhTllUakI3elEifQ..ynvEUUvkkm1eJaf-sgtzkA.bR7-zuZhFD69F8nBtlk5aDKwQYXk0j8bFtbPk0jL54cK8UgZQWth3js6uaOG7R93djZUHtcKt5Pu2vLE5VVgWSBKecIhqnRprZl--qE96zhi8lJWRwdM6hOOAnZ_d4673iaDB4UPmLNPnJJ88mNjNtuR4xzkfZ2HMAw4fTu3to_G3d22ciPDVnKPrkTN33-J.HHuOJS3Sh5xhrAt-1HQj4LBtM081IZy6oD8MDZQTk",
      "options": {
        "httpOnly": true,
        "sameSite": "lax",
        "path": "/",
        "secure": false,
        "maxAge": 900,
        "expires": "2024-07-18T13:54:01.733Z"
      }
    }
  ],
  "provider": {
    "id": "keycloak",
    "name": "Keycloak",
    "type": "oidc",
    "style": {
      "brandColor": "#428bca"
    },
    "clientId": "WebFrontEndClient",
    "clientSecret": "5f394b9b-91e1-4d1d-9c2b-26b41c1fa346",
    "issuer": "http://censored.com/auth/realms/WebFrontEndClient",
    "signinUrl": "http://localhost:3000/api/auth/signin/keycloak",
    "callbackUrl": "http://localhost:3000/api/auth/callback/keycloak",
    "wellKnown": "http://censored.com/auth/realms/WebFrontEndClient/.well-known/openid-configuration",
    "checks": [
      "pkce"
    ]
  }
}

But I don't get why there isn't parameters like username and password to bypass that url

[saujanya01]

I dont think you can bypass the keycloak ui, because /auth returns the login page itself.
If you want to bypass it, i would suggest to not use next-auth at all and instead authenticate all the requests by sending post request to /token endpoint.

curl --location 'http://localhost:8080/realms/{realm_name}/protocol/openid-connect/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'client_id=ui' \
--data-urlencode 'username=aaa' \
--data-urlencode 'password=aaa' \
--data-urlencode 'grant_type=password'