Nextjs next-auth sessionProvider 未读取 session 属性 Typescript

Question

I am using the mantine template with Next-auth and I try to implement the sessionProvider in the application, I get the error session is not defined我正在使用带有 Next-auth 的 mantine 模板，并尝试在应用程序中实现 sessionProvider，我收到错误 session is not defined

Error implementing session on session provider在 session 提供程序上实现 session 时出错

----Edit---- code of the error using just session on sessionProvider ----编辑---- 在 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>

I'm importing it in my _app.tsx like so我像这样在我的 _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', });

I get the same error if I use pageProps.session如果我使用 pageProps.session，我会得到同样的错误

session provider error session 提供程序错误

----Edit---- code of the error using just pageProps.session on sessionProvider ----编辑---- 仅在 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>

---edit now with [...nextauth] file----- ---现在用 [...nextauth] 文件编辑-----

my /api/auth/[...nextauth].js我的 /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 (eg "Sign in with...") name: "Credentials", // eg 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, '/'; }, });

Answer 1

The easiest way (and wrong) to fix this error is add any type on line 33:修复此错误的最简单方法（也是错误的）是在第 33 行添加任何类型：

<SessionProvider session={(pageProps as any).session}>

Answer 2

create next-auth.d.ts in file at the root directory and add this:在根目录的文件中创建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
  }
}

then in _app然后在 _app

       <SessionProvider session={pageProps.session}>
          <ApolloProvider client={client}>
            <Component {...pageProps} />
          </ApolloProvider>
        </SessionProvider>

Nextjs next-auth sessionProvider 未读取 session 属性 Typescript

问题描述

2 个解决方案

解决方案1
0 2022-09-09 19:04:31

解决方案2
0 2022-09-10 03:03:33

Nextjs next-auth sessionProvider 未读取 session 属性 Typescript

问题描述

2 个解决方案

解决方案1 0 2022-09-09 19:04:31

解决方案2 0 2022-09-10 03:03:33

解决方案1
0 2022-09-09 19:04:31

解决方案2
0 2022-09-10 03:03:33