Deployed NextJS app on AWS Amplify
I am getting untrust host in my CloudWatch logs.
Can someone help?
[next-auth][error][UNTRUST_HOST_ERROR]
URL: https://master.dtzbr8sfj0q7k.amplifyapp.com/
I have added this domain in my Cognito allowed callbacks.
package.json
"next": "13.0.7",
"next-auth": "^4.18.6",
Build Settings
version: 1
applications:
- frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
- COGNITO_CLIENT_ID=${COGNITO_CLIENT_ID}
- COGNITO_CLIENT_SECRET=${COGNITO_CLIENT_SECRET}
- COGNITO_DOMAIN=${COGNITO_DOMAIN}
- JWT_SECRET=${JWT_SECRET}
- NEXTAUTH_URL=${NEXTAUTH_URL}
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
appRoot: client
/pages/api/[…nextauth].js
import NextAuth from "next-auth/next";
function CognitoProvider(options) {
return {
id: "cognito",
name: "Cognito",
type: "oauth",
wellKnown: `${options.issuer}/.well-known/openid-configuration`,
idToken: true,
profile(profile) {
return {
id: profile.sub,
name: profile.name,
email: profile.email,
image: profile.picture,
};
},
options,
};
}
export default NextAuth({
providers: [
CognitoProvider({
clientId: process.env.COGNITO_CLIENT_ID,
clientSecret: process.env.COGNITO_CLIENT_SECRET,
issuer: process.env.COGNITO_DOMAIN,
}),
],
secret: process.env.JWT_SECRET,
callbacks: {
jwt({ token, account, profile }) {
if (account) {
console.log("Account exists");
// modify token
token.role = profile["cognito:groups"];
}
return token;
},
session({ session, token }) {
if (session.user) {
// modify session
session.user.roles = token.role;
}
return session;
},
},
});
/index.js
import Head from "next/head";
import App from "../components/App/App";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
const { data: session } = useSession();
if (session) {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<App />
</>
);
}
return (
<>
Not signed in <br />
<button
onClick={() => {
e.preventDefault();
signIn("cognito", {
callbackUrl: process.env.NEXTAUTH_URL,
});
}}
>
Sign in
</button>
</>
);
}
Any Help would be appreciated
2
Answers
Make sure you have configured
NEXTAUTH_URL
environment variable correctly on AWS Amplify.I checked your website, and I see this error:
CLIENT_FETCH_ERROR
On NextAuth.js documentation,
Here’s a similar case:
How to solve client fetch error for next-auth authentication
Update
Sorry for the late reply. These links might give you a little more information about the issue.
Similiar Case
Environment Variables User Guide on AWS Amplify
I had the same problem today and I found this solution that worked for me:
I had to edit the amplify.yml in build settings and set env variables inside a .env file as below:
I had to do it for all of my environment variables to allow my Next.js application to access them.
Hope it helped.