Kinde•7mo ago

How to set values to kinde object

Hello, i really need to make some custom signin and signup pages for my application. I'm planning on using the now available " custom signin and signup pages " from here : https://kinde.com/docs/authentication-and-access/custom-authentication-pages/ " The screen where users can choose to create an account if one was not found " This is blocking for me as for my use case I'll have my own form for signin up. How would I set the user's given_name, last_name, profile, id within the kinde user object ? I am using NEXTJS

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.

14 Replies

IkiTg07•7mo ago

Btw I don't think having authUrlParams typed as

    authUrlParams?: {
        [x: string]: string;
    };

    authUrlParams?: {
        [x: string]: string;
    };

is a good thing. It should be more typesafe with the correct options we can add. I tried to add connection_id but it didn't show up with intellisens

Oli - Kinde•7mo ago

Hey @IkiTg07, Let me get back to you on this. Hey @IkiTg07,

This is blocking for me as for my use case I'll have my own form for signin up

Do you want your own UI for sign-in and sign-up?

How would I set the user's given_name, last_name, profile, id within the kinde user object ?

If you want to have your UI where the user enters their given_name and last_name, you achieve this by either having: 1. A UI form where the users enters their given_name and last_name and then you call Kinde auth register URL, you then add the given_name and last_name to the user via the Update User API call 2. After the a user successfully registers, by calling in the Kinde auth register URL, they are redirected to a form where the user enters their given_name and last_name, which is added to the user via the Update User API call

How would I set the user's given_name, last_name, profile, id within the kinde user object ?

"profile" - what do you mean by "profile" here? "id" - do you want to add a custom ID against a user object? Good point, I will bring this up with my team. Hey @IkiTg07, You can indeed define authUrlParams in a way that both known properties (like connection_id) and custom properties can be utilized effectively. Here's how you can define it:

authUrlParams?: {
    [x: string]: string;
    connection_id?: string;
};

authUrlParams?: {
    [x: string]: string;
    connection_id?: string;
};

With this definition, you can enjoy IntelliSense support for the connection_id property and still have the flexibility to add custom properties as needed:

authUrlParams["custom_thing"] = "bleh";
authUrlParams.connection_id = "abc";

authUrlParams["custom_thing"] = "bleh";
authUrlParams.connection_id = "abc";

This approach provides a balance between type safety for known properties and flexibility for custom properties. If you have any further questions or need assistance integrating this into your NextJS application with Kinde, please don't hesitate to reach out.

IkiTg07•7mo ago

I could indeed change the type definition of the type PropsType but it will be inside the node_module folder in RegisterLink.d.ts. I'm going to try this. Thank you Alright so it's working but don't you provide like a login method I could use instead of LoginLink / RegisterLink component ? I'm using react-hook-form to validate my data first And is there a way for me to prepopulate with given_name and family_name ? I tried

            authUrlParams={{
              connection_id: "MY_CON_ID",
              given_name: getValues("givenName"),
              family_name: getValues("familyName"),
              login_hint: getValues("email"),
            }}

            authUrlParams={{
              connection_id: "MY_CON_ID",
              given_name: getValues("givenName"),
              family_name: getValues("familyName"),
              login_hint: getValues("email"),
            }}

But it didn't work

Oli - Kinde•7mo ago

Here is a suggested approach: 1. Use react-hook-form to build your form 2. Instead of using the LoginLink directly as a button in your form, use a regular submit button within your form. 4. In your form's onSubmit handler, after successful validation by react-hook-form, programmatically trigger the login process. Since LoginLink is designed for a different use case (redirecting without form submission), you might need to use the login method provided by Kinde's React SDK to programmatically initiate the login process based on the validated form data. Let me know if you need further assistance on this. At the moment you cannot prepopulate given_name and family_name in the auth URL request. You would need to use the Update User API call for this at the moment. I think this would be a reasonable update to add given_name and family_name properties in the Auth URL request. I will pass this onto my team.

IkiTg07•7mo ago

How would I need to setup kinde react sdk ? I tried by following the docs but when I use /api/auth/kinde_callback as the redirectUri it doesn't work and I MUST use the provider otherwise login throws an error

Oli - Kinde•7mo ago

Hey @IkiTg07, I will get one of my expert NextJS/React teammates to help you out tomorrow.

IkiTg07•7mo ago

Thank you, really appreciate it

Oli - Kinde•7mo ago

My pleasure Hey @IkiTg07, This request for given_name and family_name properties in the Auth URL request has sparked an internal conversation on how to best approach this. Currently you cannot pass in given_name and family_name properties in the Auth URL request. I will get back to you once I have more information. In the meantime, would the solution of passing these values via the Kinde Management API work for you?

IkiTg07•7mo ago

Hello, management API is fine with me yes

Oli - Kinde•7mo ago

Awesome. We are looking into how we can make it easier so you can add values against properties of a user, but so you aren't blocked, I would recommend using the Kinde Management API

IkiTg07•7mo ago

Alright thanks How about my issue with integrating Kinde React SDK in my NextJs app ? Hello, so I found a way around my use case with react-hooks-form. I'm using router.push() to

"/api/auth/login?connection_id=conn_MYCONID&login_hint=${values.email}&post_login_redirect_url=/"

"/api/auth/login?connection_id=conn_MYCONID&login_hint=${values.email}&post_login_redirect_url=/"

And it works fine. I'd have another question tho. I tried to use

const apiClient = await createKindeManagementAPIClient();

const apiClient = await createKindeManagementAPIClient();

KindeManagementAPI to give my users roles. But can't find the correct method to use.

Oli - Kinde•7mo ago

Hey @IkiTg07, Great to hear you found a way to user react-hooks-form.

And it works fine. I'd have another question tho. I tried to use const apiClient = await createKindeManagementAPIClient(); KindeManagementAPI to give my users roles. But can't find the correct method to use.

Let me get back to you on this. Hey @IkiTg07, It would be great to know more about your use-case for giving your users roles. Do you have a screen in your UI where the user goes in and clicks a button to say what role they want to be? Or is it a screen in your UI where an admin can see a list of users and assign a role for a user? We are trying to get a picture of the logic you want to achieve so we can give you the best guidance on how to assign your users roles.

IkiTg07•7mo ago

So I have 2 signup flow, one for clients and one for provider and the orga + roles for both (client role / orga and provider role / orga). I want to update the user's role as soon as its registration is done and assign him the correct role as I did with the orga

Oli - Kinde•7mo ago

Hey @IkiTg07, Thanks for getting back to me. I'm still a little confused of the experience/logic you are trying to achieve.

orga + roles for both (client role / orga and provider role / orga).

Are you able to explain this more? I understand you have 2 sign-up flows for providers and clients. Do you want all users who register as a provider or client to be assigned to be assigned a specified role? Do users self-signup as a provider or client?

Gaming

Programming

How to set values to kinde object