orb*_*xus 5 javascript reactjs next.js next-auth
我将以下代码添加到现有的 js 文件中以验证身份验证，并且尝试遵循 next-auth 文档，但收到此错误“[next-auth]：useSession必须包装在 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必须包装在 SessionProvider 中”
本地主机: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>
</>
);
};
Luc*_*ini 14
SessionProvider确保使用文件中的组件包装您的应用程序_app.js：
import { SessionProvider } from 'next-auth/react';
function MyApp({ Component, pageProps }) {
return (
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
);
}
export default MyApp;
小智 7
我在更新到 Next.js 13 时遇到了类似的问题，我找到了解决方案：
在主layout.tsx中，我使用Redux和NextAuth提供程序：
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<NextAuthProvider>
<ReduxProviders>
{children}
</ReduxProviders>
</NextAuthProvider>
</body>
</html>
);
}下一个身份验证提供商：
"use client";
import { SessionProvider } from "next-auth/react";
type Props = {
children?: React.ReactNode;
};
export const NextAuthProvider = ({ children }: Props) => {
return <SessionProvider>{children}</SessionProvider>;
};Redux 提供者：
"use client";
import store from "./store";
import { Provider } from "react-redux";
export function ReduxProviders({ children }: { children: React.ReactNode }) {
return <Provider store={store}>{children}</Provider>;
}| 归档时间： |
|
| 查看次数： |
30139 次 |
| 最近记录： |