authentication - Nextjs next-auth sessionProvider 不读取 session 属性 Typescript-6ren

authentication - Nextjs next-auth sessionProvider 不读取 session 属性 Typescript

转载作者：行者123 更新时间：2023-12-05 03:18:53

我正在使用带有 Next-auth 的 mantine 模板，我尝试在应用程序中实现 sessionProvider，我得到错误 session 未定义

Error implementing session on session provider

----编辑----错误代码使用sessionProvider上的session

error - pages\_app.tsx (33:38) @ App
error - ReferenceError: session is not defined
    at App (webpack-internal:///./pages/_app.tsx:85:38)
    at renderWithHooks (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14) {
  page: '/protegido'
}
  31 |         <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
  32 |           <NotificationsProvider>
> 33 |             <SessionProvider session={session}>
     |                                      ^
  34 |               <ApolloProvider client={client}>
  35 |                 <Component {...pageProps} />
  36 |               </ApolloProvider>

我像这样将它导入到我的 _app.tsx 中

import { GetServerSidePropsContext } from 'next';
import { useState } from 'react';
import { AppProps } from 'next/app';
import { getCookie, setCookie } from 'cookies-next';
import Head from 'next/head';
import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
import { SessionProvider } from 'next-auth/react';
import { ApolloProvider } from '@apollo/client';
import client from '../apollo-client';

export default function App(props: AppProps & { colorScheme: ColorScheme }) {
  const { Component, pageProps } = props;
  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);

  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(nextColorScheme);
    setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
  };

  return (
    <>
      <Head>
        <title>Family 5 Dashboard</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="shortcut icon" href="/icono.png" />
      </Head>

      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
          <NotificationsProvider>
            <SessionProvider session={session}>
              <ApolloProvider client={client}>
                <Component {...pageProps} />
              </ApolloProvider>
            </SessionProvider>
          </NotificationsProvider>
        </MantineProvider>
      </ColorSchemeProvider>
    </>
  );
}

App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark',
});

如果我使用 pageProps.session 我会得到同样的错误

session provider error

----编辑----错误代码仅在sessionProvider上使用pageProps.session

error - pages\_app.tsx (33:48) @ App
error - TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:85:48)
    at renderWithHooks (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14) {
  page: '/protegido'
}
  31 |         <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
  32 |           <NotificationsProvider>
> 33 |             <SessionProvider session={pageProps.session}>
     |                                                ^
  34 |               <ApolloProvider client={client}>
  35 |                 <Component {...pageProps} />
  36 |               </ApolloProvider>

---现在编辑 [...nextauth] 文件-----

我的/api/auth/[...nextauth].js

import NextAuth from "next-auth"
import { ApolloClient, InMemoryCache } from "@apollo/client";
import CredentialsProvider from "next-auth/providers/credentials";
import { GET_ADMIN_LOGIN } from "../../../components/fam.querys";

export default NextAuth({

    providers: [
        CredentialsProvider({
            session: {
                strategy: 'jwt',
                maxAge: 30 * 24 * 60 * 60, //30 days
                updateAge: 24 * 60 * 60, // 24 hours
            },
            // The name to display on the sign in form (e.g. "Sign in with...")
            name: "Credentials",
            // e.g. domain, username, password, 2FA token, etc.
            credentials: {
                email: { label: "email", type: "email", placeholder: "correo" },
                password: { label: "Password", type: "password", placeholder: 'clave' }
            },
            async authorize(credentials, req) {
                // Add logic here to look up the user from the credentials supplied

                const client = new ApolloClient({
                    uri: "myUri",
                    cache: new InMemoryCache(),
                    headers: {
                        'content-type': 'application/json',
                        'x-hasura-admin-secret': '*******'
                    }
                })

                //buscar en la base de datos si existe el usuario

                /* try {
                    await client.resetStore();
                    const { data } = await client.query({
                        query: GET_ADMIN_LOGIN,
                    });

                    const adminPass = data?.control_admin[0]?.clave
                    const adminId = data?.control_admin[0]?.id
                    const adminCorr = data?.control_admin[0]?.correoadmin
                    const adminName = data?.control_admin[0]?.correoadmin

                    if (credentials.email === adminCorr && credentials.password === adminPass) {
                        return {
                            user: {
                                id: 311,
                                image: adminId,
                                name: adminName,
                                email: adminCorr,
                                tipo: 'admin'
                            },
                        }
                    }
                    return null;
                } catch (error) {
                    console.log(error)
                } */

                if (credentials.email !== 'john@gmail.com' || credentials.password !== '1234') {
                    return null;
                }
                // si todo esta bien
                return { id: '1234', name: 'john', email: 'john@gmail.com', tipo: 'extra' };
            }
        })
    ],

    callbacks: {
        session: async ({ session, token }) => {
            if (session?.user) {
                session.user.id = token.uid;
                session.user.tipo = token.tipo;
            }
            console.log('sesion: ', session)

            return session;
        },
        jwt: async ({ user, token }) => {
            if (user) {
                token.uid = user.id;
                token.tipo = user.tipo;
            }
            console.log('token: ', token)
            console.log('user: ', user)
            return token;
        },
    },
    pages: {
        signIn: '/',
    },
});

按照 Yilmaz 的建议我做了一个 ts 文件这样

import {
  Session
} from 'next-auth';
import {
  JWT
} from 'next-auth/jwt';

declare module 'next-auth' {
  interface Session {
    // what ever properties added, add type here
    expires: string;
    user: {
      email: string;
      id: number;
      name: string;
      tipo: string;
    };
  }
}

然后在 _app 文件上再次尝试

import { GetServerSidePropsContext } from 'next';
import { useState } from 'react';
import { AppProps } from 'next/app';
import { getCookie, setCookie } from 'cookies-next';
import Head from 'next/head';
import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
import { SessionProvider } from 'next-auth/react';
import { ApolloProvider } from '@apollo/client';
import client from '../apollo-client';
import { Session } from 'next-auth';

export default function App(props: AppProps & { colorScheme: ColorScheme }) {
  const { Component, pageProps } = props;
  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);

  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(nextColorScheme);
    setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
  };

  return (
    <>
      <Head>
        <title>Family 5 Dashboard</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="shortcut icon" href="/icono.png" />
      </Head>

      <SessionProvider session={pageProps.session}>
        <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
          <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
            <NotificationsProvider>
              <ApolloProvider client={client}>
                <Component {...pageProps} />
              </ApolloProvider>
            </NotificationsProvider>
          </MantineProvider>
        </ColorSchemeProvider>
      </SessionProvider>
    </>
  );
}

App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark',
});

我仍然得到这个错误

TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:75:36)
    at renderWithHooks (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 853 ms (1092 modules)
error - pages\_app.tsx (31:42) @ App
error - TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:75:36)
    at renderWithHooks (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14) {
  page: '/'
}
  29 |       </Head>
  30 | 
> 31 |       <SessionProvider session={pageProps.session}>
     |                                          ^
  32 |         <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>   
  33 |           <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
  34 |             <NotificationsProvider>

如果我使用 <SessionProvider session={props.session}>

我没有收到任何错误，但不维护 session 或用户对象，如果您重新加载页面或更改选项卡， session 将丢失

在制作 next.d.ts 之后

并使用 <SessionProvider session={pageProps.session}>

出现的错误是:

TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:75:36)
    at renderWithHooks (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-d om-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 961 ms (1041 modules)
error - pages\_app.tsx (31:42) @ App
error - TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:75:36)
    at renderWithHooks (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\alfon\Documents\GitHub\Matrix_Family\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14) {
  page: '/'
}
  29 |       </Head>
  30 | 
> 31 |       <SessionProvider session={pageProps.session}>
     |                                          ^
  32 |         <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>  
  33 |           <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
  34 |             <NotificationsProvider>

最佳答案

在根目录的文件中创建 next-auth.d.ts 并添加:

import { Session } from "next-auth"
import { JWT } from "next-auth/jwt"

declare module "next-auth" {
  interface Session {
    // what ever properties added, add type here
    user: User
  }
}

同样在根目录下，创建 next.d.ts 并添加它。来自文档:

import type { NextComponentType, NextPageContext } from "next"
import type { Session } from "next-auth"
import type { Router } from "next/router"

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>
    router: Router
    __N_SSG?: boolean
    __N_SSP?: boolean
    pageProps: P & {
      /** Initial session passed in from `getServerSideProps` or `getInitialProps` */
      session?: Session
    }
  }
}

这是为此 _app.tsx 设置的正常 ts

 export default function App({ Component, pageProps }: AppProps) {

但是既然你这样定义了你的组件

export default function App(props: AppProps & { colorScheme: ColorScheme }) {

我们必须更改 next.d.ts 中的类型定义:

declare module 'next/app' {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean;
    __N_SSP?: boolean;
    session?: Session;
    pageProps: P ;
  };
}

目前正在处理 typescript 设置。代码中的错误以及破坏代码的方式

const {Component,pageProps}=props

这是错误的。应该是:

 const { Component, session, ...pageProps } = props;

...pageProps 表示传播其余 Prop 。它实际上看起来像这样

 const { Component, session,firstProps,secondProps } = props;

那么您还需要将此session 传递给组件。

   <Component {...pageProps} session={session}/>

关于authentication - Nextjs next-auth sessionProvider 不读取 session 属性 Typescript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73585821/

文章推荐： c# - .NET Core 复制子文件夹以在构建和发布时输出

android - 如何使用 Google Cast SDK 3 添加自定义 SessionProvider
我们最近将 Google Cast SDK 更新到了版本 3。有了这个 SDK，应该可以通过在 OptionsProvider 中实现 getAdditionalSessionProviders()
authentication - Nextjs next-auth sessionProvider 不读取 session 属性 Typescript
我正在使用带有 Next-auth 的 mantine 模板，我尝试在应用程序中实现 sessionProvider，我得到错误 session 未定义 Error implementing sess
asp.net-mvc - SessionProvider 的 Couchbase 存储桶与 Memcached 存储桶
我了解到 Asp.Net 的默认 sessionprovider 对于分布式应用程序来说并不是一个好的做法。所以我决定将asp.net的sessionprovider更改为couchbase。但当我尝
javascript - [下一个授权] : `useSession` must be wrapped in a error on the existing js file
我正在将以下代码添加到我现有的 js 文件中以验证身份验证，我正在尝试遵循下一个身份验证文档，但我收到此错误“[next-auth]: useSession必须包裹在 SessionProvider
php - 传递给 Ratchet\Session\SessionProvider::__construct() 的参数 1 必须实现接口(interface) Ratchet\Http\HttpServerInterface
我正在尝试在 Ratchet 中使用 sessionProvider，以下是我的 shell 脚本: namespace App\Console\Commands; use Ratchet\S

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

authentication - Nextjs next-auth sessionProvider 不读取 session 属性 Typescript