reactjs 会话中的下一个身份验证用户对象的值返回空值

y1aodyip  于 2022-12-12  发布在  React
关注(0)|答案(2)|浏览(147)

我正在尝试使用nextjs、next-auth和prisma实现身份验证。我可以成功地登录、注销我的帐户,但对于会话,它不会从index.tsx中的代码返回会话
我正在记录这个文件中的会话对象,它返回了一个未定义的值。

import React from 'react';
import { signIn, signOut, useSession } from 'next-auth/client';

export default function index() {
  const [session, loading] = useSession();

  React.useEffect(() => {
    console.log(session); // This returns an undefined value
  }, []);

  ...

}

[... nextauth].ts -检查用户是否存在于数据库中,并在authorize函数中使用prisma返回用户值。

export default NextAuth({
  providers: [
    providers.Credentials({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        var user = null;
        await prisma.user
          .findMany({
            where: {
              email: credentials.email,
              password: credentials.password,
            },
          })
          .then((res) => {
            if (res) {
              user = res;
            }
          })
          .catch((err) => {
            throw err;
          });

        console.log(user);
        return user;
      },
    }),
  ],
  pages: {
    signIn: '/login',
  },
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60,
  },
  secret: process.env.JWT_SECRET,
});

App.tsx

import { Provider } from 'next-auth/client';
import { AppProps } from 'next/app';

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps}></Component>
    </Provider>
  );
};

export default App;

package.json -我的环境中的依赖关系信息。

{
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
      },
      "dependencies": {
        "@prisma/client": "^2.30.3",
        "@tailwindcss/forms": "^0.3.3",
        "apollo-server-micro": "^3.3.0",
        "axios": "^0.21.3",
        "cookie": "^0.4.1",
        "graphql": "^15.5.2",
        "jsonwebtoken": "^8.5.1",
        "next": "11.1.2",
        "next-auth": "^3.29.0",
        "query-string": "^7.0.1",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-hook-form": "^7.15.0"
      },
      "devDependencies": {
        "@types/cookie": "^0.4.1",
        "@types/jsonwebtoken": "^8.5.5",
        "@types/node": "^16.7.10",
        "@types/react": "17.0.19",
        "autoprefixer": "^10.3.4",
        "eslint": "7.32.0",
        "eslint-config-next": "11.1.2",
        "postcss": "^8.3.6",
        "prisma": "^2.30.3",
        "tailwindcss": "^2.2.9",
        "ts-node": "^10.2.1",
        "typescript": "^4.4.2"
      }
    }
6yjfywim

6yjfywim1#

会话未完全加载时控制台日志正在运行。请将会话状态添加到useffect,以便在会话状态更改时运行

React.useEffect(() => {
        console.log(session);
       
  }, [session]); //Add session state to the useEffect
zlhcx6iw

zlhcx6iw2#

它会是

const {data: session, status} = useSession()

相关问题