Kinde•6mo ago

With a custom signup screen, how do I ask user for first name and last name?

How can I collect and provide a user's first and last name to Kinde Auth during a custom signup process using email+passwordless authentication in a Next.js application? I'm currently using a custom signup screen with the following RegisterLink component:

<RegisterLink
                authUrlParams={{
                    connection_id:
                        process.env.NEXT_PUBLIC_KINDE_CONNECTION_PASSWORDLESS ||
                        "",
                    login_hint: email,
                }}
                
            >

<RegisterLink
                authUrlParams={{
                    connection_id:
                        process.env.NEXT_PUBLIC_KINDE_CONNECTION_PASSWORDLESS ||
                        "",
                    login_hint: email,
                }}
                
            >

When users click this link, they're directed to a Kinde page to enter the OTP sent to their email. I've enabled the 'Ask for user first name and last name' option in Kinde settings, but these fields aren't appearing. I have input fields for first and last name on my custom signup screen, but I'm unsure how to pass this information to Kinde. Is there a way to include these details within the RegisterLink component or through another Kinde Auth method? Or do I need to handle this separately by saving the names to my own database? I'd appreciate guidance on whether Kinde supports collecting this information during the signup process, and if so, how to implement it correctly.

7 Replies

Devendra Singh•6mo ago

hey, i have exact same concern, though im using react sdk, it tried passing given_name and family_name in the url params but its not working

register({
    authUrlParams: {
        connection_id: import.meta.env.VITE_KINDE_EMAIL_PASSWORD_CONNECTION_ID,
        login_hint: email,
        given_name: fname,
        family_name: lname,
    },
});

register({
    authUrlParams: {
        connection_id: import.meta.env.VITE_KINDE_EMAIL_PASSWORD_CONNECTION_ID,
        login_hint: email,
        given_name: fname,
        family_name: lname,
    },
});

Peteswah•6mo ago

I don't think this is supported yet!

Devendra Singh•6mo ago

this is a bad user experience, it should be supported, what's the point of having custom login signup page

Oli - Kinde•6mo ago

Hey @tobiasrasmsn and @Devendra Singh, As Peter said, currently there is not way to pass in Regarding #1, there is currently no way to pass in other auth url parameters, other than connection_id and login_hint for NextJS and React register components. It is on our radar to update the NextJS and React SDKs to allow passing in first name and last name details through components and store them against the newly registered user. Can you please both create an issue on the respective SDK GitHub repo on this topic? - NextJS SDK repo - React SDK repo We suggest storing the first name and last name values (from the custom registration form), and then assign those values to the user record (after they have successfully authenticated) via the Update User API call. Let me know if you have any questions on this.

GitHub

GitHub - kinde-oss/kinde-auth-nextjs: Kinde NextJS SDK - authentica...

Kinde NextJS SDK - authentication for server rendered apps - kinde-oss/kinde-auth-nextjs

GitHub

GitHub - kinde-oss/kinde-auth-react: Kinde React SDK for frontend a...

Kinde React SDK for frontend authentication flows. Contribute to kinde-oss/kinde-auth-react development by creating an account on GitHub.

Devendra Singh•6mo ago

@Oli - Kinde issue created in react-sdk

tobiasrasmsnOP•6mo ago

I've now created an issue in the NextJS SDK repo. Thank you for recommending the use of the Update User API call

Daniel_Kinde•6mo ago

Thank you @tobiasrasmsn.

Gaming

Programming

With a custom signup screen, how do I ask user for first name and last name?