Keycloak registration/signup page

[syam5492009]

Question 💬

Thanks for the awesome library. Implemented the keycloak authentication with next-auth. In one condition, i need to redirect the user to keycloak registration page instead of signIn page. How can i acheive it

How to reproduce ☕️

openid-connect/registrations - custom link used . But no use. please help me on this

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

If this is the right spec, you just set the prompt: "create" parameter for the authorization endpoint:

https://openid.net/specs/openid-connect-prompt-create-1_0.html#name-prompt-parameter
https://next-auth.js.org/configuration/providers/oauth#override-default-options
https://next-auth.js.org/getting-started/client#additional-parameters

[syam5492009]

I did used like this . signIn("keycloak", null, { prompt: "create" });
But it is redirecting me to Login Page only.

[V-Mann-Nick]

Yeah this unfortunately does not work.

Keylcoak serves authorization endpoint on {origin}/auth/realms/{realm}/protocol/openid-connect/auth while registration is on {origin}/auth/realms/{realm}/protocol/openid-connect/registrations.

?prompt=create is also not respected by Keycloak as @syam5492009 noted.

I could of course create the registration link manually but then I'm unsure on how to check for state and nonce on callback. The registration works this way but the redirect to /api/auth/callback/keycloak leads to an error.

I tried using a custom authorization.request which typescript told me about, but that apparently is a dud as you have noted @balazsorban44.

Only way to do registrations properly is going to the login of Keycloak and clicking "Register" there, but that does not fit our requirements as we need a Keycloak register button in our UI.

[V-Mann-Nick]

So I have found a very hack workaround, I'm not very happy with at all but I guess it will have to do for now.

First I created a function

const registrationEndpoint = `${process.env.NEXT_PUBLIC_KEYCLOAK_URL}/realms/${process.env.NEXT_PUBLIC_KEYCLOAK_REALM}/protocol/openid-connect/registrations`

export const createRegistrationUrl = (redirectUri: string) => {
  const params = new URLSearchParams()
  params.set('client_id', process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID)
  params.set('redirect_uri', redirectUri)
  params.set('scope', 'openid profile email')
  params.set('response_type', 'code')
  params.set('response_mode', 'fragment')
  return `${registrationEndpoint}?${params.toString()}`
}

This is mostly taken from keycloak-js although it's vastly simplified and I'm sure there's some security aspect of it I'm not understanding and completely neglecting.

I then use this function like so:

createRegistrationUrl(`${window.location.origin}/callback?type=post_register?redirect_uri=/`)

Note the following:

• window.location.origin can't be used on the server and might cause a hydration mismatch. I used an env variable NEXT_PUBLIC_HOST=http://localhost:300 to avoid that
• ?type=post_register&redirect_uri=/ will be used by the /callback page

This Page goes ruffly like this:

export default function Callback() {
  const router = useRouter()
  useEffect(() => {
    if (!router.isReady) return
    const type = assertString(router.query['type'])
    const redirectUri = assertString(router.query['redirect_uri'])
    if (!type) {
      router.replace(redirectUri ?? '/')
      return
    }
    switch (type) {
      case 'post_register': {
        if (!redirectUri) {
          router.replace('/')
          return
        }
        signIn('keycloak', { callbackUrl: redirectUri })
        return
      }
    }
  }, [router])
  return <span>Loading...</span>
  )
}

This signes in the user on the next-auth side and as the user is already logged in on the keycloak side there's no need to login. Next-auth will then direct the user back to the page they originally came from with the callbackUrl option.

I guess this is acceptable although I would love to see a way to accomplish this in next-auth.

[SultanNasyrovDeveloper]

+1

[liamlows]

As far as I can tell, the easiest path forward would be for Keycloak to support the OIDC prompt=create, there is currently an issue open here: keycloak/keycloak#10701

Hopefully Keycloak will notice it and add it (seems to be a relatively simple add) although there has been no response from devs thus far in 2 years since it was opened.

[kirtimaan-askin]

Seems that keycloak/keycloak#10701 was addressed and merged into keycloak 26.x version.

Unless it's already somehow addressed in next-auth, may I take this up and implement as contribution to this awesome package?

[Tmauc]

Hi, do you have any news about the implementation of prompt=create in nextauth?