You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.23 13:10:29