Cover image by Kai Pilger
In this guide you will learn how to implement authentication in a Next.js app. I will cover client authentication, aut...
For further actions, you may consider blocking this person and/or reporting abuse
UPDATE: support for redirects in
getServerSideProps
was released in v10. See the docs for more information about redirects: nextjs.org/docs/basic-features/dat...OLD: FYI, redirects in
getServerSideProps
aren't 100% supported and a side-effect of that is they currently cause a full page reload. There's an RFC for redirects to be fully supported.For a workaround, I found this comment.
I made the
catch
to return the following snippet, and I removedres.writeHead(302, { Location: '/profile' })
andres.end()
.I can't even get it to work with the code above.
This was really great and easy to follow, thanks for the tutorial!
One small bit of feedback would be to change the
check-user.js
api route to use a non-200 statusCode for an unauthenticated user.Do i have to deploy the app with serverless framework? can i just use amplify to deploy nextjs app, and what about deploying API routes?
I'm currently working on the same stack and have the exact same question!
Hi Osama & Michael,
Amplify is releasing SSR support sometime soon, but for now if you need SSR or API routes on AWS you need to use the Serverless Framework. If you are running a completely static Next.js build, you can use the Amplify hosting service.
docs.amplify.aws/guides/hosting/ne...
Really glad to know it will be available on Amplify! I have my frontend on Vercel right now but I will be happy to move everything on Amplify in the foreseeable future.
Great article and thanks a lot. I've been running into some issues with the protected server side rendered page.
When trying to access the page the whole app crashes with the following in the console:
I tested from many angles, and even when cloning your source code I ran into the issue.
There are some discussions on the Next.js GitHub (github.com/vercel/next.js/discussi...) on the same topic. Not sure if it's a Next.js version thing
For now, I'll continue to dig for a better understanding of what's going on.
same. any luck with this bug?
Excellent intro, Nader. I've just switched to npm@7 CLI and I'm having issues installing the dependencies in the second step.
Hi Nader, Thanks for this great tutorial.
For now, we need have to add ssr configuration in all pages/* as mentioned in Amplify documentation :
Great content as usual! Waiting for part 2!
Thanks Ibrahim!
@dabit currently trying to deploy via the cli and I get this error
pages with `getServerSideProps` can not be exported
. Does anyone have a workaround? The app works as expected when developing locally.
Hi I have tried to add Facebook as a federated identity provider and I also want to carry on using the default withAuthenticator and associated UI. The first strange thing I notice is that there is a new button a the top of my login panel but it says "Sign in with AWS". When I click I get taken to a new login screen with Facebook at the top. When I try to login in though there is a URL error in the debug on the following API call:
cognito-identity.us-east-1.amazona...
Response error: 400
{"__type":"ValidationException","message":"1 validation error detected: Value '{cognito-idp.us-east-1.amazonaws.com/us-east-1_XXXXX=}' at 'logins' failed to satisfy constraint: Map value must satisfy constraint: [Member must have length less than or equal to 50000, Member must have length greater than or equal to 1]"}
I appreciate any directions on how to start debugging. I have tried googling but cannot find where to start. I can see the user has been added to the AWS Cognito user pool in AWS Console. I upload some screen captures of the initial flow.
dev-to-uploads.s3.amazonaws.com/up...
dev-to-uploads.s3.amazonaws.com/up...
I have this exact same problem!
I'm getting an error:
TypeError: Object(...) is not a function
pointing to the code below.
export async function getServerSideProps(context) {
Any suggestions?
Amazing guidee, thanks for posting this! Any chance that for the second part you could add some examples around handling data based on roles?
Great post!
I am still struggling with a problem: If a protect a route on server-side the request to Cognito (
Auth.currentAuthenticatedUser()
) takes about 400-500ms. Doing the same on client-side the request takes only < 15ms. Both ways are implemented like in this example.Maybe someone has got an idea or made a similar experience?
Really strange, trying to hit the 'protected' page reroutes me back to 'profile' even though all my authenticated info pops up in the console and I can reach the 'protected-client-route'. Tried this a few times and looking at the code.
A small suggestion for importing emotion:
Then, to use it:
Thanks for this mention. For some reason, I couldn't get it to work but did so using "import { css } from '@emotion/react'; "
Thanks..I have just started to learn about next.js, I was looking for something like this
Great Job have you done again :)
where can i find part 2 ?
on running "amplify init", I get the following ERROR "'amplify' is not recognized as an internal or external command,
operable program or batch file."
You probably haven't installed the CLI yet...
npm i -g @aws-amplify/cli
Hey nader great work ! can someone post how to assign roles to user and authenticate using amazon amplify in nextjs, thanks!