Question 18975 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

Next-AUTH UNTRUST_HOST_ERROR on AWS Amplify – Amazon Web Sevices

Deployed NextJS app on AWS Amplify

I am getting untrust host in my CloudWatch logs.

Can someone help?

[next-auth][error][UNTRUST_HOST_ERROR]
enter image description here

URL: https://master.dtzbr8sfj0q7k.amplifyapp.com/

enter image description here

I have added this domain in my Cognito allowed callbacks.

enter image description here

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

Tags:

2

Answers


  1. 0

    Make sure you have configured NEXTAUTH_URL environment variable correctly on AWS Amplify.

    I checked your website, and I see this error:
    error screenshot

    CLIENT_FETCH_ERROR

    On NextAuth.js documentation,
    NextAuth 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

    enter image description here

    Login or Signup to reply.
  2. 0

    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:

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

    I had to do it for all of my environment variables to allow my Next.js application to access them.

    Hope it helped.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search