Custom param missing from callback using authUrlParams in Kinde Next.js
Hi! I’m using @kinde-oss/kinde-auth-nextjs in Next.js and trying to pass a custom invite param. Here’s my file structure and setup:
ENV: KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/api/auth/callback
Login code (page.tsx): src/app/login/page.tsx
<LoginLink
authUrlParams={{
invite: "myCustomInviteToken123",
}}
>
<Button>Sign in</Button>
</LoginLink>
callback (route.ts): /src/app/api/auth/callback/route.ts
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url);
const inviteToken = searchParams.get("invite");
console.log("Invite token is:", inviteToken);
//shows "null"
...
}
Any idea why invite doesn’t appear in the callback URL? Thanks!!3 Replies
Hi,
Thanks for reaching out. The behavior you're experiencing is due to how Kinde's authentication flow handles URL parameters. While the authUrlParams property lets you append custom parameters (like your invite token) to the initial login URL, those parameters aren’t automatically forwarded to the callback URL after authentication completes.
To work around this, we recommend encoding any custom data within the "state" parameter. The state parameter is designed to persist custom information through the OAuth flow, and you'll be able to retrieve it in your callback. Essentially, you can encode your invite token into the state value and then decode it on your callback route.
I hope this clarifies the issue. Please let me know if you have any further questions or need additional assistance
To work around this, we recommend encoding any custom data within the "state" parameter. The state parameter is designed to persist custom information through the OAuth flow, and you'll be able to retrieve it in your callback. Essentially, you can encode your invite token into the state value and then decode it on your callback route.
I hope this clarifies the issue. Please let me know if you have any further questions or need additional assistance
Does that mean that when we add anything to the authUrlParams it will be overwritten? What alternative do I have?
<LoginLink
authUrlParams={{
state: "YOUR_INVITE_TOKEN",
}}
>Hi there,
The short answer is that custom parameters added via authUrlParams are not automatically forwarded to the callback. Instead, the OAuth flow only returns standard parameters (like state), which means any extra parameters you add will effectively be "lost" by the time you reach your callback. To work around this, we recommend encoding your custom data—such as your invite token—into the state parameter. This way, you can pass the necessary information through the OAuth flow and retrieve it in your callback. If you already use the state parameter for security purposes, consider merging your custom data with the existing state (for example, by encoding a JSON object) and then decoding it on your callback route.
I hope this helps clarify the situation. Let me know if you have any further questions
The short answer is that custom parameters added via authUrlParams are not automatically forwarded to the callback. Instead, the OAuth flow only returns standard parameters (like state), which means any extra parameters you add will effectively be "lost" by the time you reach your callback. To work around this, we recommend encoding your custom data—such as your invite token—into the state parameter. This way, you can pass the necessary information through the OAuth flow and retrieve it in your callback. If you already use the state parameter for security purposes, consider merging your custom data with the existing state (for example, by encoding a JSON object) and then decoding it on your callback route.
I hope this helps clarify the situation. Let me know if you have any further questions