SvelteKit Dev Server + Auth.js - 登录时禁止跨站点 POST 表单提交

Question

我在 SvelteKit 中使用 Auth.js 进行身份验证。我按照文档here给出的说明进行操作，但是当我尝试单击登录按钮时没有任何反应，并且在控制台中我收到来自

/auth/signin/google? 

和

Uncaught (in promise) SyntaxError: Unexpected token 'C', "Cross-site"... is not valid JSON

的 403 错误，这意味着 POST 请求返回“禁止跨站点 POST 表单提交”错误。我按照文档中的确切说明进行操作，但使用了 google 提供商。

// /src/hooks.server.ts
import { SvelteKitAuth } from "@auth/sveltekit"
import Google from "@auth/core/providers/google"
import { GOOGLE_ID, GOOGLE_SECRET } from "$env/static/private"

export const handle = SvelteKitAuth({
    //@ts-expect-error issue https://github.com/nextauthjs/next-auth/issues/6174
    providers: [Google({
        clientId: GOOGLE_ID,
        clientSecret: GOOGLE_SECRET,
    })]
});

// /src/routes/+layout.server.ts
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async (event) => {
  return {
    session: await event.locals.getSession()
  };
}; 

<!-- /src/routes/+layout.svelte -->
<script>
    import '../app.postcss';
    
  import { DarkMode } from 'flowbite-svelte';
    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input, P } from 'flowbite-svelte';
    import { page } from "$app/stores";
    import { signIn, signOut } from "@auth/sveltekit/client"
</script>

<div>
    <Navbar let:hidden let:toggle>
  <NavBrand href="/">
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      class="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      AMC Trainer
    </span>
  </NavBrand>
  <div class="flex md:order-2">
        <DarkMode class="mr-3" />
        {#if $page.data.session}
            <P>Signed in as {$page.data.session.user?.name}</P>
        {:else}
<!--            <Button size="sm" href="/auth/signin" data-sveltekit-preload-data="off">Sign in</Button>     -->
            <Button size="sm" on:click={() => {signIn("google", {callbackUrl: "https://amc.grapecoder.repl.co/"})}}>Sign in</Button>
        {/if}
    <NavHamburger on:click={toggle} />
  </div>
  <NavUl {hidden} class="order-1">
    <NavLi href="/" active={$page.url.pathname == "/"}>Home</NavLi>
    <NavLi href="/about">About</NavLi>
    <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavUl>
</Navbar>
<!--text-slate-900 dark:text-slate-100  -->
<div class="my-5 lg:mx-40 md:mx-20 mx-10 ">
    <slot />
</div>

</div>

这是我的 GitHub 存储库。

我尝试将“callbackUrl”属性添加到登录按钮。但我不确定我的代码出了什么问题。我还检查了提供程序的类型定义，看看是否可以添加任何内容作为解决此问题的选项。预期的行为是我被发送到 Google 帐户登录页面并能够正常登录。

Answer 1

你是否设法让这个工作正常工作，我在开发中构建应用程序后才收到错误，一切正常，但我无法让它工作，反馈将不胜感激。谢谢你