Anyone have an example next app with amplify auth I almost h Serverless Stack #help

Anyone have an example next app with amplify auth....

Devin

10/14/2021, 8:14 PM

Anyone have an example next app with amplify auth. I almost have mine working but did something wrong with my

Amplify.configure({...})

Frank

10/14/2021, 10:15 PM

Hey @Devin, does this post help much? https://dev.to/dabit3/the-complete-guide-to-next-js-authentication-2aco

Devin

10/14/2021, 10:20 PM

Well yes that’s how I got this far lol

Devin

10/14/2021, 10:20 PM

I’m using a stack for auth, similar to the tutorial and trying to wire that up to the next app. Maybe I shouldn’t do that?

Chad (cysense)

10/15/2021, 3:15 AM

Hey @Devin I have a react app with amplify auth. Can maybe help troubleshoot if you share the issue you're having

Devin

10/15/2021, 2:52 PM

Thanks Chad! Here’s the issue. I’m my Stack I have

Copy code

<http://this.site|this.site> = new sst.NextjsSite(this, "Site", {
      path: "frontend",
      environment: {
        // Pass the table details to our app
        REGION: scope.region,
        REACT_APP_REGION: scope.region,
        TABLE_NAME: this.table.tableName,
        USER_POOL_ID: this.auth.cognitoUserPool.userPoolId,
        IDENTITY_POOL_ID: this.auth.cognitoCfnIdentityPool.ref,
        APP_CLIENT_ID: this.auth.cognitoUserPoolClient.userPoolClientId,
      },
    });

This seems to work as I can see in my NextJs console that these values are passed along. in the front end I have a config file to wire everything up. This roughly follows the template that was in the Notes tutorial.

Copy code

const config = {
  // Backend config
  cognito: {
    REGION: process.env.REACT_APP_REGION,
    USER_POOL_ID: process.env.REACT_APP_USER_POOL_ID,
    APP_CLIENT_ID: process.env.REACT_APP_USER_POOL_CLIENT_ID,
    IDENTITY_POOL_ID: process.env.REACT_APP_IDENTITY_POOL_ID,
  },
};

export default config;

Devin

10/15/2021, 2:53 PM

finally, in my

_app.js

i have the following:

Copy code

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REACT_APP_REGION,
    userPoolId: config.cognito.REACT_APP_USER_POOL_CLIENT_ID,
    identityPoolId: config.cognito.REACT_APP_IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.REACT_APP_USER_POOL_CLIENT_ID,
  },
  ssr: true,
});

function MyApp({ Component, pageProps }) {
  console.log("config: ", config.cognito);

Devin

10/15/2021, 2:55 PM

I’m getting the following error

Copy code

react_devtools_backend.js:2526 [ERROR] 51:46.959 AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

Which explains that I have misconfigured something. So I’ve tried a variety of different versions of conifgs at this point. But haven’t been able to figure out what I’ve misconfigured. I’ve used this documentation to try to find the issue.

<https://docs.amplify.aws/lib/auth/start/q/platform/js/#configure-your-application>

Devin

10/15/2021, 2:56 PM

As a note, my config values appear in the NextJs console but are all

undefined

in the UI so I think that I’m jsut doing something foolish at this point and have missed some straightforward step.

Frank

10/15/2021, 3:13 PM

Instead of

Copy code

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REACT_APP_REGION,
    userPoolId: config.cognito.REACT_APP_USER_POOL_CLIENT_ID,
    identityPoolId: config.cognito.REACT_APP_IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.REACT_APP_USER_POOL_CLIENT_ID,
  },
  ssr: true,
});

Maybe they should be

Copy code

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.APP_CLIENT_ID,
    userPoolWebClientId: config.cognito.IDENTITY_POOL_ID,
  },
  ssr: true,
});

Devin

10/15/2021, 3:14 PM

Let me try that!

Devin

10/15/2021, 3:18 PM

I’ve tried various versions of that as well.

Copy code

react_devtools_backend.js:2526 [ERROR] 17:28.604 AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

            1. Did you run `amplify push` after adding auth via `amplify add auth`?

The error persists with that as well.

Devin

10/15/2021, 3:19 PM

perhaps I do need to amplify push? I don’t recall that step in the guide however.

Frank

10/15/2021, 3:21 PM

I mean

config.cognito.REACT_APP_REGION

doesn’t exist right? U only created

config.cognito.REGION

. Looks like a typo to me?

Devin

10/15/2021, 3:23 PM

Indeed. In that case I think, one of the variety of changes I’ve tried, left that typo in. It absolutely was one problem 😅 . But, the same issue still exists for improper config. Its almost certainly a typo/import kind of issue at this point.

Devin

10/15/2021, 8:28 PM

I think the problem, is not typos at all. The typos came from me attempting different solutions. I think that somehow, I’ve linked up my

NextjsSite

and my actual next app incorrectly.

Devin

10/15/2021, 8:30 PM

In my terminal that’s running the next app vs localhost

Devin

10/15/2021, 8:39 PM

PRESTO! I needed to add my enviromental variables to next.config

Jay

10/16/2021, 12:37 AM

We’ll need to create a Next.js version of the Notes app to show this in detail.

Frank

10/16/2021, 5:50 AM

@Devin if you are referring to the env vars on the client side, they need to be prefixed with

NEXT_PUBLIC_

Frank

10/16/2021, 5:51 AM

Try using

NEXT_PUBLIC_REGION

instead of

REACT_APP_REGION

Frank

10/16/2021, 5:51 AM

Here’s more details on this behavior https://nextjs.org/docs/basic-features/environment-variables

Frank

10/16/2021, 5:52 AM

The next.config way is the older way of setting env vars

Devin

10/16/2021, 2:56 PM

I’ve made the switch to

NEXT_PUBLIC_

thanks Frank!

Open in Slack

Previous Next