/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
20 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
@Ages I apologize for replying late. We are really busy these days. Our problem has been solved in Kinde. Devops informed us that it was related to server side SSL certificates. We can close the subject. Thank you. 🙂
Hi @Mert Efe Cerit ,
No worries at all—I’m glad to hear the issue has been resolved and that the server-side SSL certificates were the key.
I’ll go ahead and close this ticket now. Should you have any other questions or need assistance in the future, feel free to reach out by opening a new ticket.
Thank you, and have a great day! 🙂
Hello, I have exactly the same problem, deployed on nuxt hub and instantly cant access the auth. What's the solution again? The env is propagated to the production yet it still throws error
Dear Nazvix,
Thank you for reaching out, it's likely that the problem stems from how environment variables are managed in production builds.
In development mode, Nuxt automatically loads environment variables from your
.env file. However, in production, .env files are not utilized by default. This means that any environment variables defined in .env won't be available unless explicitly configured.
https://nuxt.com/docs/guide/directory-structure
To ensure your environment variables are correctly recognized in productio :
1. In your nuxt.config.ts file, utilize the runtimeConfig property to define both public and private environment variables. This configuration ensures that your environment variables are correctly injected during the build process and are available at runtime. https://docs.kinde.com/developer-tools/sdks/backend/nuxt-module
2. Since .env files aren't used in production, you need to set your environment variables using the methods provided by your hosting platform. For Nuxt Hub, this typically involves configuring environment variables through the platform's settings or dashboard. Ensure that all necessary variables are defined to match those expected by your application. https://nuxt.com/docs/guide/directory-structure/env
Additional Considerations:
- Ensure Consistency: Double-check that the environment variable names in your hosting platform match those in your nuxt.config.ts file.
- Testing: After setting the environment variables, redeploy your application and monitor the logs to confirm that the variables are being recognized correctly.
By following these steps, your Nuxt application should correctly access the necessary environment variables in production, resolving the authentication issues you're encountering.
If you continue to face challenges or need further assistance, please don't hesitate to reach out.Okay, I got the solution. Turns out the only think that works for me is using Github Action env on build stage. For anyone that has the same problems
- Check if the env name variables in local, preview, and production is the same
- Check if the value in production within Github Action and Cloudflare matches
- Check if the kinde is integrated and the API from kinde is exposed, you can do this by turn on OpenAPI experimental feature in Nuxt Config nitro: { experimental: { openAPI: true } }. This will make the API routes appeared in Nuxt Hub Dashboard. If the api routes from kinde such as /api/login, /api/register exists, then it is integrated
- Make sure you didnt create any files that has name/route that conflicted with Kinde api route
- Turn on Kinde debug feature on Nuxt Config by using kinde: { debug: true }
- Check if the values in the env propagated to kinde, by doing health check to /api/health
- If the value is not propagated, try to use kind config in Nuxt config, such as kinde: {
authDomain: process.env.NUXT_KINDE_AUTH_DOMAIN,
clientId: process.env.NUXT_KINDE_CLIENT_ID,
clientSecret: process.env.NUXT_KINDE_CLIENT_SECRET,
...
}
- If kinde value doesnt work and it's still not propagated, try to use the Nuxt Config instead
- If it's still doesnt work, try to use Nuxt Config public on public: { ... } instead
- If it's still doesnt work, try to modify the nuxthub.yml workflow, in the build stage (npm run build) add env paramater using Github Actions Secrets and Variables, such as
env:
NUXT_KINDE_CLIENT_ID: ${{ secrets.NUXT_KINDE_CLIENT_ID }}
NUXT_KINDE_CLIENT_SECRET: ${{ secrets.NUXT_KINDE_CLIENT_SECRET }}
NUXT_KINDE_PASSWORD: ${{ secrets.NUXT_KINDE_PASSWORD }}
NUXT_KINDE_AUTH_DOMAIN: ${{ vars.NUXT_KINDE_AUTH_DOMAIN }}
...
- Make sure the callback is using Kinde /api/callback (I have no idea why I cant use my own callback, too many errors, essentially gave up lmao. Probably skill issue)
Hi Nazvix,
Glad to hear you found a solution. Thanks for sharing your approach—using GitHub Actions to set environment variables during the build stage is a great insight.
If you run into any other issues or have further questions, feel free to reach out. We're happy to help