Kinde•3mo ago

Custom Sign In | React ref for LoginLink || login() function in NextJS SDK

When using a custom login flow i want to be able to handle the on enter event of the email input field for example to start the auth flow and click the Login Button I thought I could just use a react ref on the LoginLink component but it does not allow refs in the props (See Image) The documentation on custom auth has a login()function one could use on a button or smthing like that But the NextJS SDK does not seem to have that function anywhere ?

6 Replies

JoshkopOP•3mo ago

I've used the ref on the parent button now And click using

loginRef.current?.querySelector("a")?.click()

loginRef.current?.querySelector("a")?.click()

But there should be a better solution

IkiTg07•3mo ago

Hey, could you explain me further what you mean please by :

When using a custom login flow i want to be able to handle the on enter event of the email input field for example to start the auth flow and click the Login Button

There's no login() function in the NextJS SDK. What i find to work is to manually send a request to the api/auth/register or api/auth/login endpoint

JoshkopOP•3mo ago

I want to handle the on enter event of the Email Input to trigger the login button Which is a buttone and insdie is the LoginLink Component as children. If LoginLink would allow refs I could easily trigger the button Can I send the email adress with it to the api endpoint?

IkiTg07•3mo ago

Can you share a code snippet please ?

JoshkopOP•3mo ago

Sry for the late supply Heres my current working solution:

// ...
const loginRef = useRef<HTMLButtonElement>(null)
// ...
<TextInput
    label={"Email"}
    type={"email"}
    onChange={(e) => handleEmailLogin(e.currentTarget.value)}
    error={error}
    onKeyDown={(event) => {
        console.log(event)
        if (event.key === 'Enter' || event.key === 'NumpadEnter') {
            loginRef.current?.querySelector("a")?.click()
            }
        }}
/>
<Button ref={loginRef}>
    <LoginLink
    className={styles.login}
    authUrlParams={{
    connection_id: env.NEXT_PUBLIC_KINDE_CONNECTION_EMAIL_PASSWORD,
    login_hint: email
    }}
    >
        {t("sign_in")}
    </LoginLink>
</Button>

// ...
const loginRef = useRef<HTMLButtonElement>(null)
// ...
<TextInput
    label={"Email"}
    type={"email"}
    onChange={(e) => handleEmailLogin(e.currentTarget.value)}
    error={error}
    onKeyDown={(event) => {
        console.log(event)
        if (event.key === 'Enter' || event.key === 'NumpadEnter') {
            loginRef.current?.querySelector("a")?.click()
            }
        }}
/>
<Button ref={loginRef}>
    <LoginLink
    className={styles.login}
    authUrlParams={{
    connection_id: env.NEXT_PUBLIC_KINDE_CONNECTION_EMAIL_PASSWORD,
    login_hint: email
    }}
    >
        {t("sign_in")}
    </LoginLink>
</Button>

Instead of having the react ref on the button it would be nice to be able to put it onto the LoginLink component. But that doesnt accept React Refs as props

IkiTg07•3mo ago

Oooh I think I better understand now. I don't see any other way. You could also have a custom login() function that you will call on the onClick event of the <Button>

Gaming

Programming

Custom Sign In | React ref for LoginLink || login() function in NextJS SDK