[next-auth]：`useSession`必须 Package 在< SessionProvider />现有js文件的错误中

1u4esq0p 于 2023-05-12 发布在其他

关注(0)|答案(2)|浏览(141)

我正在将以下代码添加到现有的js文件中以验证身份验证，并且我试图遵循next-auth文档，但我收到此错误“[next-auth]：useSession必须 Package 在SessionProvider中”
我正在使用github凭据进行验证

**我的代码：**浏览到localhost时工作：3000/auth/API/signin

[...nextauth.js]

import NextAuth from 'next-auth'
import GitHubProvider from 'next-auth/providers/github'
export default NextAuth({
    providers:[
        GitHubProvider({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET,
        }),
    ],
})

我想把身份验证放到我在abc/index.js中编写的代码中

这是我的代码，带有next-auth，并抛出此错误“[next-auth]：useSession必须 Package 在SessionProvider中”

localhost：3000/abc/index.js

import React, { Component, useMemo, useState, useEffect } from 'react';
import { useSession, SessionProvider } from 'next-auth/react';
function MyApp({ Component, pageProps }) { // i have added it here since I am not using _app.js file
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}
const abc = ({ json }) => {
  const { data: session } = useSession();
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
};

next.js

来源：https://stackoverflow.com/questions/72357417/next-auth-usesession-must-be-wrapped-in-a-sessionprovider-error-on-the

2条答案

按热度按时间

35g0bw711#

确保在_app.js文件中使用SessionProvider组件 Package 您的应用：

import { SessionProvider } from 'next-auth/react';

function MyApp({ Component, pageProps }) {
    return (
      <SessionProvider session={pageProps.session}>
        <Component {...pageProps} />
      </SessionProvider>
    );
  }

export default MyApp;

赞(0）回复(0）举报 2023-05-12

62o28rlo2#

解决方案！

在next.js v13中，我使用了{ SessionProvider }结构，将其 Package 在主布局结构中。

layout.tsx：

'use client'
import '@/styles/global.css'
import 'react-toastify/dist/ReactToastify.css';
import { SessionProvider } from 'next-auth/react';
import { Session } from 'next-auth'

interface Props {
  session: Session | null
  children: React.ReactNode
}

 const RootLayout: React.FC <Props> = ({ children, session } ) => {
  return (
    <html lang="tr">

      <head />
      <body>
        {/* SessionProvider ile sarmallarız ki tüm route lara erişebilelim diye / yukarıda "use client" tanımlamayı unutma! */}
        <SessionProvider session={session}>
          {children}
        </SessionProvider>        
      </body>
    </html>
  )
}

export default RootLayout

我得到的错误：

error node_modules\next-auth\react\index.js (119:0) @ useSession
- error Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider/>

**解决方法：**然后我决定将“SessionProvider”结构移到app文件夹的main page.tsx中。
page.tsx：

'use client'
import HomeContainer from "@/containers/home/index";
import { SessionProvider } from 'next-auth/react';
import { Session } from 'next-auth'

interface Props {
  session: Session | null
}

const Home: React.FC<Props> = ({ session } ) => {
  return (
    <>
    {/* SessionProvider ile sarmallarız ki tüm route lara erişebilelim diye / yukarıda "use client" tanımlamayı unutma! */}
    <SessionProvider session={session}>
      <HomeContainer />
    </SessionProvider>
    </>
  );
};

export default Home;

所以我解决了这个错误
布局页面最终版本如下：

import '@/styles/global.css'
import 'react-toastify/dist/ReactToastify.css';

interface Props {
  children: React.ReactNode
}

 const RootLayout: React.FC <Props> = ({ children } ) => {
  return (
    
    <html lang="tr">

      <head />
      <body>
          {children}
      </body>
    </html>
  )
}

export default RootLayout

赞(0）回复(0）举报 2023-05-12

我来回答

[next-auth]：`useSession`必须 Package 在< SessionProvider />现有js文件的错误中

2条答案

相关问题

热门标签

最新问答