Error when implementing nuxtauth: [Vue Router warn]:No match found for location with path "/session"
Hi everyone, I've been trying to use nuxtauth sidebase but as soon as I create the [...].ts file in server/api/[...].ts (the actual code inside this file and nuxt config below" . I got the error "WARN [Vue Router warn]: No match found for location with path "/session"". And I can't view the side on the front end.
this is [...].ts
import { NuxtAuthHandler } from "#auth";
import CredentialsProvider from "next-auth/providers/credentials";
export default NuxtAuthHandler({
secret: "quyetsecret",
providers: [
//@ts-expect-error
CredentialsProvider.default({
name: "credentials",
credentials: {},
async authorize(credentials: { email: string; password: string }) {
// fetch user form data base
return {};
},
}),
],
session: {
strategy: "jwt",
},
callbacks: {
async jwt({ token, user, account }) {
if (user) {
token = {
...token,
...user,
};
}
return token;
},
async session({ session, token }) {
session.user = {
...token,
...session.user,
};
return session;
},
},
});
this is nuxtconfig: // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
modules: ["@nuxtjs/tailwindcss", "@sidebase/nuxt-auth", "nuxt-server-utils"],
auth: {
baseURL: process.env.AUTH_ORIGIN || "http://localhost:3000/",
provider: {
type: "authjs",
},
},
});
Thank you!
4 Replies
Hi @Philip Tran. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I just want a simple auth system to fucus on the actual freature of the app(I'm new and still learnning) . I tried Clerk, Kinde, they work on the front end but in the api route of nuxt, I have problem with them all, It's so hard just to get the id from the current user, at least for me at this point, then I tried nuxt auth and I got problem again. if I can't work with this, I'll problably make a express server for auth
Thank you for your help
----------------------
Based on the information provided in your question and the knowledge sources available, I can offer some insights about your Nuxt authentication implementation issue.
The error you're encountering, "No match found for location with path "/session"", suggests that there might be a mismatch between the expected routes for authentication and the actual routes defined in your Nuxt application.
Here are a few points to consider:
1. The file location you mentioned (
server/api/**...].ts) is correct according to the [Nuxt documentation on API routes** (https://nitro.unjs.io/deploy/providers/vercel#api-routes). This file should handle your authentication requests.
2. Your nuxt.config.ts file seems to be correctly set up with the necessary modules and auth configuration. However, make sure that the AUTH_ORIGIN environment variable is correctly set if you're not using the default <http://localhost:3000/.>
3. The error message suggests that the application is trying to access a "/session" route, which isn't explicitly defined in the code you provided. This could be an internal route used by the auth module.
4. Your [...].ts file is using NuxtAuthHandler from a path that looks like a placeholder ("#auth"). Make sure you're importing from the correct package, which should be @sidebase/nuxt-auth.
5. The CredentialsProvider import and usage looks unusual. Typically, you would import it directly from @auth/core/providers/credentials when using @sidebase/nuxt-auth.
To troubleshoot this issue, you could try the following:
1. Double-check that all your dependencies are up to date, especially @sidebase/nuxt-auth.
2. Ensure that your auth configuration in nuxt.config.ts matches the latest documentation for @sidebase/nuxt-auth.
3. Review your authentication flow to make sure you're not accidentally redirecting to a non-existent "/session" route.
4. Check your browser console and server logs for any additional error messages that might provide more context.
If the issue persists after trying these steps, you might want to create a minimal reproduction of the problem and seek help from the @sidebase/nuxt-auth community or open an issue on their GitHub repository.
Remember, when implementing authentication, it's crucial to follow the exact setup instructions provided by the auth module you're using, as authentication flows can be sensitive to small configuration differences.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1250268373112193079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.