Kinde•2mo ago

LoginLink not working in NextJS

I have been sitting with this issue for a while now in NextJS. After following the docs to setup my application for NextJS and getting to the point where I added a <LoginLink>Sign in</LoginLink> and <RegisterLink>Sign up</RegisterLink> Clicking on the Signup button redirects me to kinde's website where the user can register. However, Clicking on the LoginLink takes me to my own site and does nothing. The same thing happens when I use the route /api/auth/login and /api/auth/register Any help will be appreciated

5 Replies

Abdiwak•2mo ago

Hello, JackNytely. Your description suggests that the <LoginLink> and <RegisterLink> components are rendering, but only the register flow is redirecting correctly, while login is not, and going directly to /api/auth/login also does nothing. Here are the key things to check based on the official Kinde Next.js SDK documentation: 1. API Route Handler Exists Make sure you have the required API route handler set up. For the Next.js Pages Router SDK, you must create /pages/api/auth/[...kindeAuth].js with the following code:

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

export default handleAuth();

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

export default handleAuth();

This file is required for the Kinde auth endpoints to work. Without it, the /api/auth/login and /api/auth/register routes will not function (https://docs.kinde.com/developer-tools/sdks/backend/nextjs-prev-sdk/#authentication). 2. Environment Variables Double-check your .env.local file contains all the necessary Kinde variables, and that their values match what you have in your Kinde application settings:

KINDE_CLIENT_ID=<your_kinde_client_id>
KINDE_CLIENT_SECRET=<your_kinde_client_secret>
KINDE_ISSUER_URL=https://<your_kinde_subdomain>.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

KINDE_CLIENT_ID=<your_kinde_client_id>
KINDE_CLIENT_SECRET=<your_kinde_client_secret>
KINDE_ISSUER_URL=https://<your_kinde_subdomain>.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

If these are missing or incorrect, authentication won't work as expected (https://docs.kinde.com/developer-tools/sdks/backend/nextjs-prev-sdk/#authentication).

Abdiwak•2mo ago

3. No Conflicting Routes Ensure you do not have your own custom /login or /register routes/pages that could intercept or conflict with Kinde’s /api/auth/login and /api/auth/register. If you do, remove or rename them, as this is a common cause of the behavior you described (https://github.com/kinde-oss/kinde-auth-nextjs/issues/86). 4. Correct Link Usage For Next.js 13+ with the Pages Router, use the provided <LoginLink> and <RegisterLink> components. If you are using standard <a href="/api/auth/login"> or <a href="/api/auth/register">, that’s also supported, but do not wrap these links with the Next.js <Link> component, as prefetching can cause state errors (https://docs.kinde.com/developer-tools/sdks/backend/nextjs-prev-sdk/#authentication). 5. Dev Server Restart After updating any routes or environment variables, restart your Next.js development server to ensure all changes are picked up. If you follow all of these steps and the issue persists, please confirm: - The framework version and SDK version you are using. - That you do not see any errors in your server logs or browser console. - That visiting /api/auth/login directly in your browser triggers a redirect to Kinde’s login page. Let me know if this helps or if you need more help troubleshooting.

Kinde docs

Next.js Pages Router SDK

Legacy guide for Next.js Pages Router SDK including authentication setup, route handlers, and migration from previous versions.

JackNytelyOP•2mo ago

I love you, I did have everything setup correctly, and after deleting my existing /api/login and /login pages it still did not work, however, I went to the middleware.ts file to check if I maybe have residuals there and found I have set the Login Page property to /login

/**
 * The middleware for the Kinde
 * @param req - The request object
 * @returns The middleware for the Kinde
 */
export default withAuth(async function middleware(req: NextRequest) {}, {
    // Middleware still runs on all routes, but doesn't protect the blog route
    isReturnToCurrentPage: true,
    loginPage: '/login',
});

/**
 * The middleware for the Kinde
 * @param req - The request object
 * @returns The middleware for the Kinde
 */
export default withAuth(async function middleware(req: NextRequest) {}, {
    // Middleware still runs on all routes, but doesn't protect the blog route
    isReturnToCurrentPage: true,
    loginPage: '/login',
});

Removing that fixed the issue:

/**
 * The middleware for the Kinde
 * @param req - The request object
 * @returns The middleware for the Kinde
 */
export default withAuth(async function middleware(req: NextRequest) {}, {
    // Middleware still runs on all routes, but doesn't protect the blog route
    isReturnToCurrentPage: true,
});

/**
 * The middleware for the Kinde
 * @param req - The request object
 * @returns The middleware for the Kinde
 */
export default withAuth(async function middleware(req: NextRequest) {}, {
    // Middleware still runs on all routes, but doesn't protect the blog route
    isReturnToCurrentPage: true,
});

Abdiwak•2mo ago

Hello again, I'm glad to hear that worked! Thank you for taking the time to report back with your solution; it's incredibly helpful for us and will allow us to assist others with similar issues more quickly, many actually don't report back when they find the solution, so thanks again

JackNytelyOP•2mo ago

No problem, Thanks again, and I am glad I could help in someway aswell ❤️

Gaming

Programming

LoginLink not working in NextJS

Did you find this page helpful?