/api/login route cannot found on build (NUXT)
hello, we got a problem on kinde nuxt module, problem is build or preview mode, when project run under dev mode everything is ok. but we run npm run build + start or preview /api/login navigate method cannot work. not found error on ssr
14 Replies
I have had similar problems (I think). I ended up resorting to
await sendRedirect(event, '/api/login');Hi @Mert Efe Cerit,
Thanks for reporting the issue. It seems like the /api/login route works in dev mode but not in build/preview mode, possibly due to SSR handling.
Could you confirm if you're using any custom server configuration or middleware that might affect the SSR handling of API routes? Also, is the issue happening only with /api/login or other routes as well?
@Ages @Stephen thanks for replies, i don't use any custom server configuration and i have tested
It doesn't work either way.
@Mert Efe Cerit Oh. I'm using Vuetify so I haven't used NuxtLink directly for some time, but it could be because you're using
to instead of href.
For me this works (v-btn being a Vuetify component.
<v-btn class="ml-4" min-width="160px" size="large" nuxt href="/api/login" external>Login</v-btn>
IIRC I also had this working with NuxtLink instead of the Vuetify button / LoginLink. Looking at the Nuxt SDK code (after cloning from GitHub) it looks like it has props for href but not to. So I suspect that's the problem. Otherwise I have no idea sorry.@Stephen i can't good speak english sorry 🙂
Hello Stephan, I'm actually only using the logout and login functionality. I wanted to test these out since that's how it was shown in the documentation (Nuxt Kinde). Also, in Vue.js, even if a value is not explicitly defined as a prop, it gets placed directly under the parent component. Because there’s a NuxtLink there, the "to" property will work as expected. Therefore, we need to use it on the middleware side. We need to make the necessary checks and provide the relevant redirects before the page is opened. I hope I could explain it with my bad English. Thank you for your interest. 🙂
Your English is fine mate. And I shouldn't have been answering questions in the evening, looking at the Kinde SDK code again
href is actually a computed property on that component. I'm still learning Vue (I'm mainly a backend developer) but I was aware of t he prop values bubbling down.
Unfortunately I'm not sure if I can help you much further as it's getting a bit beyond my knowledge of middleware.
I quickly. used LoginLink as per your code and it worked for me. However I did get a different warning. WARN [NuxtLink] to and href cannot be used together. href will be ignored.
Just using <LoginLink/> without any attributes worked for me. Internally the LoginLink wraps around a <NuxtLink /> with an external prop anyway.
Have you added @nuxtjs/kinde to your nuxt.config.ts file?@TotalScrub I apologize for replying late. Things are very busy these days 🙂
everything is oke on development on local.
Hi @Mert Efe Cerit, I understand that everything works well in development mode locally, but the issue persists in build/preview mode.
To help further, could you confirm the following:
Is @nuxtjs/kinde added to your nuxt.config.ts file under modules?
- Are there any differences in your environment setup between development and production (e.g., base URL, environment variables)?
- Also, it might be worth testing with a minimal example, using just <LoginLink> without any additional attributes to rule out any conflicts.
Let me know how it goes, and we’ll work together to resolve this
@Ages I apologize for replying late i lot of busy these days ,
Is @nuxtjs/kinde added to your nuxt.config.ts file under modules?
Answer : Yes
Question : Are there any differences in your environment setup between development and production (e.g., base URL, environment variables)?
Answer : no only one .env file,
Question : Also, it might be worth testing with a minimal example, using just <LoginLink> without any additional attributes to rule out any conflicts.
Answer : I made a zero nuxt installation for you and tried it. and same error on attached image
Hi @Mert Efe Cerit ,
Thank you for providing the details, Since you've confirmed that everything works well in development and that there are no environment differences between development and production, it seems like the issue might be related to SSR handling or how the Nuxt app is built for production.
I suggest trying the following:
- Ensure that there are no stale builds or cached configurations by running a full clean build (npm run clean followed by npm run build).
- Since the issue occurs only in build/preview mode, make sure your app is correctly configured to handle SSR. Verify that routes like /api/login are properly handled during SSR by checking the server-side setup. For more details, you can refer to the Nuxt SSR Documentation.
- Since you've tested with a minimal example and the issue persists, it would be helpful to ensure that there are no conflicts in the configuration or that there’s no misconfiguration with the API routes.
For further assistance, you can also refer to the Kinde Nuxt module documentation: Kinde Nuxt Module.
If these steps don’t resolve the issue, I recommend testing the app in production mode with logging enabled to track any potential differences in the server behavior.
Let me know if this helps, or if you'd like further assistance in troubleshooting
Hi @Mert Efe Cerit ,
I wanted to follow up and see if you've had a chance to try the steps we discussed earlier, such as performing a clean build and verifying your server-side configuration for handling SSR.
If you're still experiencing issues, please feel free to share any additional details or logs from your production testing, and we'll be happy to assist you further. Otherwise, we'll go ahead and close this ticket, but you're always welcome to reach out again if needed.
Hi, @Ages
I remember saying before that I was doing the things you asked me to do. That's why I couldn't find anything to answer. But today we received email from kinde and tried some solutions. We discovered that the problem was that the information belonging to Kinde in the .env file was not transferred to the application during build. We needed to make the nuxt.config.ts setting specified as an alternative in the document. We eliminated this option because it was mentioned as an alternative. Therefore, we have now fixed the "no match found" error we mentioned before and are running it on the server. However, we were stuck with the 502 bad gateway error and could not figure out how to overcome it.
Hi @Mert Efe Cerit ,
Thank you for your update. I'm glad to hear that you've resolved the "no match found" error by ensuring that the Kinde information in your .env file is correctly transferred to the application during the build process. This step is crucial for proper integration with Kinde.
Regarding the 502 Bad Gateway error you're encountering, this typically indicates that the server, acting as a gateway or proxy, received an invalid response from the upstream server. Common causes include issues with server configurations, network problems, or server overload.
To troubleshoot this issue, I recommend the following steps:
1. Check Server Logs: Examine your server logs for any error messages or warnings that could provide more insight into the cause of the 502 error.
2. Verify Server Configuration: Ensure that your server is correctly configured to handle requests and that all necessary services are running.
3. Inspect Network Connectivity: Confirm that there are no network issues affecting communication between your server and any upstream services.
4. Review Kinde Integration: Since the issue arose after integrating Kinde, double-check your Kinde configuration settings to ensure they are correct and that the Kinde service is operational.
5. Consult Hosting Provider: If you're using a hosting service, reach out to their support team for assistance, as they may have additional insights into the issue.
If you continue to experience difficulties after performing these checks, please provide any relevant error logs or additional details, and I'll be happy to assist you further