Kinde•4mo ago

Using custom login page

Hi, I am trying to use a custom login page. I have my page implemented with a login button and on click event I am calling the kindeClient.login method passing the following options

{
    authUrlParams: {
      connection_id: connectionId,
      login_hint: email,
    },
    org_code: orgCode',
  }

{
    authUrlParams: {
      connection_id: connectionId,
      login_hint: email,
    },
    org_code: orgCode',
  }

My expectation from here according to the docs is that the user should see the kinde code verification page, however the behaviour I am getting is on first click the email is appended to my search params. If I then enter the email again in my input and click I then am redirected to the code verification page. I am using this version of the javascript sdk "@kinde-oss/kinde-auth-pkce-js": "^3.0.30" . Is there anything I am missing or doing wrong? Here are the docs I was following https://kinde.com/docs/authentication-and-access/custom-authentication-pages/#. Thank you

Kinde Docs

Custom sign-up and sign-in pages - Authentication and access - Help...

Our developer tools provide everything you need to get started with Kinde.

7 Replies

Daniel_Kinde•4mo ago

Hi @.Mass. sorry for the delay in the response. As I right in understanding you are finding that you're having to attempt the login twice before it works?

_.Mass._•4mo ago

no worries, yes that is correct. I have to login twice before it works. The first time it only sets the email as query param to my custom login page, the second time it works. ok, the problem was in my code. I missed that I had a form with action=# that was reloading the page. Product of a copy paste from a component framework. I confirm the login works as expected.

Daniel_Kinde•4mo ago

@.Mass. Great news you're all working, thank you for getting back to me and letting me know your solution, really appriciated. Please do let me know if you have any further issues.

f6•4mo ago

is this kindeClient.login method available in nextjs app v2 sdk?

Daniel_Kinde•4mo ago

@f6 Within V2 you can use the <LoginLink> component and pass attribute called authUrlParms Example:

<LoginLink authUrlParams={{
  connection_id: 'CONNECTIONID',
  login_hint: 'someone@email.com',
}}>Sign in</LoginLink>

<LoginLink authUrlParams={{
  connection_id: 'CONNECTIONID',
  login_hint: 'someone@email.com',
}}>Sign in</LoginLink>

f6•4mo ago

thanks @Daniel_Kinde appriciated, can you provide me the list of all the keys that are allowed in authUrlParams object

onderay•4mo ago

You can find the list here https://kinde.com/docs/developer-tools/using-kinde-without-an-sdk/#request-parameters it is missing the connection_id though

Kinde Docs

Using Kinde without an SDK - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

Gaming

Programming

Using custom login page