NextJS 和 NextAuth 会话用户对象由于 [...nextauth.ts] 被触发重新编译而丢失

Posted 2023-03-30

【中文标题】NextJS 和 NextAuth 会话用户对象由于 [...nextauth.ts] 被触发重新编译而丢失

【英文标题】：NextJS and NextAuth session user object getting lost due to [...nextauth.ts] getting triggered to be recompiled

【发布时间】：2021-07-17 22:44:17

【问题描述】：

我正在学习 NextJS 和 NextAuth，并使用我自己的登录页面实现了凭据登录，它在会话对象包含我的用户模型的地方工作（目前包含包括密码在内的所有内容，但显然它不会像现在这样那个）。

我可以刷新页面并保持会话，但是如果我离开一两分钟然后刷新会话中的用户对象将成为默认设置，即使我的会话应该直到下个月才到期。

下面是我的 [...nextauth.tsx] 文件

import NextAuth, NextAuthOptions from 'next-auth'
import Providers from 'next-auth/providers'
import  PrismaClient  from '@prisma/client'
import session from "next-auth/client";

let userAccount = null;

const prisma = new PrismaClient();

const providers : NextAuthOptions = 
    site: process.env.NEXTAUTH_URL,
    cookie: 
        secure: process.env.NODE_ENV && process.env.NODE_ENV === 'production',
    ,
    redirect: false,
    providers: [
        Providers.Credentials(
            id: 'credentials',
            name: "Login",
            async authorize(credentials : any) 
                const user = await prisma.users.findFirst(
                    where: 
                        email: credentials.email,
                        password: credentials.password
                    
                );

                if (user !== null)
                
                    userAccount = user;
                    return user;
                
                else 
                    return null;
                
            
        )
    ],
    callbacks: 
        async signIn(user, account, profile) 
            console.log("Sign in call back");
            console.log("User Is");
            console.log(user);
            if (typeof user.userId !== typeof undefined)
            
                if (user.isActive === '1')
                
                    console.log("User credentials accepted")
                    return user;
                
                else
                
                    return false;
                
            
            else
            
                console.log("User id was not found so rejecting signin")
                return false;
            
        ,
        async session(session, token) 
            //session.accessToken = token.accessToken;
            if (userAccount !== null)
            
                session.user = userAccount;
            
            console.log("session callback returning");
            console.log(session);
            return session;
        ,
        /*async jwt(token, user, account, profile, isNewUser) 
            console.log("JWT User");
            console.log(user);
            if (user) 
                token.accessToken = user.token;
            
            return token;
        */
    


const lookupUserInDb = async (email, password) => 
    const prisma = new PrismaClient()
    console.log("Email: " + email + " Password: " + password)
    const user = await prisma.users.findFirst(
        where: 
            email: email,
            password: password
        
    );
    console.log("Got user");
    console.log(user);
    return user;


export default (req, res) => NextAuth(req, res, providers).

我从下面的自定义表单触发登录

signIn("credentials", 
            email, password, callbackUrl: `$window.location.origin/admin/dashboard`, redirect: false 
        ).then(function(result)
            if (result.error !== null)
            
                if (result.status === 401)
                
                    setLoginError("Your username/password combination was incorrect. Please try again");
                
                else
                
                    setLoginError(result.error);
                
            
            else
            
                router.push(result.url);
            
            console.log("Sign in response");
            console.log(result);
        );

登录是从 next-auth/client 导入的

我的 _app.js 如下：

export default function Blog(Component, pageProps) 
    return (
        <Provider session=pageProps.session>
            <Component className='w-full h-full' ...pageProps />
        </Provider>
    )

然后它在登录后重定向到的页面具有以下内容：（不确定这是否真的做除了获取活动会话之外的任何其他操作，以便我可以从前端引用它）

const [session, loading] = useSession()

当我登录时，[...nextauth.tsx] 中的会话回调返回以下内容：

session callback returning

  user: 
    userId: 1,
    registeredAt: 2021-04-21T20:25:32.478Z,
    firstName: 'Some',
    lastName: 'User',
    email: 'someone@example',
    password: 'password',
    isActive: '1'
  ,
  expires: '2021-05-23T17:49:22.575Z'

然后由于某种原因，从 phpStorm 内部运行 npm run dev 的终端然后输出

event - build page: /api/auth/[...nextauth]
wait  - compiling...
event - compiled successfully

但是我没有改变任何东西，即使我改变了，当然我对应用程序进行了更改，不应该触发会话被删除，但在此之后，会话回调然后返回以下内容：

session callback returning

  user:  name: null, email: '[e-mail]', image: null ,
  expires: '2021-05-23T17:49:24.840Z'

所以我有点困惑，似乎我的代码正在运行，但也许 PhpStorm 正在触发重新编译，然后会话被清除，但正如我上面所说，肯定会做出改变，重新编译的版本应该' t 触发要修改的会话。

**更新**

我已经完成了一个测试，其中我进行了构建并启动了一个生产版本，我可以根据需要刷新页面并维护会话，因此我证明我的代码可以正常工作。因此，看起来它与 PhpStorm 确定某些内容已更改并进行重新编译有关，即使没有任何更改。

【问题讨论】：

不是 IDE 正在重建应用程序，您以 npm run dev 开始的构建过程正在监视您的文件以进行更改，但由于某种原因而被触发。 IDE 可以影响这一点的唯一方法是保存文件，但是，根据您的说法，您不会更改任何内容。请注意，IDE 通常会在失去焦点时自动保存文件，但不会保存未更改的文件。

嗨@lena，我不久前才发现自己，我没有更改任何文件，我的浏览器始终保持焦点，并且没有任何文件在其他任何地方打开（我在 Windows 和 MacOS 上都有这个，所以它不是操作系统问题）

那时它几乎不可能是IDE。在任何情况下，它都不会重新保存未更改的文件（即使您显式调用 Save All），它本身也不会更改它们

我现在知道它不是 IDE，这只是一个猜测，直到我弄清楚下一个 dev 命令是如何工作的。就像测试一样，我从 IDE 外部的终端运行 npm run dev 并且 IDE 关闭了，我仍然遇到问题。所以我对下一个 dev 命令有问题，它不应该编译，即使它编译了，重新编译肯定不应该触发会话清除，因为这将使 dev 实际上不可能。

【参考方案1】：

我终于找到了解决办法。

在提供者选项中，我添加了以下内容：

session: 
        jwt: true,
        maxAge: 30 * 24 * 60 * 60

    

会话回调我改成如下：

async session(session, token) 
    //session.accessToken = token.accessToken;
    console.log("Session token");
    console.log(token);
    if (userAccount !== null)
    
        session.user = userAccount;
    
    else if (typeof token !== typeof undefined)
    
        session.token = token;
    
    console.log("session callback returning");
    console.log(session);
    return session;

jwt 回调如下：

async jwt(token, user, account, profile, isNewUser) 
    console.log("JWT Token User");
    console.log(token.user);
    if (typeof user !== typeof undefined)
    
         token.user = user;
    
    return token;

基本上我误解了我需要使用 jwt 回调，并且在第一次调用此回调时，使用了从 signIn 回调设置的用户模型，因此我可以将其添加到令牌中，然后可以添加到会话回调中的会话。

随后对 jwt 的请求中的问题是，未设置用户参数，因此我将令牌用户对象设置为未定义，这就是我的会话被空白的原因。

我不明白为什么在将它作为生产版本运行时我似乎没有得到这种行为。