Next-auth does not redirect users after successful login with github

[officialrajdeepsingh]

I checked docs serval times. My issue is when users successfully log in with the help of GitHub. User automatic redirect to dashboard my dashboard on the '/' page. but it is not working in next-auth. I think errors are related to redirect. but I can't find that. For Securing pages and API routes, I use middlewares with next-auth.

The folder structure looks like an app.

.
├── 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*"] }

Custom login page design

// 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 page

// 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,
})