I'm currently working on the user authentication section of a nextjs app. The majority of it is done, except for the protected routes. I'm trying to manage the authentication aspect in _app.js. Below is the code snippet:
import App from 'next/app'
import '../styles/globals.css'
import { parseCookies } from 'nookies'
import { redirectUser } from '../utils/auth'
import jwt from 'jsonwebtoken'
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
const { token } = parseCookies(ctx)
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
if (!token) {
const isProtectedRoute = ctx.pathname === '/account'
if (isProtectedRoute) {
redirectUser(ctx, '/login')
}
} else {
try {
const verified = jwt.verify(token, process.env.JWT_SECRET)
} catch(err) {
console.error(err)
redirectUser(ctx, '/login')
}
}
return { pageProps }
}
render() {
const { Component, pageProps } = this.props;
return (
<Component {...pageProps} />
)
}
}
export default MyApp
Here is my redirectUser file:
import cookie from 'js-cookie';
import Router from 'next/router';
export function handleLogin(token) {
cookie.set('token', token)
Router.push('/account');
}
export function redirectUser(ctx, location) {
if (ctx.req) {
ctx.res.writeHead(302, { Location: location })
ctx.res.end()
} else {
Router.push(location)
}
}
The authentication part correctly redirects when a user doesn't have a token. However, if the token is tampered with and becomes invalid, a redirect error occurs:
The page isn’t redirecting properly
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
I've identified that the second redirectUser call causes this issue. Even placing it outside the else statement at the end of the getInitialProps function yields the same result.