如何修复使用Next-Auth进行身份验证时的内部服务器错误?

gfttwv5a  于 2023-11-18  发布在  其他
关注(0)|答案(4)|浏览(229)

我尝试使用Next-Auth将身份验证添加到我的Next.js项目。但是,在提交凭据(http://localhost:3000/api/auth/error?error=Configuration)后,我被卡在500 internal server error上。
我想这可能与运行在 http://localhost:3000 上有关,但我不确定。我做错了什么?

pages/API/auth/[...nextauth].js

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

const options = {
  site: 'http://localhost:3000',

  providers: [
    Providers.Credentials({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      authorize: async (credentials) => {
        consol.log('credentials', credentials);
        const user = { id: 1, name: 'J Smith', email: '[email protected]' };
        if (user) {
          return Promise.resolve(user);
        } else {
          return Promise.resolve(null);
        }
      },
    }),
  ],
  database: process.env.MONGO_URI,
};

export default (req, res) => NextAuth(req, res, options);

字符串

pages/index.js

import { useSession } from 'next-auth/client';

export default function Home() {
  const [session, loading] = useSession();
  console.log('session', session);

  return (
    <div className="container">
      <main>
          {session && <p>Signed in as {session.user.email}</p>}
          {!session && (
            <p>
              <a href="/api/auth/signin">Sign in</a>
            </p>
          )}
      </main>
    </div>
  );
}

pages/_app.js

import { Provider } from 'next-auth/client';
import '../styles.css';

export default ({ Component, pageProps }) => {
  const { session } = pageProps;
  return (
    <Provider options={{ site: process.env.SITE }} session={session}>
      <Component {...pageProps} />
    </Provider>
  );
};

next.config.js

module.exports = {
  env: {
    MONGO_URI: '...',
    SITE: 'http://localhost:3000',
  },
};

9avjhtql

9avjhtql1#

pages/api/auth/[...nextauth].js文件中,添加:

secret:process.env.SECRET

字符串
SECRET必须是这样的任何字符串值:

SECRET:LlKq6ZtYbr+hTC073mAmAh9/h2HwMfsFo4hrfCx6gts=


另外,把它添加到你的Vercel环境中,就这样,你的问题就解决了。

iugsix8n

iugsix8n2#

正如Dinesh所提到的,我的问题通过向Vercel环境变量和[...nextauth].ts添加NEXTAUTH_SECRET来解决。
本地部署不需要这个变量,但是Vercel部署需要这个秘密。除了添加Vercel环境变量,我的工作[...nextauth].ts看起来像:

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async jwt({ token }) {
      token.userRole = "user"
      return token
    },
  },
})

字符串

yqyhoc1h

yqyhoc1h3#

请记住NEXTAUTH_URL要设置为yourwebsite.com
process.env.NEXTAUTH_URL=https:yourwebsite.com

zpjtge22

zpjtge224#

你在asyc函数consol.log('credentials', credentials);下有一个错字
修复console.log('credentials', credentials);,应该可以解决问题。
我也遇到了类似的问题,因为我没有添加任何providers数组。
以后,请修复[...nextauth].js中的任何拼写错误或错误,以修复500 error

相关问题