CODEWITHSUNDEEP
amazon-web-servicesgraphqlaws-amplifyaws-amplify-cli
Anni
Anni

Reputation: 177

Amplify GraphQL No Credentials Error in NextJs Application

NextJs Application is working perfectly fine locally but after pushing the fronted to AWS I'm getting the run time error, No Credentials in callback.js api

No Build time error, so I assume aws-exports.js file is built correctly during the build but I don't know if it is built with the required details like API key on AWS.

I'm using API key authentication by default. I'm not using amplify add auth because I've a requirement to use custom auth. I know amplify auth is the recommend way but I still need to use my custom method.

I have already tried multiple suggestions like disable Analytics: true as suggested in couple of other discussions but none of them worked for me. Build my project multiple times from scratch by re-installing all the dependencies but no luck.

callback.js API

import { API, graphqlOperation } from 'aws-amplify';
import {getAuth} from "../../../../src/graphql/queries"
import {createAuth} from "../../../../src/graphql/mutations"

export default async function callback(req, res) {
      const record = await API.graphql(graphqlOperation(getAuth, {emailId: "[email protected]"}))
      res.status(200).json({ record });
}

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_appsync_graphqlEndpoint": "https://dummyUrl.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-************"
};

export default awsmobile;

_app.js


import {Amplify} from 'aws-amplify';
import config from "../aws-exports"
Amplify.configure(config)

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 // App logic

})

GraphQL Schema

type Auth @model @auth(rules: [{ allow: public }])  {
  emailId: ID! @primaryKey
  name: String
  screen_name: String
  profile_img: String
  userSession: String
  tokenType: String
  accessToken: String
  accessSecret: String
  refreshToken: String
  accessScope: String
}

Package.json

"dependencies": {
    "@emoji-mart/data": "^1.0.6",
    "@emoji-mart/react": "^1.0.1",
    "aes256": "^1.1.0",
    "aws-amplify": "^4.3.37",
    "emoji-mart": "^5.2.2",
    "formidable": "^2.0.1",
    "js-cookie": "^3.0.1",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "18.2.0",
  },

Amplify.yml

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Upvotes: 3

Views: 1323

Answers (1)

Leech
Leech

Reputation: 542

Edited
I've found how the server side process work with amplify and graphql. Please refer to this. On the server side, you need to pass the API KEY explicitly into the graphql request as that page writes.

==========
I'm using appsync, but appsync pure directives. So just let me provide the reference below. Please confirm the rule follows this way.

{ allow: public, provider: apiKey }

Upvotes: 1

Related Questions