Kinde•12mo ago

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•12mo 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.OP•12mo ago

Yup I'm using that version

Oli - Kinde•12mo 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.OP•12mo 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

Rep.OP•12mo ago

NextJS version for context ^14.0.3

Oli - Kinde•12mo ago

Okay I will have to ask my NextJS expert team-mate about this issue on Monday.

Oli - Kinde•12mo 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•12mo 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•12mo ago

Rep.OP•12mo ago

This is my structure:

Rep.OP•12mo 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.OP•12mo ago

If I wrap the handleAuth and console.log in the endpoint, you can see that the route is being hit:

peteswah•12mo ago

Maybe try capital letter for the “a” In kindeAuth And just double check the code looks like this 🤞

Rep.OP•12mo ago

Amazing thank you it was the capital "a" 🤦‍♂️

Gaming

Programming

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