Next-auth集成GitHub登录成功后无法自动跳转至仪表盘求助
登录后无法自动跳转至仪表盘(NextAuth + Middleware)
我已多次查阅官方文档,目前遇到的问题是:用户通过GitHub完成登录后,无法自动跳转至位于/路径的仪表盘页面。我推测问题与重定向逻辑相关,但尚未定位到具体原因。当前项目使用Next-auth的middleware进行授权控制。
问题演示

项目文件夹结构
. ├── assets │ ├── githubicon.svg │ ├── googleicon.svg │ ├── sharethisicon.svg │ └── sharethislogo.svg ├── components │ ├── dashboard.js │ ├── facebookIntergate.js │ ├── form.js │ ├── header.js │ ├── linkedinIntergate.js │ ├── list.js │ ├── loginButtons.js │ ├── model.js │ └── twitterIntergate.js ├── docker-compose.yml ├── Dockerfile ├── error.md ├── Linkedin.md ├── middleware.js ├── next.config.js ├── package.json ├── pages │ ├── api │ │ ├── auth │ │ │ └── [...nextauth].js │ │ ├── demo.js │ │ ├── facebook.js │ │ ├── linkedin.js │ │ ├── rss.js │ │ └── twitter.js │ ├── _app.js │ ├── auth │ │ └── signin.js │ ├── _document.js │ ├── index.js │ └── project │ └── [name].js ├── postcss.config.js ├── prisma │ └── schema.prisma ├── public │ ├── favicon.ico │ └── images │ └── bird.jpg ├── README.md ├── styles │ ├── globals.css │ └── Home.module.css ├── tailwind.config.js ├── utility │ └── prsima.js └── yarn.lock 12 directories, 41 files
Middleware.js代码
export { default } from "next-auth/middleware" export const config = { matcher: ["/","/project/:name*"] }
自定义登录页面(auth/signin.js)代码
// auth/signin.js import { getProviders, signIn} from "next-auth/react" import logo from "../../assets/sharethislogo.svg" import React from 'react' import Image from 'next/image' export default function SignIn({ providers }) { return ( <> <section className="bg-gray-50 dark:bg-gray-900"> <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0"> <Image className="w-8 h-8 mr-2" src={logo} alt="logo" width="210" height="64" /> <div className="max-w-2xl bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md md:max-w-2xl xl:p-0 dark:bg-gray-800 dark:border-gray-700"> <div className="p-6 space-y-4 md:space-y-6 sm:p-8"> <h1 className="text-xl font-bold text-center leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"> Signup and Signin with Social Media + </h1> { Object.values(providers).map((provider) => <button key={provider.name} type="button" onClick={() => signIn(provider.id)} className="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 mr-2 mb-2"> Connect with {provider.name} </button>) } <div className="ml-3 text-sm"> <label htmlFor="terms" className="font-light text-gray-500 dark:text-gray-300">I accept the <a className="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">Terms and Conditions</a></label> </div> </div> </div> </div> </section> </> ) } export async function getServerSideProps(context) { const providers = await getProviders() return { props: { providers }, } }
Next-auth API页面(pages/api/auth/[...nextauth].js)代码
// pages/api/auth/[...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 }) ], pages:{ signIn: '/auth/signin', }, secret: process.env.SECRET, })
内容的提问来源于stack exchange,提问作者officialrajdeepsingh
相关产品推荐
相关产品推荐

