K
Kinde7mo ago
Rep.

Clicking login takes me to API route and not login page (Next 14)

Trying to get up and running with Next14 and App Router. I've got env setup and the following in src/app/api/auth/[kindeauth]/route.ts
import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
import { type NextApiRequest } from "next";

export async function GET(
request: NextApiRequest,
{ params }: { params: { kindeAuth: string } },
) {
const endpoint = params.kindeAuth;
return handleAuth(request, endpoint);
}
import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
import { type NextApiRequest } from "next";

export async function GET(
request: NextApiRequest,
{ params }: { params: { kindeAuth: string } },
) {
const endpoint = params.kindeAuth;
return handleAuth(request, endpoint);
}
When I click my login component it navigates to http://localhost:3000/api/auth/login any ideas?
15 Replies
Oli - Kinde
Oli - Kinde7mo ago
Hi @Rep., We have fixed a lot of known issues in the latest version of the Kinde NextJS SDK v2.0.10. Are you using NextJS v2.0.10? If not, are you able to update to v2.0.10 and see if your issue still exists?
Rep.
Rep.7mo ago
Yup I'm using that version
No description
Oli - Kinde
Oli - Kinde7mo ago
Thanks for confirming you are using the latest version of the NextJS SDK. In the newer versions of the SDK (v2 and above), the handleAuth function doesn't require any parameters. So, you should update your GET function in src/app/api/auth/[kindeauth]/route.ts to look like this:
import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server"; export const GET = handleAuth();
import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server"; export const GET = handleAuth();
Also, make sure you're using the correct import for the LoginLink component in your login component file. It should look like this:
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components"; // ... <LoginLink>Sign in</LoginLink>
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components"; // ... <LoginLink>Sign in</LoginLink>
If you're still having issues, please let me know! I'm here to help.
Rep.
Rep.7mo ago
Tried both of these previously. Just double checked, tried again & restarted dev server. Same sort of issue, when pressing login I get sent to the same route
No description
Rep.
Rep.7mo ago
NextJS version for context ^14.0.3
Oli - Kinde
Oli - Kinde7mo ago
Okay I will have to ask my NextJS expert team-mate about this issue on Monday.
Oli - Kinde
Oli - Kinde7mo ago
Hey @Rep., It looks like you havent setup your route file correctly. Have a read of the following section in the NextJS App Router v2 doc: https://kinde.com/docs/developer-tools/nextjs-sdk/#set-up-kinde-auth-route-handlers Also I can see you have your file named route.ts instead of route.**js**. Please let me know if you are still having issues.
Kinde Docs
NextJS App Router SDK v2 - Developer tools - Help center
Our developer tools provide everything you need to get started with Kinde.
peteswah
peteswah7mo ago
Hey just to clarify, I think it is most likely the placement of the route.ts file that is the issue here src/app/api/auth/[...kindeauth]/route.ts should work if you have a src folder, otherwise you can place it in /app/api/auth/[...kindeAuth]/route.ts
peteswah
peteswah7mo ago
No description
peteswah
peteswah7mo ago
No description
Rep.
Rep.6mo ago
This is my structure:
No description
Rep.
Rep.6mo ago
I've tried both .js and .ts file extensions I've tried the route as both: app/api/auth/[kindeAuth]/route.ts and app/api/auth/[...kindeAuth]/route.ts
Rep.
Rep.6mo ago
If I wrap the handleAuth and console.log in the endpoint, you can see that the route is being hit:
No description
peteswah
peteswah6mo ago
Maybe try capital letter for the “a” In kindeAuth And just double check the code looks like this 🤞
Rep.
Rep.6mo ago
Amazing thank you it was the capital "a" 🤦‍♂️