✅ - Cannot configure with amplify/appsync... im dying | AWS Amplify | Page 1

merry stone Mar 11, 2024, 1:10 AM

#

im trying to send a graphql query to appsync using amplify v6. Note i use next 14 app router (but just want to do client side calls). Here's how i configure:

    Auth: {
        region: 'us-east-1',
        userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID,
        userPoolWebClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID,
        oauth: oauth
    },
    API: {
        GraphQL: {
          endpoint: "https://endpoint,
          region: 'us-east-1',
          defaultAuthMode: 'userPool',
        },
    },
};
export function configureAmplify(config: AmplifyConfig): void {
if (!isConfigured) {
    Amplify.configure({...config, ssr: true});
    Auth.configure({...config, ssr: true});
    console.log("console.log: configured");
    isConfigured = true;
}
}```

which I know works for auth because i can get the current session + access token, and can do calls to api gateway. In fact, when i do a graphql query, i can see the id and access token in the cookies:

```Cookie:
CognitoIdentityServiceProvider.5t4jgv...
LastAuthUser=f4b8c4e8...
CognitoIdentityServiceProvider.5t4jgv...
idToken=eyJraWQ....
accessToken=eyJraWQ....

But I get these errors if a query is ran:

WARN] 47:41.429 GraphQLAPI resolveConfig - The API configuration is missing. This is likely due to Amplify.configure() not being called prior to generateClient().```

```Unhandled Runtime Error
Error: No credentials
Source
utils/graphql/messages.ts (81:17) @ async sendMessage
 79 | // Send Message
 80 | export async function sendMessage(conversationId: string, content: string) {
> 81 | const result = await client.graphql({
    |               ^
 82 |   query: SEND_MESSAGE,
 83 |   variables: { input: { conversationId, content } }
 84 | });```

i am 1000% sure it is configuring before calling generateClient. Im dying. Please help

#

also note that i created appsync in cdk:

    default_authorization=appsync.AuthorizationMode(
        authorization_type=appsync.AuthorizationType.USER_POOL,
        user_pool_config=appsync.UserPoolConfig(user_pool=user_pool),
    )
)

self.graph_ql_api = appsync.GraphqlApi(
    self,
    id=id,
    name=name,
    schema=schema,
    authorization_config=authorization_config,
    xray_enabled=True,
    **kwargs,
)```

merry stone Mar 11, 2024, 5:03 PM

#

bump

sonic linden Mar 11, 2024, 7:58 PM

#

Hi @merry stone what version of aws-amplify are you using?

merry stone Mar 11, 2024, 7:58 PM

#

sonic linden Hi <@231915645615210496> what version of aws-amplify are you using?

Hey man! V6

sonic linden Mar 11, 2024, 7:59 PM

#

and your API was created separately from the Amplify app with CDK, right?

merry stone Mar 11, 2024, 7:59 PM

#

Yes

#

Also btw i made another update post,i noticed the api field was empty

sonic linden Mar 11, 2024, 7:59 PM

#

Is this a Gen 1 Amplify app (created using Amplify CLI command amplify init or Amplify Studio?)

merry stone Mar 11, 2024, 8:00 PM

#

Nope i didnt use those

#

Just wanna do appsync queries/subs

sonic linden Mar 11, 2024, 8:00 PM

#

Oh so you're just using the Amplify library for the GraphQL client then

#

and you manually configured the auth/api properties in the config

#

this code seemed off to me

Amplify.configure({...config, ssr: true});

#

in v6 configure accepts two config arguments, the 1st one is for resource configuration and the 2nd is for library configuration. ssr: true is a library configuration

#

so that code should look like this

Amplify.configure(config, { ssr: true });

#

otherwise ssr is not actually enabled

#

not sure if that's the issue since you mentioned you're trying to get client side requests to work but figured I'd mention it in case you might've also run into some server side request issues

merry stone Mar 11, 2024, 8:08 PM

#

Ah thanks, ill try that in 20 min when i get back. I actually dont care about doing ssr queries or anything - if that helps

sonic linden Mar 11, 2024, 8:09 PM

#

we also don't export Auth from aws-amplify or aws-amplify/auth anymore. You should be able to configure Auth within Amplify.configure. If you have scoped packages from v5 such as @aws-amplify/auth you can remove those.

#

I modified your code and got it to run with the updated config within the layout.tsx file as a client component.

"use client";
import { Amplify } from "aws-amplify";
import type { ResourcesConfig } from "aws-amplify";

let isConfigured = false;

const config: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID as string,
      userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID as string,
    },
  },
  API: {
    GraphQL: {
      endpoint: "https://endpoint",
      region: "us-east-1",
      defaultAuthMode: "userPool",
    },
  },
};

export function configureAmplify(config: ResourcesConfig): void {
  if (!isConfigured) {
    Amplify.configure(config, { ssr: true });

    const amplifyConfigured = Amplify.getConfig();
    console.log("configured", amplifyConfigured);
    isConfigured = true;
  }
}

configureAmplify(config);

#

Here's the console log output

merry stone Mar 11, 2024, 9:34 PM

#

sonic linden I modified your code and got it to run with the updated config within the `layou...

hmm, after adding oauth to your snippet, it configured, but subsequent calls fail saying no user pool.

this is my code:


   const oauth = {
       domain: `auth.example.io`,
       scopes: ['email', 'openid'],
       redirectSignIn: (isLocal && environment != "prod") ? ['http://localhost:3000/auth/callback'] : [`https://example.io/auth/callback`],
       redirectSignOut: (isLocal && environment != "prod") ? ['http://localhost:3000/auth/signout'] : [`https://example.io/auth/signout`],
       responseType: 'code' as any
   };

   const config: ResourcesConfig = {
           Auth: {
               Cognito: {
                   userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID,
                   userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID,
                   loginWith: {
                       oauth: oauth
                   }
               }
           },
           API: {
               GraphQL: {
                   endpoint: 'https://kuvgjtf3evggfi4px5mdnnnrei.appsync-api.us-east-1.amazonaws.com/graphql',
                   region: 'us-east-1',
                   defaultAuthMode: 'userPool',
               },
           },
   }

   function configureAmplify(config: ResourcesConfig): void {
       if (!isConfigured) {
         Amplify.configure(config, { ssr: true });
     
         const amplifyConfigured = Amplify.getConfig();
         console.log("configured", amplifyConfigured);
         isConfigured = true;
       }
     }

it's strange because you can see the user pool in the configuration object. At least api is there now!

#

sorry the error image got put at the bottom ^

sonic linden Mar 11, 2024, 9:36 PM

#

The error is coming from an AuthProvider component. Is that the Amplify UI component or a custom provider you created?

merry stone Mar 11, 2024, 9:37 PM

#

a custom one. It's a child component that tries to get the session:


const session = await Auth.currentSession();
const idToken = session.getIdToken().getJwtToken();
const accessToken = session.getAccessToken().getJwtToken();

#

When i configured the other way, this worked

sonic linden Mar 11, 2024, 9:37 PM

#

And does it wrap the component that is calling Amplify.configure?

#

Oh

#

Actually, where are you importing Auth from?

merry stone Mar 11, 2024, 9:38 PM

#

shid

#

lmao the old one

#

lemme fix

sonic linden Mar 11, 2024, 9:39 PM

#

https://docs.amplify.aws/react/build-a-backend/auth/manage-user-session/#retrieve-a-user-session

Manage user session and credentials - React - AWS Amplify Documenta...

Learn how to manage user sessions and credentials. AWS Amplify Documentation

#

Hehe, no worries!

merry stone Mar 11, 2024, 9:39 PM

#

sonic linden https://docs.amplify.aws/react/build-a-backend/auth/manage-user-session/#retriev...

thx

#

dang same error :(

#

ah wait gime a sec i might know why

#

The tokens are undefined.

const { accessToken, idToken } = (await fetchAuthSession()).tokens ?? {};
const idTokenString = idToken?.toString()
const accessTokenString = accessToken?.toString()
console.log(accessTokenString) // undefined

that function worked for you?

sonic linden Mar 12, 2024, 2:10 AM

#

Your user is logged in?

If so, I’m curious where you’re calling configureAmplify in relation to where fetchAuthSession is being called.

Also, if you can share the amplify related dependencies in your package.json that might help as well.

merry stone Mar 12, 2024, 11:02 PM

#

sonic linden Your user is logged in? If so, I’m curious where you’re calling configureAmplif...

I got auth working! You're the goat 😎

gloomy finchBOT Mar 13, 2024, 3:09 PM

#

✅ - Cannot configure with amplify/appsync... im dying

#

Answer selected!
```I modified your code and got it to run with the updated config within the layout.tsx file as a client component.

"use client";
import { Amplify } from "aws-amplify";
import type { ResourcesConfig } from "aws-amplify";

let isConfigured = false;

const config: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID as string,
      userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID as string,
    },
  },
  API: {
    GraphQL: {
      endpoint: "https://endpoint",
      region: "us-east-1",
      defaultAuthMode: "userPool",
    },
  },
};

export function configureAmplify(config: ResourcesConfig): void {
  if (!isConfigured) {
    Amplify.configure(config, { ssr: true });

    const amplifyConfigured = Amplify.getConfig();
    console.log("configured", amplifyConfigured);
    isConfigured = true;
  }
}

configureAmplify(config);

Kudos to @sonic linden!
#1216553770557636638 message

#✅ - Cannot configure with amplify/appsync... im dying