Hey! I’m new to DigitalOcean and this is my first post on this community forum.
I’m trying to move my simple Next.js-based webapp from Vercel to DigitalOcean App Platform, but I’m encountering a problem while doing so.
It has two routes:
The second one, /dashboard, is supposed to be available only to authorized users who have the cookie named “jwt”. For purpose of this small example, the code merely checks if the cookie named “jwt” exists. If it does, /dashboard route is present normally. If the “jwt” cookie doesn’t exist,
This logic is realized with Next.js middleware:
import { cookies } from 'next/headers';
import { NextResponse, type NextRequest } from 'next/server';
export default function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
console.log(`===> Middleware running, pathname: ${pathname}`);
console.log(JSON.stringify(request));
if (pathname === '/log-out') {
const response = NextResponse.redirect(new URL('/', request.url));
response.cookies.set('jwt', '', { path: '/', expires: new Date(0) });
return response;
}
const token = cookies().get('jwt');
if (!token && pathname !== '/') {
console.log('No token, redirecting to /');
return NextResponse.redirect(new URL('/', request.url));
}
console.log('Token found, continuing');
return NextResponse.next();
}
export const config = {
matcher: [
"/((?!api|_next/static|_next/image|img/|favicon.ico).*)",
],
}
When the “jwt” cookie doesn’t exist, hitting /dashboard
will return a 3xx response code with Location: /
header, to facilitate the redirect.
When the “jwt” cookie exists, hitting /dashboard
This is what happens when I run the project locally, or on Vercel.
It doesn’t matter if the “jwt” cookie exists or not. The response I get from accessing /dashboard
is always 2xx, and the Location
header is missing.
This behavior completely breaks authentication in my app.
This only happens when I deploy the project on DigitalOcean App Platform.
I have created a very simple Next.js app (with npx create-next-app@latest mini-app-nextjs --use-npm
). It allows to reproduce this issue. There’s also a Dockerfile that can be used to upload the image to DigitalOcean Container Storage:
docker build -t registry.digitalocean.com/<your-container-repository-name>/mini-app-nextjs:latest --platform linux/amd64 .
and then docker push it
.
Here’s a running app, deployed on my personal account:
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
This comment has been deleted