Redirect loop when using router.push() to trigger custom signin page #2223
-
Question 💬In my top-level Unfortunately, the redirect is getting stuck in a loop: This used to work perfectly, but I haven't worked on this project in a while, so I'm wondering if a newer version of node/react/next/next-auth has made my solution moot. Any advice would be greatly appreciated!
import React from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useSession } from 'next-auth/client'
const Layout = ({ children, home }) => {
const [ session, loading ] = useSession()
const router = useRouter()
if (!loading && !session){ //if no session is detected...
router.push("/api/auth/signin") //redirect to the /api/auth/signin endpoint
}
else{
return <>
{session && <>
{/* markup returned if session exists */}
</>}
</>
}
}
export default Layout;
import React from 'react'
import Head from 'next/head'
import { getCsrfToken } from 'next-auth/client'
import Layout, { siteTitle } from '../../components/layout'
export async function getServerSideProps(context) {
return {
props: {
csrfToken: await getCsrfToken(context)
}
}
}
export default function SignIn({ csrfToken }) {
return(
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<form action='/api/auth/callback/credentials' method="post">
<input type="hidden" name='csrfToken' defaultValue={csrfToken} />
<label htmlFor="password">Password</label>
<input id="password" name="password" type="password" autoComplete="current-password" required />
<button type="submit">Enter Site</button>
</form>
</Layout>
)
}
import NextAuth from "next-auth"
import Providers from "next-auth/providers"
const isCorrectCredentials = credentials =>
credentials.password === process.env.NEXTAUTH_PASSWORD
const options = {
providers: [
Providers.Credentials({
name: "password",
credentials: {
password: { label: "Password", type: "password" },
},
authorize: async credentials => {
if (isCorrectCredentials(credentials)) {
const user = { id: 1, name: "Admin" }
return Promise.resolve(user)
} else {
return Promise.resolve(null)
}
},
}),
],
pages: {
signIn: '/auth/signin' //location of my custom signin page
}
}
export default (req, res) => NextAuth(req, res, options)Lastly, import type { AppProps } from 'next/app'
import '../styles/global.css'
import { Provider } from 'next-auth/client'
import { ThemeProvider } from "next-themes"
export default function App({ Component, pageProps }: AppProps) {
return(
<Provider session={pageProps.session}>
<ThemeProvider defaultTheme="system" attribute="class">
<Component {...pageProps} />
</ThemeProvider>
</Provider>
);
}How to reproduce ☕️Simply hitting |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
The code you provided is prone to errors. Try wrapping your if statement in the Layout component in useEffect. By a quick Google search, I found this nice thread with an explanation |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the reply! I combined your answer with this article that lays out a global session check + redirect: |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, the blog post you link to is extremely similar to my suggestion here #1210 (comment) from back in February... 😅 If the writer did find my solution neat, a mention would have been nice. 🙄 We even made this part of the official docs: https://next-auth.js.org/getting-started/client#custom-client-session-handling |
Beta Was this translation helpful? Give feedback.
The code you provided is prone to errors. Try wrapping your if statement in the Layout component in useEffect.
By a quick Google search, I found this nice thread with an explanation
vercel/next.js#15586