AWS Amplify Next.js app seems incompatible with NextAuth?

[ghost]

Question 💬

After following the AWS Amplify Next.js tutorial AWS Amplify Next.js I was able to successfully deploy an app. So then I decided to add Prisma and NextAuth to handle the authentication, I added Google as my OAuth provider. It works perfectly in development, I've tested it out.

However, when I pushed my code and it got redeployed to AWS I started getting this error

So I am now wondering if there is a workaround for that.. In the AWS Amplify Next.js tutorial, at the bottom, they say the following:

Amplify now supports API routes in Next.js apps. Any file inside the folder pages/api is mapped to /api/* and treated as an API endpoint instead of a page. You can use these APIs to interface with any backend service to fetch data.

which makes me think that the issue comes from the fact that the NextAuth api handler's signature looks like this [...nextauth].ts

Has anyone tried this combination, I think if it works it would be the best setup I've been able to find around. Really hoping that there is a workaround tbh.

Regards!

How to reproduce ☕️

1. follow the tutorial I've linked in the issue
2. add NextAuth to it

that's it, you get the aforementioned error

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

That's a standard Next.js feature, it not special to next-auth https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes

the problem might be in your setup, although it's hard to tell without any reproduction.

[ghost]

So I guess then the problem comes somewhere from AWS / Amplify

PS: I will go ahead and create a reproducible example

[balazsorban44]

you could follow up there, yeah. one guess is to check that the NEXTAUTH_URL environment variable is set correctly

[ghost]

NEXTAUTH_URL=https://main.d1munt2kh8plao.amplifyapp.com/ this is it, I've copied the url from the deployed version in AWS

[ghost]

omg I just realized from your suggestion that I've completely forgotten to set these variables in the deployed version, a little rubber duck debugging moment right there lol, let me try it and I shall get back to you

[ghost]

@balazsorban44 example repo there you go - I've created a repo with my exact setup

1. created an app using npx create-next-app@latest --ts
2. amplify init
3. followed AWS Amplify Next.js Tutorial step by step
4. added Prisma (prisma init) and added NextAuth, configured it to work with Google
5. I've set all actual environment variables in the AWS Amplify app configuration Environment Variables and then for each lambda function I've set them in the lambda functions' environment variables configurations as well

[ghost]

seems that my concerns will turn up true - next auth actually treats some of these api routes as pages and AWS Amplify simply treats them as api routes and nothing else.. so I guess this won't work, I think I will have to use passport for that purpose

[ghost]

so after all it turned out the combination with Prisma was causing the issue, I finally made it work! apparently something related to the build process with the Prisma dependencies was off, I've removed it for the time being and now it works! Thank you for your guidance @balazsorban44

PS: good thing is I actually managed to solve the problem with the environment variables which I saw 2 issue threads on Github about and I've posted my solution there so at least something good came out of all that hassle

[Emily-Thomas]

@MallExplorer Hey, I am having an issue with env variables in my amplify setup with next auth. Can you link me to those github threads?

[bojidaryovchev]

@Emily-Thomas aws-amplify/amplify-hosting#1987 (comment)

[hwan27]

@ghost I'm having an issue similar to you using combination with Prisma. Could you explain more detail and how did you solve this?
I set my variables in amplify.yml(build setting) and still dosn't work.

[sorokinvj]

@ghost

so after all it turned out the combination with Prisma was causing the issue, I finally made it work! apparently something related to the build process with the Prisma dependencies was off, I've removed it for the time being and now it works! Thank you for your guidance @balazsorban44

PS: good thing is I actually managed to solve the problem with the environment variables which I saw 2 issue threads on Github about and I've posted my solution there so at least something good came out of all that hassle

Congrats! did you need to specify any rewrites in Amplify Console Rewrites and redirects to make [...nextauth] work?

[BrandonEscamilla]

Hey everyone, I am having issues while deploying a next.js app using Next-auth in amplify, it seems the sign-in function is not working well using credentials provider. Is this related?

[balazsorban44]

In any case, provide a reproduction with your code and possibly a deployed version so someone could help you out. (I don't have access to Amplify so wouldn't know how to deploy myself)

[BrandonEscamilla]

Hey @balazsorban44, I am sorry for posting here this issue with no more details, I am sure I can do better. At the end the issue was my fault for not taking into account the environment variables and my poor debugging skills in AWS lambdas, as far as I've seen this is an issue not related with Next.js or Next-auth, but Amplify. It is actually a very common issue since the documentation is somehow not very explicit with this topic, most persons try to set the environment variables only in the section to do that in their dashboard, but there is an issue with Amplify having problems to pass these environment variables to the lambdas functions, so u need to pass these variables also in the build process and create and .env file. I attached some images for visualization purpose. The fact is that is somehow difficult to debug the lambdas functions in AWS, so is difficult to see the errors in the server side end. Once more than 1 hour debugging I finally noticed that there was a very simple error, NEXTAUTH_URL was undefined. I think this should solve most issues developers are facing with Amplify and next-auth. The other one everyone is talking about is having issues using tag since is not supported from Amplify yet. Hope this can be helpful for someone.

.

[SawkaDev]

@BrandonEscamilla great post! however, shouldnt the npm run build come after the echo >> .env commands?

[foobarnes]

Hello all!

Just found this buried in Amplify's docs (classic): https://docs.aws.amazon.com/amplify/latest/userguide/ssr-environment-variables.html

It helped me make my NEXTAUTH_URL env variable available to my API routes.

[dShot7211]

foobarnes fix worked for me we have to configure server side variables in aws

[stvnbash]

I've gotten NextAuth to work on Amplify before. I would recommend first testing your app on a hosted platform, such as Vercel. Since Vercel makes NextJS, it is super easy to deploy your app to their platform for testing. If it works there, redeploy to AWS. Be sure to set up your environment variables properly. You may also need to add an amplify.yml file to your project so Amplify passes your env variables into the application
amplify.yml will probably look something like this

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
        - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
        - ... other env variables here ...
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

[shivpratik]

I did exactly what you said. I first deployed on Vercel and it works perfectly fine. When deployed on AWS Amplify the middleware cause issue. Only the protected routes give 500 error, all other pages work fine. If I remove the middleware all pages are working.

Below is my middleware code:

import { withAuth } from "next-auth/middleware";
export default withAuth({
  secret: process.env.NEXTAUTH_SECRET,
});

export const config = {
  matcher: ["/dashboard"],
};

When I check CloudWatch I see this error:

Error: ENOENT: no such file or directory, open '/tmp/app/.next/server/edge-chunks/wasm_a7e702bc5ba9227243abda7977c8096f59478d3f.wasm'

[gabrielfurini]

In my case, running the app in AWS Amplify, any of the methods to set environments on the build step worked without setting AUTH_TRUST_HOST as well. https://authjs.dev/getting-started/deployment#auth_trust_host