Authentication & Authorization in a Next.js App with AWS Amplify

Aug 15, 2023

Authentication & Authorization in a Next.js App with AWS Amplify

Learn how to add sign in and sign up and also protect Next.js client pages, SSR pages and APIs using AWS Amplify

2 minutes AWS account setup and Amplify CLI installation guide: https://docs.amplify.aws/start/gettin…

00:00 - Intro
00:23 - Prerequisites
00:37 - Create an Amplify Project
01:03 - Enable Auth
01:42 - Create Next.js App
01:55 - Install Amplify Dependencies
02:20 - Pull Amplify Project into React Project
03:34 - Configure Amplify for React Project
04:29 - Protecting the Client
05:14 - Testing
06:00 - Protect SSR Pages
07:32 - Protect APIs
08:46 - Outro

#AWS #Amplify #AWSAmplify #React #Next.js #Auth #Authentication #Authorization #SSR #API

Content

0 -> Hello friends. In this video I am going to show you how to add

4.35 -> auth to a Next.js app using AWS amplify, and by the end of the

9.27 -> video, you will be able to add a login and signup feature to

13.2 -> Next.js app, protect client only pages, protect server rendered

18.66 -> pages and also protect your next JS API endpoints. To follow

24.9 -> along, we just need to have an AWS account and make sure you

29.61 -> have the Amplify CLI command installed. I will link to a two

33.72 -> minute steps on how to do that in the description.

37.74 -> Go to your AWS console and search for amplify. You should

40.92 -> also open it when you find it. Now when you have the amplify

44.61 -> page open, click the New app button and select build an app

48.9 -> from the drop down. Give the app a name and click the Confirm

54.06 -> deployment button. When the deployment is done, click the

59.04 -> Launch Studio button to open Amplify Studio in a new tab.

63.3 -> From Amplify Studio, you can model a database, add content to

67.71 -> the database, configure authentication and

70.62 -> authorization, which we will do in this video. And also import

74.94 -> UI components from figma. So you don't have to write the

78.12 -> components from scratch. But just like I said, for this

81.63 -> video, we are focusing on setting up authentication. So

85.29 -> click authentication from the side bar the default settings

89.28 -> are fine. But I'm just going to quickly make the password less

92.91 -> strict. Since we're just testing. Now all you need to do

96.93 -> is wait until you get a confirmation message that the

99.6 -> deployment is done.

103.21 -> Now that you have a back end set up, let's do some work on the

106.66 -> client side. But first of all, let's create a next JS project

111.52 -> and call the project amplify next auth. While we're still

116.71 -> here, let's install the amplify NPM dependencies that we are

120.76 -> going to use in this project. The AWS amplified dependency is

127.03 -> the main amplify SDK, or while the AWS amplify UI reacts

132.82 -> dependency is teeh SDK for UI components, which we're going to

136.81 -> use for auth. Now to have a back end as well as a client, we need

143.41 -> to get them to talk to each other somehow. Amplify makes

147.88 -> this very easy, and all you need to do is run an amplify pull

151.42 -> command. To run this command, you need to have the Amplify CLI

156.79 -> installed. You can follow the link in the description to learn

159.97 -> how to install and configure it in just two minutes. When you

165.01 -> have the CLI installed, head to the studio dashboard and click

168.88 -> the deployments link, then copy the pull command and run it in

172.9 -> your terminal. Amplify Studio will need you to confirm that

177.97 -> the request came from you. So just click yes and head back to

180.94 -> the terminal. The CLI will also ask you a few questions about

185.41 -> the project. So it knows how best to set it up. Pick the

190.24 -> default answer for most of it except for the source directory,

194.26 -> which is the root the distribution directory, which is

198.07 -> the dot next folder, and the start command, which for Next.js

202.39 -> is NPM run dev. All these changes are just unique Next.js.

208.03 -> So if it's not a React project, it should be the default for all

212.29 -> of them. At the end of the setup, we get a configuration

216.91 -> file which you should never commit, as well as an amplify

220.57 -> folder with all the back end details. Before we can use the

225.28 -> amplify SDK, we need to configure it at the root level

228.76 -> of your project. Next.js uses the underscore app.js file in

234.64 -> the Pages folder as its roots, so you can configure amplify

238.39 -> here. First of all, import amplify from the SDK, then

243.97 -> import the configuration file that was generated when you run

247.51 -> the pull command from the previous step. Now you can call

251.68 -> the amplified configure function and pass it the configuration.

256.89 -> And since we want to be able to have access to the user

260.04 -> information from server rendered pages on API's, we also need to

264.96 -> set SSR to true at this point to have everything set up. We can

271.05 -> now start protecting our next Jas pages. I think we should

275.07 -> start with client only authorization since it's the

277.62 -> easiest. Open the index.js file in the Pages folder and delete

282.72 -> everything in the folder. Once you have done that, create a

286.65 -> page component that receives the user and the sign out function.

291.81 -> The component can receive this props when we wrap it using the

295.59 -> with authenticator higher order component. You can import the

299.73 -> component And then from the Amplify UI library we installed

302.64 -> earlier, you can then show the user name, and also create a

307.29 -> Sign Up button using the sign out function that will got from

311.13 -> the props. Run the next up from the CLI to start the app. And

318.51 -> once you've done that, hit the address in the browser. Since we

322.74 -> wrapped the home pages in with authenticator amplify won't let

327.15 -> us see the page unless we sign up or sign in. Click the Create

332.07 -> Account tab and fill out the form. Amplify, will send you a

336.51 -> confirmation code to the email you provided use the code to

340.26 -> confirm the email, you will now have access to the homepage,

345.21 -> which shows the user ID and sign out button. The authentication

349.98 -> token is also stored in the process storage. So even when

354.03 -> you try to authorize server rendered pages and API's, the

357.66 -> browser will have a token show for it.

360.26 -> Speaking of server rendered pages, let's take a look at how

363.77 -> we can protect them using the token and session data we

366.86 -> already have. Create a protected.js file in the Pages

372.29 -> folder, add a component in the file that receives authenticated

376.58 -> and username as props. We can use the authenticated prop to

380.42 -> render conditionally depending on whether the user is

383.42 -> authenticated or not. The next question now is how does the

387.53 -> component receive these props, we can pass the props using the

392.06 -> get server side props function. The function grubs auth from

396.95 -> with SSR context, which we can import from the Amplify library,

402.47 -> the function that we need to call from auth, can throw an

405.11 -> error, so we need to handle that using a try catch block. So if

411.71 -> an error occurs, we just return the props for the component and

415.85 -> set authenticated to false. But the actual line that might throw

419.93 -> an error is calling the auth dot current authenticated user. If

425.21 -> it does not throw an error, it means that a user is

428.09 -> authenticated. So we can grab the user name and return it as

431.81 -> prop as well as set authenticated to true. And we

436.04 -> can test this by opening the protected page in browser, which

439.97 -> show the user name. And to test that the error is handled

444.65 -> properly, you can log out from the homepage and then visit the

448.37 -> protected page again. Finally, you can also protect Next.js

455.9 -> API's using the user data stored in the browser. Let's create an

461.27 -> API to protect. Start with adding a user file in the pages

465.74 -> slash API folder, add the API function and grab Auth from with

471.17 -> SSR context like we did in the server rendered pages, we need

476.39 -> to import it as usual. And while we are doing so we need to also

480.68 -> configure amplify. API is on like pages don't have access to

487.31 -> what is in the app.js file. So we don't have access to the

490.7 -> previous configuration from here. Next, create a try catch,

495.56 -> block and handle errors if the user is not authenticated, by

499.61 -> sending a 401 status code and a response with an empty user.

505.43 -> When you have that covered, you can grab the authenticated user

509.03 -> and send it as the response. Open the Browser and good API

513.35 -> slash user. And you should see a raw JSON with the user ID. You

518.66 -> can also test the error too, by signing out and coming back to

523.04 -> the API page.

526.91 -> At this point, you should have Next.js app with authentication.

530.87 -> Feel free to add more to it or use it as a starting point for

534.14 -> other project. Thank you so much for watching this video and I

537.35 -> hope to see you in the next one.

Source: https://www.youtube.com/watch?v=0ofxWRzBLWY