CODEWITHSUNDEEP
oauth-2.0oauthsveltekit
Nico
Nico

Reputation: 21

TypeError: basePath?.replace is not a function in SvelteKit with Auth.js during preview (works in dev mode)

Issue Summary:

While developing my SvelteKit application, I wasn't aware that @auth/sveltekit is currently in an experimental phase. I'm encountering an issue when running npm run preview for my application. The app works perfectly in development mode (npm run dev), but when I try to preview it with npm run preview, I get the following error:

TypeError: basePath?.replace is not a function
    at createActionURL (file:///path/to/project/node_modules/@auth/core/lib/utils/env.js:71:45)
    at auth (file:///path/to/project/.svelte-kit/output/server/chunks/hooks.server.js:83:22)
    at event.locals.auth (file:///path/to/project/.svelte-kit/output/server/chunks/hooks.server.js:140:35)
    at load (file:///path/to/project/.svelte-kit/output/server/entries/pages/_layout.server.js:4:33)
    at load_server_data (file:///path/to/project/.svelte-kit/output/server/index.js:519:42)
    at file:///path/to/project/.svelte-kit/output/server/index.js:1997:24

code:

// @ts-nocheck
import { SvelteKitAuth } from "@auth/sveltekit";
import Google from "@auth/core/providers/google";
import { AUTH_SECRET, GOOGLE_ID, GOOGLE_SECRET } from "$env/static/private";
import pool from "$lib/db";

export const {handle} = SvelteKitAuth({
    providers: [
        Google({
            clientId: GOOGLE_ID,
            clientSecret: GOOGLE_SECRET
        })
    ],
    callbacks: {
        async signIn({profile}) {
            const emailDomain = profile?.email?.split('@')[1];
            if(emailDomain !== "customDomain") {
                console.log('Unauthorised Domain', profile?.email)
                throw new AccessDenied('Unauthorised_Domain')
            }

            const [rows] = await pool.query('SELECT * FROM users WHERE email = ?', [profile?.email])

       
            if(rows.length === 0){
                await pool.query('INSERT INTO users (name, email, picture) VALUES (?, ?, ?)', [
                    profile?.name,
                    profile?.email,
                    profile?.picture
                ]);
            }
            return true;
        },
        async redirect({baseUrl }) {
            return baseUrl;  // Redirect to the home page after sign-in
        },
    secret: AUTH_SECRET
}})

Problem Details:

My Configuration:

Question:

How can I resolve the basePath?.replace is not a function error in preview mode? What is causing basePath to be undefined or incorrectly passed in the preview environment?

What I've Tried:

Upvotes: 2

Views: 39

Answers (1)

A. Rabus
A. Rabus

Reputation: 519

I had an have this problem:

I had this problem when i did pass an array of array in "providers". so nested an predefined array in an array like "provides: [ list ]", and looked at the code which accepts a function or object which looks like an provider (e.g. having some specific function and props) or an list thereof.

But here it's an Array of a single Provider conf, so looks good.

The "If" here is, and that's my hunch here, if the provider conf is wrong an returns an Error and not what auth js expect (an provider) it could behave like that too...

Haven't figured out whats wrong either. Perhaps a version conflict between auth js, svelte and other lib.

More Info: The error comes from a method createActionPath that is called with a parameter basePath, but the caller is a function `auth? that passes one of its parameter 'config' through. The auth call is from somewhere else but the stack trace and build code is something obvious unrelated...

Possible solution: Version conflict between "@auth/core" and "@auth/sveltekit":

Older version that seem work (for me): "@auth/core": "^0.34.2" and "@auth/sveltekit": "^1.4.2",

Upvotes: 0

Related Questions