5 replies

Unable to use relative URL with Svelte

Hi! I've been encountering an issue regarding the relative URL. I'm not sure if this is a Sveltekit or Better Auth issue, so I'm sorry if this is the wrong place to seek help regarding it. I believe I may have updated the dependency since it used to work the day before, however the error occurred only after I updated the dependency.

Code:

import { authClient } from "$lib/client";

export const load: LayoutServerLoad = async ({ fetch }) => {
  const { data: session } = await authClient.getSession();

  const { data: hasAdminPerms } = await authClient.admin.hasPermission({
    userId: session?.user.id,
    permission: {
      adminDashboard: ["read"],
    },
  });

  return {
    hasAdminPerms,
  };
};

import { authClient } from "$lib/client";

export const load: LayoutServerLoad = async ({ fetch }) => {
  const { data: session } = await authClient.getSession();

  const { data: hasAdminPerms } = await authClient.admin.hasPermission({
    userId: session?.user.id,
    permission: {
      adminDashboard: ["read"],
    },
  });

  return {
    hasAdminPerms,
  };
};

The fatal error only happens client-side:

authClient.getSession()

authClient.getSession()

. I'm not sure how to proceed. They tend to happen within

+layout.ts

+layout.ts

. Any help would be appreciated!

Error:

Error: Cannot use relative URL (/api/auth/get-session) with global fetch — use `event.fetch` instead: https://svelte.dev/docs/kit/web-standards#fetch-apis

Error: Cannot use relative URL (/api/auth/get-session) with global fetch — use `event.fetch` instead: https://svelte.dev/docs/kit/web-standards#fetch-apis

Solution

Passing a

baseURL

baseURL

into the auth client configuration fixed the issue for me.

import { adminClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/svelte";
import { ac, admin, user } from "$lib/auth/permissions";

export const authClient = createAuthClient({
  // you can pass client configuration here
  baseURL: "http://localhost:5173",
  plugins: [
    adminClient({
      ac,
      roles: {
        admin,
        user,
      },
    }),
  ],
});

import { adminClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/svelte";
import { ac, admin, user } from "$lib/auth/permissions";

export const authClient = createAuthClient({
  // you can pass client configuration here
  baseURL: "http://localhost:5173",
  plugins: [
    adminClient({
      ac,
      roles: {
        admin,
        user,
      },
    }),
  ],
});

Jump to solution

Unable to use relative URL with Svelte

import { authClient } from "$lib/client";

export const load: LayoutServerLoad = async ({ fetch }) => {
  const { data: session } = await authClient.getSession();

  const { data: hasAdminPerms } = await authClient.admin.hasPermission({
    userId: session?.user.id,
    permission: {
      adminDashboard: ["read"],
    },
  });

  return {
    hasAdminPerms,
  };
};

import { authClient } from "$lib/client";

export const load: LayoutServerLoad = async ({ fetch }) => {
  const { data: session } = await authClient.getSession();

  const { data: hasAdminPerms } = await authClient.admin.hasPermission({
    userId: session?.user.id,
    permission: {
      adminDashboard: ["read"],
    },
  });

  return {
    hasAdminPerms,
  };
};

The fatal error only happens client-side:

authClient.getSession()

authClient.getSession()

. I'm not sure how to proceed. They tend to happen within

+layout.ts

+layout.ts

. Any help would be appreciated!

Error:

Error: Cannot use relative URL (/api/auth/get-session) with global fetch — use `event.fetch` instead: https://svelte.dev/docs/kit/web-standards#fetch-apis

Error: Cannot use relative URL (/api/auth/get-session) with global fetch — use `event.fetch` instead: https://svelte.dev/docs/kit/web-standards#fetch-apis

Solution

Passing a

baseURL

baseURL

into the auth client configuration fixed the issue for me.

import { adminClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/svelte";
import { ac, admin, user } from "$lib/auth/permissions";

export const authClient = createAuthClient({
  // you can pass client configuration here
  baseURL: "http://localhost:5173",
  plugins: [
    adminClient({
      ac,
      roles: {
        admin,
        user,
      },
    }),
  ],
});

import { adminClient } from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/svelte";
import { ac, admin, user } from "$lib/auth/permissions";

export const authClient = createAuthClient({
  // you can pass client configuration here
  baseURL: "http://localhost:5173",
  plugins: [
    adminClient({
      ac,
      roles: {
        admin,
        user,
      },
    }),
  ],
});

Jump to solution

Unable to use relative URL with Svelte

Unable to use relative URL with Svelte

Similar Threads

Similar Threads

Similar Threads