K
Kinde10mo ago
_.Mass._

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
Daniel_Kinde10mo 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._
_.Mass._OP10mo 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
Daniel_Kinde10mo 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
f610mo ago
is this kindeClient.login method available in nextjs app v2 sdk?
Daniel_Kinde
Daniel_Kinde10mo ago
@f6 Within V2 you can use the <LoginLink> component and pass attribute called authUrlParms Example:
<LoginLink authUrlParams={{
connection_id: 'CONNECTIONID',
login_hint: '[email protected]',
}}>Sign in</LoginLink>
<LoginLink authUrlParams={{
connection_id: 'CONNECTIONID',
login_hint: '[email protected]',
}}>Sign in</LoginLink>
f6
f610mo ago
thanks @Daniel_Kinde appriciated, can you provide me the list of all the keys that are allowed in authUrlParams object
onderay
onderay10mo 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.
Want results from more Discord servers?
Add your server