<p>這是我的「/app/api/auth/[...nextauth]/route.js」</p>
從「next-auth/next」匯入 NextAuth;
從「next-auth/providers/google」匯入 GoogleProvider;
導出常數 authOptions = {
提供者:[
谷歌提供者({
clientId:process.env.GOOGLE_CLIENT_ID,
clientSecret:process.env.GOOGLE_CLIENT_SECRET,
}),
],
};
const 處理程序 = NextAuth(authOptions);
匯出 { 處理程序為 GET,處理程序為 POST };
;
<p>和sessionProvider.js</p>
「使用客戶端」;
從“反應”導入反應;
從“next-auth/react”導入{SessionProvider};
const Sessionprovider = ({ 孩子 }) => {
返回 {children};
};
導出預設Sessionprovider;</pre>
<p>我在 Layout.js 中使用這個將子元素包裝</p>
<body className={inter.className}>
{子層級}
</正文>
</html></pre>
<p>這是我的 page.js</p>
「使用客戶端」;
從“next-auth”導入{ getServerSession };
從「next-auth/react」匯入{signIn、signOut、useSession};
從“./api/auth/[...nextauth]/route”導入{ authOptions };
導出預設非同步函數 Home() {
const { 資料:會話,狀態 } = useSession();
控制台.log(會話);
const _signInWithGoogle = async () =>; {
等待登入(“Google”);
};
返回 (
首頁
{會議 ? (
<按鈕
onClick={() =>;登出()}
className =“p-1 bg-blue-400 文字-白色字體-半粗體圓形-md懸停:bg-blue-500”
>
登出
</按鈕>
) : (
<按鈕
onClick={_signInWithGoogle}
className =“p-1 bg-blue-400 文字-白色字體-半粗體圓形-md懸停:bg-blue-500”
>
登入
</按鈕>
)}
);
}</pre>
<p>當我運行應用程式時,它會不斷地重新渲染。對此的任何幫助都不會勝感激。由於控制台顯示用戶對象,它仍然保留在登入元件中。</p>
您需要從客戶端元件中刪除
async
。https://github.com/vercel/next.js/issues/48822