I build my front-end using NextJs and am hosting the website on AWS S3. Everything was fine until I tried to add cognito authentication. I found this npm package that was supposed to make everything easy: next-auth.
However I keep getting errors:
- When loading the page, there is console error: "CLIENT_FETCH_ERROR". Next auth says I need to declare an env variable called NEXTAUTH_URL (https://next-auth.js.org/errors) which I have done in my .env file.
- When trying to click login it redirects me to https://example.com/api/auth/error with a 403 in the public website. On localhost, it actually brings me to a page (http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F) with 2 buttons (one to sign in with Cognito and the other with Google).
Do you think this is because S3 doesn't actually have environment variables so NEXTAUTH_URL is undefined? Should I move to Vercel or another AWS service or is there something else that could be wrong?
My pages/api/auth/[...nextauth].js file:
import NextAuth from 'next-auth/next';
//import Providers from 'next-auth/providers';
import GoogleProvider from 'next-auth/providers/google';
import CognitoProvider from 'next-auth/providers/cognito';
export default NextAuth({
providers: [
CognitoProvider({
clientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
clientSecret: process.env.COGNITO_CLIENT_SECRET,
issuer: process.env.COGNITO_ISSUER,
domain: process.env.COGNITO_DOMAIN,
}),
],
theme: {
colorScheme: 'light',
},
debug: process.env.NODE_ENV === 'development' ? true : false,
secret: process.env.NEXTAUTH_SECRET,
});