Next.js Authentication - Client, Server, & API Route Authentication with AWS Amplify
In this video you'll learn how to implement end to end authentication in a Next.js app using AWS Amplify and Amazon Cognito. We'll start by creating a new Next app and installing the necessary dependencies from AWS Amplify. We'll then initialize a new Amplify project and add the authentication service. From there, we'll create a profile page to enable user authentication and add some navigation to navigate between pages. Finally, we'll implement SSR authentication on server-rendered pages as well as API routes using the Amplify client libraries.
Instructor: [0:01] To get started, create a new Next app using NPX. Next, change into the new directory and install AWS Amplify, and add aws-amplify/ui-react using either NPM or Yarn. Next, initialize a new Amplify project by running Amplify in it. For the source directory path, set the path as the root of the project.
[0:42] When prompted for your AWS profile, choose the profile that you'd like to use. Next, we'll add authentication by running Amplify add off. The configuration process will choose the default configuration and username for signing in.
[1:03] To deploy the service, run Amplify push. Once the backend has been deployed, open the project in your text editor. The first thing we'll do is configure Amplify by opening pages/_app.js.
[1:23] Here, we'll import Amplify from AWS Amplify, the configuration that was created by the CLI at aws-exports, and then we'll call amplify.configure, passing in the config and setting the SSR flag to true. Next, we'll update the main return statement to add some navigation.
[1:44] We'll wrap the main component in a div and then add a nav, setting the styling to display flex. Finally, we'll import the lead component from Nextlink and create two links, one to navigate to the root of the app and the other to navigate to a new profile page that we'll be creating in just a moment.
[2:12] Next, we'll create a new file in the pages directory called profile.js. Here, we'll first import useState and useEffect from React. We'll next import the Amplify signout and withAuthenticator UI components from amplify/ui-react. Finally, we'll import the auth class from AWS Amplify.
[2:30] In the profile component, we'll use the useState hook to create a user state setting it to null. If the user is signed in, will display a greeting saying welcome, along with the user's username. The amplify sign out button will render a sign out button.
[2:49] Next, we'll create a useEffect hook that calls off that current authenticated user, and if there is a currently signed in user, sets the user in the user state. For the default export, we'll wrap the profile component in the withAuthenticator component from AWS Amplify.
[3:11] To test this out, we'll run npm run dev. When we navigate to localhost:3000, we should now see our navigation. When we navigate to the profile page, we should be able to create an account and sign in. When we view the console, we should see the user data logged out to the console.
[3:57] To demonstrate user authorization on the server, create a new file in the pages directory called protected.js. This function will take in two props, an authenticated Boolean and a username that will be a string. If the user is not authenticated, it will return a heading saying not authenticated.
[4:17] If the user is authenticated, we'll return a greeting. Next, we'll import the withSSRContext utility from AWS Amplify. This is the utility that enables SSR support in the Amplify libraries.
[4:31] We will export the getServerSideProps function to enable SSRsupportindex.js.
[4:38] In the function, we will destructure the AuthClass from withSSRContext passing in the request. By doing so, this enables the AuthClass to be configured with the current user session, if there is one. We can now call Auth.currentAuthenticatedUser in the SSR route.
[4:54] If the user is signed in, will return a props object with authenticated set to true, and the username set to the user's username. If the user is not authenticated, we'll return a props object with authenticated set to false. We can also check user authentication in an API route. To do so, create a new file in pages/api called check-user.js.
[5:21] In this file, we import the withSSRContext utility from AWS Amplify. We then reconfigure Amplify because when deployed, API routes are not aware of the existing Amplify configuration.
[5:35] In the function, we destructure the AuthClass using the withSSRContext utility passing in the request. We then call off that current authenticated user returning the user. If the user is signed in, we return with the JSON response passing in the user. If the user is not signed in, we return with the user set to null.
[6:02] Back in app.js, we create a new route for the new protected route. When we open our app, we should now be able to navigate to the new protected route. Next, let's try testing everything out by signing out. When we now try to access the protected route, the server rendered route recognizes that we are not authenticated.
[6:26] Next, let's try signing back in and accessing the new API route. When we navigate to api/check-user, we see that the user metadata is returned in JSON format. If we sign out and then try to access the API route, we see that the user is set to null.