Welcome to the Kinde community

Updated 9 months 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
I
O
24 comments
Btw I don't think having authUrlParams typed as
Plain Text
    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
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:
Plain Text
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:
Plain Text
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.
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
Plain Text
            authUrlParams={{
              connection_id: "MY_CON_ID",
              given_name: getValues("givenName"),
              family_name: getValues("familyName"),
              login_hint: getValues("email"),
            }}

But it didn't work
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.
  3. 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.
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
Hey @IkiTg07,
I will get one of my expert NextJS/React teammates to help you out tomorrow.
Thank you, really appreciate it
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?
Hello, management API is fine with me yes
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
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
Plain Text
"/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
Plain Text
const apiClient = await createKindeManagementAPIClient();

KindeManagementAPI to give my users roles. But can't find the correct method to use.
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.
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
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?
Add a reply
Sign up and join the conversation on Discord