Kinde•5mo ago

Redirect to register instead of login?

I have "Start free trial" button on my page. It redirects to /checkout and /checkout is protected by the middleware. But the problem is it redirects user to login instead of register. How can I make it redirect to register? I use Next.js SDK

25 Replies

Oli - Kinde•5mo ago

Hey @Konrad, Thanks for reaching out. For the Next.js SDK, you can use the RegisterLink component to redirect users to the registration page instead of the login page.
Sign up and sign in To implement the registration functionality, you can use the RegisterLink component provided by the SDK. Here's how you can use it:

import {RegisterLink} from "@kinde-oss/kinde-auth-nextjs/components";

<RegisterLink>Sign up</RegisterLink>

import {RegisterLink} from "@kinde-oss/kinde-auth-nextjs/components";

<RegisterLink>Sign up</RegisterLink>

You can customize the redirect URL after registration by using the postLoginRedirectURL prop:

<RegisterLink postLoginRedirectURL="/checkout">Sign up</RegisterLink>

<RegisterLink postLoginRedirectURL="/checkout">Sign up</RegisterLink>

This will redirect the user to the /checkout page after they have completed the registration process. If you want to implement this programmatically instead of using the component, you can use the register function:

import {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs";

const {register} = useKindeAuth();

// In your component or event handler
register();

import {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs";

const {register} = useKindeAuth();

// In your component or event handler
register();

Remember to update your middleware to allow access to the registration page. You might need to adjust your middleware configuration to ensure it doesn't redirect unauthenticated users away from the registration process.

KonradOP•4mo ago

Getting back to this: - <RegisterLink postLoginRedirectURL="/checkout">Sign up</RegisterLink> - the problem is after user logs in and I press it again then the user is still redirected to register page... so this solution won't work and having if everywhere would be far from elegant

Oli - Kinde•4mo ago

Hey @Konrad, Are you able to record the issue where "user logs in and I press it again then the user is still redirected to register page."? This will help my team replicate the issue and troubleshoot the issue easier.

KonradOP•4mo ago

I mean you can easily test it in a demo app. Just show RegisterLink unconditionally with postLoginRedirect and click it after login

Oli - Kinde•4mo ago

Let me look into this and get back to you tomorrow.

KonradOP•4mo ago

Okay thank you

Oli - Kinde•3mo ago

Hey @Konrad, I am struggling to reproduce this. When I click the <RegisterLink after I am logged in, I am redirected to the postLoginRedirectURL. I am sure I have not setup my app the same way you did. So if you could send a recording or a code snippet of where you experience this issue, that would help my team and I reproduce and troubleshoot this issue.

KonradOP•3mo ago

are you using import {RegisterLink} from "@kinde-oss/kinde-auth-nextjs/components";

KonradOP•3mo ago

KonradOP•3mo ago

It has to be full URL i see, but even with a full url it doesnt work... I stay at register page i use custom domain too I will just create my own wrapper component I think because this is getting tiresome also This doesn't work. register is not part of nextjs specific package

import {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs";

const {register} = useKindeAuth();

// In your component or event handler
register();

import {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs";

const {register} = useKindeAuth();

// In your component or event handler
register();

im also using latest version (2.3.8)

Oli - Kinde•3mo ago

yes I am. I was still unable to reproduce your issue. register is part of the React SDK method. Whereas RegisterLink is part of the NextJS SDK.

Oli - Kinde•3mo ago

Hey @Konrad, I think the best next step would be to post an GitHub issue on our NextJS SDK GitHub repo that outlines the issue you are experiencing. My NextJS expert team mate constantly looks at the issues on the repo and addresses them. Please include as much information as possible on the GitHub issue so my team mate can reproduce the issue and fix it.

GitHub

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

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

KonradOP•3mo ago

Can react sdk coexist with nextjs sdk in the same project?

Oli - Kinde•3mo ago

It can, but I am wondering why you would want to do that? Are you able to elaborate on what you are trying to do?

KonradOP•3mo ago

Just simple thing I described. I Think i will just copy middleware and modify it to my needs From kinde sdk repo I had a person who clicked on “try for free” but he was redirected to login And called me why it doesn’t work So I think UX is not good enough And „don’t have an account „ is not easy to see. I need to see how big sites like YouTube do it

Oli - Kinde•3mo ago

Hey @Konrad, I apologise, I am confused still confused as to why you would want to use both the nextjs SDK and react SDK in the same project. Is there a specific use-case you want to solve? I am willing to guide you on how to best use Kinde's SDKs but I cannot guide you unless its clear to me what you are trying to do. I can also tell you seem to have a way forward: "I Think i will just copy middleware and modify it to my needs" I am here to help if need be.

KonradOP•3mo ago

I was referring to this code which obviously is incorrect as nextjs sdk has no such functions - only react sdk does. RegisterLink also ignores if user is already logged in. Customizing middleware or wrapping RegisterLink is the only way forward. Official SDK simply has no such feature but custom middleware will work fine thanks

KonradOP•3mo ago

https://github.com/kinde-oss/kinde-auth-nextjs/blob/main/src/handlers/register.js

GitHub

kinde-auth-nextjs/src/handlers/register.js at main · kinde-oss/kind...

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

KonradOP•3mo ago

RegisterLink just redirects to register unconditionally and kinde doesn’t handle existing user session internally I think Peter here might know more about this As an example go to Shopify.com when you press „Start free trial” it redirects you to register This is not possible with sdk out of the box But imo it’s common use case for better onboarding UX I solved it 😫 I also created a custom middleware that supports my i18n lib

KonradOP•3mo ago

https://gist.github.com/bugproof/dbef4972bc3d8c57b638490e316f42fa

Gist

Kinde Auth + Paraglide-Next

Kinde Auth + Paraglide-Next. GitHub Gist: instantly share code, notes, and snippets.

KonradOP•3mo ago

what I did : loginPage: pathWithoutLang === '/checkout' ? '/api/auth/register' : '/api/auth/login' I override loginPage for /checkout to point to register endpoint

KonradOP•3mo ago

so now I get what I wanted + also it will redirect to kinde auth based on my apps language

KonradOP•3mo ago

ngl it took me a good 40-60mins I ran the middleware code through claude to convert it to typescript 😎 it would be good if the middleware supported lang param out of the box

Oli - Kinde•3mo ago

I have passed this feedback to my NextJS and React expert team mate. Sounds like your issue is resolved. So @Konrad, is there anything else I can help you with for the moment? - besides the following language issue: https://discord.com/channels/1070212618549219328/1282059169763033121/1282209102013137028 - lets continue the conversation on this issue in the other thread).

Gaming

Programming

Redirect to register instead of login?