DEV Community: Christian Nwamba

How to Deploy a Next.js API with Authentication on AWS

Christian Nwamba — Fri, 02 Feb 2024 13:06:31 +0000

Next.js API is a convenient alternative for building RESTful APIs. One of the early on challenges you will face is that dealing with auth for Next.js APIs is quite different to what you might be used to from other frameworks like express.

In this article, you will see how to secure a Next.js API with authentication and authorization. You will learn how to model data for the API, how to rate limit the API, and how to host the API on AWS using AWS Amplify. By the end, you’ll have a recipe API that you can write to, read from, and test.

Prerequisites

To follow along with this tutorial, please ensure you have the following:

An AWS account. If you don't have one, you can follow these instructions to create an account.
AWS Amplify CLI set up. You can follow this quick guide to set it up.
The Postman app installed on your computer.
Familiarity with the basics of Next.js.

Project Setup

To get started, create a Next.js project:



npx create-next-app@latest secure-api-w-nextjs

Change directory into the new project and install the following dependencies:



npm i aws-amplify lru-cache

Once the dependencies have been installed, the next thing we need to do is initialize an Amplify app. To do this, run the following command in your terminal:



amplify init

You will be asked a series of questions to gather details about your project's configuration. Accept the values highlighted below:



➜  secure-api-w-nextjs amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project secureapiwnextjs
The following configuration will be applied:

Project information
| Name: secureapiwnextjs
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
✔ Choose the type of app that you're building · javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: <env_name>

Deployment completed.
Deploying root stack secureapiwnextjs [ ====================----------
    amplify-secureapiwnextjs-dev-… AWS::CloudFormation::Stack     CREATE_
    AuthRole                       AWS::IAM::Role                 CREATE_
    UnauthRole                     AWS::IAM::Role                 CREATE_
    DeploymentBucket               AWS::S3::Bucket                CREATE_

✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · no

Deployment state saved successfully.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything

After setting up an Amplify app, the next step is to add authentication to the project. Writing the logic for an application's login flow can be challenging and time-consuming. You are responsible for handling tokens correctly, managing user sessions, and storaing user details. However, Amplify simplifies this process by providing a complete authentication solution, which uses Amazon Cognito under the hood, that can be easily added to your app. To do that, run the following command in your terminal:



amplify add auth

You will be prompted with a few questions. Accept the values shown below:



➜  secure-api-w-nextjs amplify add auth


Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Manual configuration
 Select the authentication/authorization services that you want to use: User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for
 images or other content, Analytics, and more)
 Provide a friendly name for your resource that will be used to label this category in the project: secureapiwnextjs59380b6c59380b6c
 Enter a name for your identity pool. secureapiwnextjs59380b6c_identitypool_59380b6c
 Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) Yes
 Do you want to enable 3rd party authentication providers in your identity pool? No
 Provide a name for your user pool: secureapiwnextjs59380b6c_userpool_59380b6c
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email
 Do you want to add User Pool Groups? No
 Do you want to add an admin queries API? No
 Multifactor authentication (MFA) user login options: OFF
 Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
 Specify an email verification subject: Your verification code
 Specify an email verification message: Your verification code is {####}
 Do you want to override the default password policy for this User Pool? Yes
 Enter the minimum password length for this User Pool: 6
 Select the password character requirements for your userpool:
 Warning: you will not be able to edit these selections.
 What attributes are required for signing up?
 Specify the app's refresh token expiration period (in days): 30
 Do you want to specify the user attributes this app can read and write? No
 Do you want to enable any of the following capabilities?
 Do you want to use an OAuth flow? No
? Do you want to configure Lambda Triggers for Cognito? No
✅ Successfully added auth resource secureapiwnextjs59380b6c59380b6c locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

After adding authentication, the next step is to add storage functionality. We need to add storage to provide a store where we can upload images for our API. This allows us to link the uploaded images with the API records. To do that, run the following command in your terminal:



amplify add storage

You will be prompted with some questions here as well. Accept the values shown below:



➜  secure-api-w-nextjs amplify add storage
? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
✔ Provide a friendly name for your resource that will be used to label this category in the project: · <name>
✔ Provide bucket name: · <name>
✔ Who should have access: · Auth and guest users
✔ What kind of access do you want for Authenticated users? · create/update, read, delete
✔ What kind of access do you want for Guest users? · create/update, read, delete
✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no
✅ Successfully added resource <name> locally

⚠️ If a user is part of a user pool group, run "amplify update storage" to enable IAM group policies for CRUD operations
✅ Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

One more thing we need to add to this app is the API. To do that, run the following command in your terminal:



amplify add api

As usual, you will be prompted with some questions. Accept the values shown below:



➜  secure-api-w-nextjs amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Blank Schema

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

✅ GraphQL schema compiled successfully.

Edit your schema at /Users/chnwamba/Desktop/secure-api-w-nextjs/amplify/backend/api/secureapiwnextjs/schema.graphql or place .graphql files in a directory at /Users/chnwamba/Desktop/secure-api-w-nextjs/amplify/backend/api/secureapiwnextjs/schema
✔ Do you want to edit the schema now? (Y/n) · yes
Edit the file in your editor: /Users/chnwamba/Desktop/secure-api-w-nextjs/amplify/backend/api/secureapiwnextjs/schema.graphql
✅ Successfully added resource secureapiwnextjs locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Let’s enable fine grained user-based authentication so logged in users can access the API without an API key. Run the following command in your terminal:



amplify update api

Accept the values shown below:



➜  secure-api-w-nextjs amplify update api
? Select from one of the below mentioned services: GraphQL

General information
- Name: secureapiwnextjs

Authorization modes
- Default: API key

Conflict detection (required for DataStore)
- Disabled

? Select a setting to edit Authorization modes
? Choose the default authorization type for the API API key
✔ Enter a description for the API key: ·
✔ After how many days from now the API key should expire (1-365): · 7
? Configure additional auth types? Yes
? Choose the additional authorization types you want to configure for the API Amazon Cognito User Pool
Cognito UserPool configuration
Use a Cognito user pool configured as a part of this project.

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

✅ GraphQL schema compiled successfully.

Edit your schema at /Users/chnwamba/Desktop/secure-api-w-nextjs/amplify/backend/api/secureapiwnextjs/schema.graphql or place .graphql files in a directory at /Users/chnwamba/Desktop/secure-api-w-nextjs/amplify/backend/api/secureapiwnextjs/schema

Once you have finished the previous steps, open your schema.graphql file so you can model data for the API. Replace all of it’s content with the following:



type Quantity @model @auth(rules: [{allow: public, operations: [read]}, {allow: owner}]) {
  id: ID!
  value: Float!
  unit: String!
  ingredientID: ID! @index(name: "byIngredient")
  recipeID: ID! @index(name: "byRecipe")
  Ingredient: Ingredient @belongsTo(fields: ["ingredientID"])
  Recipe: Recipe @belongsTo(fields: ["recipeID"])
}
type Ingredient @model @auth(rules: [{allow: public, operations: [read]}, {allow: owner}]) {
  id: ID!
  name: String!
  Quantities: [Quantity] @hasMany(indexName: "byIngredient", fields: ["id"])
}
type Recipe @model @auth(rules: [{allow: public, operations: [read]}, {allow: owner}]) {
  id: ID!
  direction: [AWSJSON!]!
  name: String!
  image: String
  Quantities: [Quantity] @hasMany(indexName: "byRecipe", fields: ["id"])
}

The code above defines three GraphQL types: Quantity, Ingredient, and Recipe.
In the Quantity model, there is an authentication directive, @auth(...) that sets the following rules: everyone (public) can only read (read operation) data from the Quantity type, while only the owner (the signed-in user who created the recipe) can perform create, update, and delete operations.

The Ingredient model has similar authorization rules as the Quantity type. Public users can read the data, but owners have full control over CRUD operations. Additionally, the Ingredient model has a one-to-many relationship with the Quantity type. This means that one ingredient can have multiple quantities, across different recipes.

Similarly, the Recipetype also the same authorization rules as the other types. It also has a one-to-many relationship with the Quantity type, allowing a recipe to be associated with multiple quantities of different ingredients.

I want quantity to act as a join table which will create a many to many relationship between Recipe and Ingredient. To achieve that, use the belongsTo directive to tell Amplify that Quanity belongs to the other models.

After making changes to the schema, open your terminal and run the following command:



amplify push -y

Accept all the default answers to the CLI prompts. The command will deploy all changes in the cloud.

Once the push is completed, we will receive a GraphQL endpoint and a GraphQL API key.

To store the credentials and use it in the Next.js API, create a .env.local file at the root of your project and add your GraphQL endpoint and a GraphQL API key to it:



GRAPHQL_ENDPOINT=YOUR ENDPOINT
GRAPHQL_KEY=YOUR API KEY

To ensure that the Amplify app was created, go to your browser and open the AWS console. You should see the newly created Amplify app there. Click on the app to open it.

Configure Amplify

Now that we have completed our setup, the next step is to setup Amplify in the API project. Since we will be using Amplify in a lot of API files, it is better to create it in a separate file and import it as needed, rather than configuring it in each of those file.

Create a new file named amplify-configure.js in the the lib folder in your project and add the following to it:



import { Amplify } from "aws-amplify";
import awsconfig from "../aws-exports";

export function configureAmplify() {
  Amplify.configure(awsconfig);
}

In the code, we import the Amplify library and also import the awsconfig file, which contains all of our Amplify credentials and was generated when we ran amplify push. Next, we define and export a function named configureAmplify, where we configure Amplify with the details we imported.

This setup ensures that the Amplify library knows about your specific backend setup and can interact with it correctly.

Now that we have finished our configuration settings, the next step is to setup, configure start building our API.
In order to access our API, we need to be signed in to get an access token. To do this, we need to create an API for user authentication.

Set Up API Testing

Before we jump in and start creating the API endpoints, I want to ensure we are set up for testing. Instead of implementing each test instance in Postman, I’ve created a Postman collection that you can download, which contains all the tests you’ll run for the rest of the article.

Once you’ve downloaded the collection, open Postman and import the collection. Select the collection file using a file picket. You should find the new collection on your sidebar after import.

The collection has a variable that stores the base URL so you don’t have to set the base URL for all of the API. You can find it the variable under the variable tab of the collections folder:

Create a New User

Once you’re done with the setup for testing, create a new file named route.js inside the app/api/auth/user directory. Add the following to the file:



import { Auth } from "aws-amplify";
import { configureAmplify } from "@/lib/amplify-configure";
configureAmplify();

export async function POST(request) {
  let user;
  const body = await request.json();
  try {
    user = await Auth.signUp({
      username: body.username,
      password: body.password,
    });
  } catch (error) {
    console.log("Error signing in", error);
  }
  return Response.json(user);
}

In the code above, we import the Auth module from the AWS Amplify library. It provides authentication functions such as sign-up, sign-in, and password reset. Additionally, we import the configureAmplify function which we just created and call it to configure AWS Amplify in this file.

After that, we define an asynchronous function that handles incoming POST requests. Within this function, we declare a variable called user which will be used to store user details. The request body is parsed as JSON and stored in the body constant.

The function then attempts to signup a new user using the signUp method from the Auth object, passing the username and password extracted from the request body. If the sign-up process is successful, the user's details will be stored in the user variable. If an error occurs, it will be logged to the console.

Run the following command to start your Next.js server:



npm run dev`
```

To test the sign-up API, run the Postman SignUp test:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706876928373_CleanShot+2024-02-02+at+12.28.342x.png)

You should get a similar response to the one below:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706876961510_CleanShot+2024-02-02+at+12.29.022x.png)

If you go back to Amplify Studio and click **User management** on the side bar, you should see the user's status listed as **UNCONFIRMED**.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706876983840_CleanShot+2024-02-02+at+12.29.292x.png)

## Handle Sign Up Confirmation

After testing the sign-up API, the next thing we need to do is create an API for confirming user sign-up. Create a new file named `route.js` inside the `app/api/auth/confirm` directory and add the following to the it:

```js
import { Auth } from "aws-amplify";
import { configureAmplify } from "@/lib/amplify-configure";
configureAmplify();

export async function POST(request) {
  let user;
  const body = await request.json();
  try {
    user = await Auth.confirmSignUp(body.username, body.code);
  } catch (error) {
    console.log("Error signing in", error);
  }
  //   return new Response("Hit");
  return Response.json(user);
}
```

In this file, we start by importing the `configureAmplify` function and calling it to configure AWS Amplify. After that, we define an asynchronous function called `POST` which receives a `request`. We then parse the body of the incoming request and assign it to the constant `body`.

We then call the `confirmSignUp` method to confirm a user's signup. Once a user signs up, they receive a confirmation code via email. The `confirmSignUp` method takes in the `username` and `code` as parameters and attempts to confirm the user. If the confirmation is successful, the user's data is returned. Otherwise, any errors encountered are logged to the console.

To test the confirmation API, run the Postman **Confirm Sign Up** test:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877040885_CleanShot+2024-02-02+at+12.30.212x.png)

You should get a success message in the response:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877064281_CleanShot+2024-02-02+at+12.30.492x.png)

Now if you save this and head back to Postman and click the confirm sign up. Replace the code with the code received in your email

Go back to Amplify Studio and click **User management** on the side bar. Refresh the page and you should see the user's status has changed to **CONFIRMED**.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877087406_CleanShot+2024-02-02+at+12.31.122x.png)
## Create the Sign In API

So far, we've covered the steps for confirming a user's signup. Now, we need to create another API route to handle the user's sign-in process. Create a new file named `route.js` inside the `app/api/auth/accessToken` directory and add the following to the it:

```js
import { Auth } from "aws-amplify";
import { configureAmplify } from "@/lib/amplify-configure";
configureAmplify();
export async function POST(request) {
  let user;
  const body = await request.json();
  try {
    user = await Auth.signIn(body.username, body.password);
  } catch (error) {
    console.log("Error signing in", error);
  }
  //   return new Response("Hit");
  return Response.json(user);
}
```

This code is similar to the previous examples we have seen for sign-up and confirm sign-up.
The difference here is that we are calling the **`signIn`** method to authenticate a user using the **username** and **password** they provide. If the sign-in process is successful, the authenticated user's details are returned; otherwise, an error is logged to the console.

To test the sign-in API, run the Postman Sign In test:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877115408_CleanShot+2024-02-02+at+12.31.422x.png)

The response is going to contain an access token which you can find under `signInUserSession.accessToken.jwtToken`:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877132974_CleanShot+2024-02-02+at+12.32.022x.png)

You are going to need the token to test the protected GraphQL API we are going to create next. Copy the token. Click the **Recipe** folder inside the Postman collection and open the **Authorization** Tab. Now set the Authentication Type to **Bearer** and Token to the token you copied.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877162459_CleanShot+2024-02-02+at+12.32.222x.png)

## Create a GraphQL API

The next API we need to create is the GraphQL API. This API will handle all the read and write operations to our database.

We have the option to use [the Amplify JS library](https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js/) and define multiple routes to handle common queries and mutations like Create Recipe, Update Recipe and Read Recipe. Another option is to forward queries directly from the frontend to the endpoint. I went with the forwarding option to allow the client access every single queries and mutation my GraphQL endpoint offers. This is a an option that faster to implement but if you want control over every request, then you can create endpoints for each of them.

Before we create the forwarding API, let’s define a utility function that we can use to send GraphQL queries or mutations to our GraphQL endpoint. Create a file called `graphqlFetch.js` in the `lib` folder. Add the following to it:

```js
export default async function graphqlFetch(query, variables, headers) {
  const GRAPHQL_ENDPOINT = process.env.GRAPHQL_ENDPOINT;
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify({ query, variables }),
  };
  const res = await fetch(GRAPHQL_ENDPOINT, options);
  return await res.json();
}
```

In the code above, we defined an asynchronous function named `graphqlFetch`. This function accepts three parameters: `query`, `variables`, and `headers`.

We retrieve the GraphQL endpoint URL from the environment variables. The request body is then set with the provided `query` and associated `variables`. We make a fetch request to the specified `GRAPHQL_ENDPOINT` using the defined `options`. Finally, the response is converted to JSON format and returned.

Let’s go ahead and create the GraphQL API. Create a new folder called `graphql` in the `api` folder. Inside the `graphql` folder, create a new file called `route.js` and add the following to it:

```js
import { configureAmplify } from "@/lib/amplify-configure";
import graphqlFetch from "@/lib/graphqlFetch";
import { headers } from "next/headers";
configureAmplify();

export async function POST(request) {
  const headersList = headers();
  const accessToken = headersList.get("Authorization").split(" ")[1];
  const body = await request.json();
  const recipes = await graphqlFetch(body.query, body.variables, {
    Authorization: accessToken,
  });
  return Response.json(recipes);
}
```

In the code above, we import the necessary function to configure AWS Amplify. Next, we import our utility function `graphqlFetch`. Lastly, we import the `headers` utility from Next.js, which will be used to access the request headers.

Next, we define and export an asynchronous function named `POST` that handles an incoming request. We call the `headers()` function to retrieve the headers of the incoming request. Next, we extract the `Authorization` token from the header, by splitting the header value and taking the token.

We then parse the incoming request's JSON body to extract the data sent with the request which contains a GraphQL query (`body.query`) and associated variables (`body.variables`) for that query.

Then we use the `graphqlFetch` utility function to make a request to the endpoint. It accepts in the query, associated variables, and the access token for authorization. Finally, we returns the fetched recipes as a JSON response.

Let’s test this out. Head back to Postman and try to create a new recipe.


## Test GraphQL API with Postman

To ensure the GraphQL API handles the common features we need, let’s test that we can create and read recipes with the API.

## Create Recipe

To create a recipe, run the **Create a new Recipe** test:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877201611_CleanShot+2024-02-02+at+12.33.002x.png)

This time, we are not sending JSON, instead we are sending a GraphQL query with a variable for the input.

The response should contain the same input we sent:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877230883_CleanShot+2024-02-02+at+12.33.372x.png)

### Create Ingredients

Now that we have a Recipe, let’s add an ingredients for the recipe. Run the **Create Ingredient for a Recipe** test:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877253030_CleanShot+2024-02-02+at+12.34.002x.png)

You should get the ingredient back as a response:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877273192_CleanShot+2024-02-02+at+12.34.202x.png)

### Connect Ingredient and Recipe with Quantity

Time to populate the Quantity join table we created when we modeled our data. It needs the ingredient ID and recipe ID to relate them and we can also pass in the quantity value, and unit.

Run the Create Ingredient Quantity for a Recipe test in Postman:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877302260_CleanShot+2024-02-02+at+12.34.422x.png)

You should get the following response which not only contains the quantity but also fetches the related ingredient and recipe:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877321008_CleanShot+2024-02-02+at+12.35.082x.png)

### Get a Recipe

Instead of fetching a recipe directly, we can use the `quantitiesByRecipeID`, which Amplify created because we explicitly declared that `Quantity` belongs to both `Recipe` and `Ingredient`. The benefit is that we get the recipe and ingredients alongside the quantity.

Run the **Get a Recipe** test in Postman using the recipe ID from your create recipe response:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877345470_CleanShot+2024-02-02+at+12.35.302x.png)

You should get the following response:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877363502_CleanShot+2024-02-02+at+12.35.512x.png)

## Implement Rate Limiting

At this point, we have successfully secured the API to restrict access to only authenticated users. Before users can access the API, they need to create an account and sign in to obtain an access token.

However, we still need to consider the frequency of access to the API. Even if users have valid access tokens, we want to prevent abuse by limiting the number of requests they can make within a specific timeframe. To do this, we can implement rate limiting using a cache and middleware in Next.js. If a client exceeds this limit, they receive a response indicating they've been rate-limited.

Let’s start with creating a middleware. Create a file names `middleware.js` at the root of your project and add the following to it:

```js
import { LRUCache } from "lru-cache";
import { NextResponse } from "next/server";

const interval = 60 * 1000;
const max = 500;
const tokenCache = new LRUCache({
  max: max,
  ttl: interval,
});

export async function middleware(request) {
  const token = "CACHE_TOKEN";
  const limit = 10;
  const tokenCount = tokenCache.get(token) || [0];
  if (tokenCount[0] === 0) {
    tokenCache.set(token, tokenCount);
  }
  tokenCount[0] += 1;
  const currentUsage = tokenCount[0];
  const isRateLimited = currentUsage >= limit;
  let response;
  if (!isRateLimited) {
    response = NextResponse.next();
    response.headers.set("X-RateLimit-Limit", limit);
    response.headers.set(
      "X-RateLimit-Remaining",
      isRateLimited ? 0 : limit - currentUsage
    );
  } else {
    response = NextResponse.json(
      {
        message: `You can only make ${limit} requests in ${
          interval / 1000
        } seconds`,
      },
      { status: 429 }
    );
    response.headers.set("X-RateLimit-Limit", limit);
    response.headers.set(
      "X-RateLimit-Remaining",
      isRateLimited ? 0 : limit - currentUsage
    );
  }
  return response;
}
```

In the code above, we implemented rate limiting using an LRU (Least Recently Used) cache. First, we import the **LRUCache** class from the **lru-cache** library and the **NextResponse** utility from Next.js to handle server responses.

We set the rate limiting interval to 60 seconds, and the maximum number of items the cache can store to 500. We create an instance of the **tokenCache** with the maximum capacity set to max and a time to live (ttl) of **interval**. This ensures that items stored in the cache will expire after the specified interval.

Next, we define a middleware function that handles incoming requests. We define a constant called `token` to serve as the key for storing and retrieving the request count from the cache.

We also set the rate limit to 10, meaning that a user can make a maximum of 10 requests within the specified interval.

If the request count for the token does not exist, we initialize it with a value of **[0]**. Otherwise, we retrieve its value and increment it for each incoming request, and based on this count, we determine if the client has exceeded the rate limit.

If the rate limit is not exceeded, the middleware continues processing the request. We set two headers, X-RateLimit-Limit and X-RateLimit-Remaining, on the response to inform the user about the maximum number of requests allowed within the interval and how many requests they have left.

If the rate limit is exceeded, the middleware returns a JSON response with a 401 status code and a message informing the user that they have exceeded the rate limit.

We can test by running any of our tests again and you should see that the response headers now include the rate limiting headers we added:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877396632_CleanShot+2024-02-02+at+12.36.232x.png)

If you keep running, the `x-ratelimit-remaining` keeps reducing:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877417501_CleanShot+2024-02-02+at+12.36.452x.png)

When it gets to 0, you will get a 401 error:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877444521_CleanShot+2024-02-02+at+12.37.062x.png)

## Host Your API with AWS Amplify Hosting

We’ve completed the steps to secure our Next.js API using AWS Amplify. It’s now time to deploy our API. Before deploying your API on Amplify, you need to configure the hosting environment. We need to tell Amplify to grab the environmental variables we will set and set it to .env.production file so the Next.js build can pick it up.

Create a file called `amplify.yml` at the root of your project and add the following to it:

```yml
version: 1
backend:
  phases:
    build:
      commands:
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - printenv | grep -e GRAPHQL_ENDPOINT >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

The `printev` command prints all of the current environment variables. Then grep matches the one you want and creates a file called `.env.production` and adds it to the file.

Now we can go ahead and deploy our API. To begin, you need to [push your project to a Git provider such as GitHub](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github). With a git repository, you can use Amplify Hosting to set up continuous delivery automatically. Simply commit all your changes to Git and push your website to your repository. Amplify Hosting will take care of the rest, deploying your website to the cloud and updating it whenever you push changes to your repository.

After pushing to GitHub, run the following command in your terminal:

```sh
`amplify console`
```

Once you run this command will be redirected you to the AWS console. Click on the app name - `secureapiwnextjs` 

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877468551_CleanShot+2024-02-02+at+12.37.322x.png)

Click **Hosting environments**, select **GitHub** and click the **Connect branch** button.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877491612_CleanShot+2024-02-02+at+12.37.572x.png)

Select the repository you just pushed, select the main branch, and click **Next**.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877525162_CleanShot+2024-02-02+at+12.38.292x.png)

On the build settings page, select an environment or Create a new environment. Select an existing service role if you have one, or click the **Create new role** button to create a new role that allows Amplify Hosting to access your resources. Once you have made your selections, click the **Next** button to continue.

Scroll down to the **Advanced settings** section and add your environment variables.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877561430_CleanShot+2024-02-02+at+12.39.092x.png)

Review your settings on the next screen and click the **Save and deploy** button to start the deployment processes. Now you can sit back and watch your app get deployed.

After a successful deployment, copy deployment link and head over to Postman to test.

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877580984_CleanShot+2024-02-02+at+12.39.292x.png)

Copy the URL and replace your base url with it in the collection variable:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877605358_CleanShot+2024-02-02+at+12.39.492x.png)

Then run any of the tests to confirm that the production URL is working:

![](https://paper-attachments.dropboxusercontent.com/s_E617EA7F93B9681FE766F29AC282B54B621B48502D8C7835A022D9597A0DEDE6_1706877630057_CleanShot+2024-02-02+at+12.40.122x.png)

## Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.

```sh
amplify delete
```

## Conclusion

In this article, we’ve seen that we can use Next.js and Amplify Hosting to build a production API with modern features, including rate-limiting, authentication, GraphQL, etc. To learn how to consume the API in an Next.js while leaveraging SSR, check out the [Amplify SSR docs](https://docs.amplify.aws/lib/ssr/q/platform/js/).

Strategies for Crafting High-Performance Web Apps with Smaller Bundle Sizes

Christian Nwamba — Mon, 15 Jan 2024 21:42:11 +0000

In Benjamin Franklin's essay “Advice to a Young Tradesman”, he said, “Remember that time is money”. Digital.com's 2022 website speed statistics found that — Half of customers will abandon their shopping carts if pages don’t load fast enough. This startling statistic underscores the critical importance of web performance in today's online experience.

Web performance has evolved from a technical nice-to-have into a fundamental component of user experience and business success. It's not just about speed; it's about how quickly and smoothly users can interact with content. Google's emphasis on user experience metrics, particularly with the introduction of Core Web Vitals in 2019, has shifted the focus from mere presence to performance excellence. After going through 100 million page views, Portent says that a site that loads in 1 second has a conversion rate 3x higher than a site that loads in 5 seconds.

In this high-stakes environment, one critical aspect often overlooked is the size of web bundles. As web applications grow more complex, the need to manage and optimize bundle size becomes paramount. The journey towards a leaner, faster web experience is not just about adopting new technologies but also about rethinking our approach to building and delivering web content.

In the following sections, we'll delve deeper into what bundle size means, its direct impact on web performance, and strategies for efficient bundling, with a focus on AWS Amplify's approach to optimizing bundle size for better performance.

Understanding Bundle Size and Its Impact

Bundle size refers to the total size of the files delivered to users when they visit a web page. This includes HTML, CSS, JavaScript, images, and other media. In the web development process, these resources are often "bundled" together to streamline deployment and load times. However, larger bundles can significantly slow down website performance because they take longer to download and process, especially on mobile devices or slower internet connections.

Larger bundles can significantly slow down website performance primarily due to increased load times. When a user visits a website, their browser needs to download and process all the bundled resources like JavaScript, CSS, and images. Larger bundles have more data, so they take longer to download, especially on slower internet connections or mobile devices. This delay in loading can lead to a sluggish user experience. Additionally, the browser must also parse and execute JavaScript, which can be time-consuming for larger bundles, further impacting the site's responsiveness and interactivity.

Users tend to have a low tolerance for slow-loading websites, often abandoning them if they don't load quickly enough. This behavior impacts metrics such as bounce rates, page views, and, ultimately, conversions and sales. Additionally, search engines like Google consider page load speed as a ranking factor, so slower websites might rank lower in search results, leading to reduced visibility.

Given these implications, developers need to focus on optimizing bundle size. This involves strategies like minifying files, using compression algorithms, and implementing techniques like lazy loading, which only loads parts of a web page when needed. By reducing bundle size, websites can load faster, providing a better user experience and potentially improving SEO rankings.

In the upcoming sections, we'll explore various strategies for optimizing bundle size and how AWS Amplify implements these strategies to improve web application performance.

Strategies for Efficient Bundling

In optimizing web bundle sizes, a combination of technical strategies and tools is essential.

Modular Code and Tree Shaking

Breaking down code into smaller, reusable modules is crucial. It allows for 'tree shaking', a process where unused code is eliminated. Think of your application as a tree with various branches (modules). Each branch has leaves (functions, variables, classes). In a large tree, not all leaves are necessary for the health of the tree. Tree shaking is the process of shaking the tree (your application) to drop unnecessary leaves (unused code) to keep it healthy and efficient.

Consider a JavaScript module that exports several functions. In a typical scenario, a web application might only use a subset of these exported functions. Traditional bundling processes include the entire set of exports, even the unused ones. Tree shaking effectively identifies and removes these unused exports, reducing the final bundle size.

// Initial Module
export function usedFunction() { ... }
export function unusedFunction() { ... }

// In your application
import { usedFunction } from './module';

// After tree shaking, 'unusedFunction' is not included in the bundle.

The primary benefit of tree shaking is the reduction in the size of the final JavaScript bundle sent to the browser. Smaller bundles mean faster load times, improved performance, and enhanced user experience, especially crucial for users on mobile devices or slow internet connections.

Lazy Loading with Dynamic Imports

Lazy loading is a technique that enhances web performance by loading resources only when they are needed. This is particularly useful for large-scale applications where loading everything upfront can lead to significant delays. By deferring the loading of non-critical resources, such as images, scripts, or even entire modules, until the point of use, lazy loading can improve initial load times and reduce the strain on network resources.

Dynamic imports in JavaScript allow developers to implement lazy loading efficiently. The import() function can be used to load a module dynamically, and this operation returns a promise. The module is only fetched when the import() function is called, which is typically triggered by a user action or other specific conditions.

// Using dynamic import() for lazy loading a module
import('path/to/module').then((module) => {
  // Module is now loaded and can be used
  module.someFunction();
});

Lazy loading with dynamic imports significantly improves user experience, particularly for users with slower internet connections or limited bandwidth. It ensures that users are not overwhelmed with long wait times by loading only what's necessary when it's necessary.

Analyzing Bundles with Webpack Bundle Analyzer

Webpack Bundle Analyzer is a powerful tool for visualizing the size of webpack output files. It provides an interactive treemap visualization that makes it easier to understand the size of different parts of a bundled application. By using this tool, developers can identify which parts of their code are contributing the most to the bundle size. This insight is crucial for pinpointing large chunks of code or unnecessary dependencies that could be optimized or removed to reduce the overall size of the application.

This tool is particularly useful in complex projects where it's challenging to manually track down sources of bloat in the code.

Code Splitting

Code splitting is a technique where the main bundle of an application is split into smaller chunks that are loaded as needed, rather than all at once. This strategy is particularly beneficial for large applications, where the volume of code can cause significant load times if it were all to be loaded upfront.

Code splitting could be considered at multiple granularities. At its simplest, it might mean separating application code from third-party library code. More sophisticated approaches involve splitting code at the component or route level, ensuring that users download only the code necessary for what they are currently engaging with. In React, for instance, this involves using React.lazy for component-level code splitting, alongside Suspense for handling the loading interface, which would be something like this:

import { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Frameworks like Next.js take this a step further, automating route-based code splitting so that developers don't have to manually define split points. The framework takes care of loading the JavaScript necessary for rendering the page when a new route is visited.

For a complex application, the implementation of code splitting can lead to significantly improved load times, reducing the amount of code processed and rendered during the initial load. This not only shortens the time to interactive but also conservatively uses bandwidth, an important consideration for users on limited or metered connections.

AWS Amplify's Approach to Bundle Size Reduction

AWS Amplify is widely used for building full-stack web applications, offering a range of functionalities, including authentication, storage, and internationalization. However, a significant concern among developers has been the large bundle size of the Amplify library, as highlighted in community discussions, such as a GitHub issue raised in April 2022. The issue emphasized that the library, especially for services like Auth and S3 storage, contributed heavily to the overall bundle size of projects.

Responding to these concerns, the AWS Amplify team embarked on a technical mission to optimize the library. They focused on refining their approach to dependencies and leveraging more native browser APIs like Fetch, significantly reducing the reliance on heavier external libraries like [Axios(https://axios-http.com/docs/intro). This strategic shift led to a substantial reduction in the bundle size – by 42% for Auth, 41% for Notifications and Analytics, and 45% for Storage.

The introduction of functional APIs in Amplify v6 has contributed to more efficient bundling. With these APIs, only the imported functionalities impact the bundle size. For instance, in an app using a subset of APIs from Auth and Storage, there was a reported 59% reduction in bundle size from version 5 to version 6.

These improvements demonstrate Amplify's commitment to addressing performance concerns and enhancing user experience by optimizing its library's efficiency. The changes not only benefit current users but also make Amplify a more attractive option for developers prioritizing performance in their projects.

Amplify Your Web Performance

Today, web performance is a critical factor, not just an afterthought. Developers need to be vigilant about the bundle size of external services or dependencies, as these can significantly impact application performance.

AWS Amplify, with its recent strides in optimizing bundle size, emerges as a strong contender for full-stack web projects. By choosing Amplify, developers can leverage the benefits of an optimized, efficient library, ensuring better performance and a smoother user experience in their applications. This choice aligns with a performance-focused development approach, where efficient bundles play a key role in the success of web projects.

Conclusion

The future of bundle size reduction in web performance is increasingly focused on advanced tools like SWC and smarter coding practices. SWC, a Rust-based tool, is gaining popularity for its high-speed capabilities in JavaScript and TypeScript processing. Its efficiency in compilation, bundling, minification, and transformation can lead to significantly leaner applications.

Simultaneously, the web development community is emphasizing smarter coding practices. This involves leveraging native web platform capabilities and minimizing reliance on heavy frameworks. By starting with HTML and CSS and using JavaScript only when necessary, developers can significantly reduce their dependency on large libraries, leading to lighter bundle sizes. Such practices not only enhance performance but also align with modern web standards, promoting more efficient and sustainable development approaches.

In this article, we've delved into various strategies such as modular code and tree shaking, lazy loading, bundle analysis, and code splitting, each contributing to more efficient, faster-loading web applications. The case study of AWS Amplify underscores the importance of this approach, showcasing how a significant reduction in bundle size can lead to better performance and enhanced user experiences.

Can Next.js Handle 5000 Pages?

Christian Nwamba — Mon, 30 Oct 2023 18:55:24 +0000

I wanted to share an experiment that drives Next.js 13 SSR and SSG features to its limit. I built a website with 5000 SSR pages to see how Next.js will perform locally and in production. I work on the AWS Amplify service team, and I wanted to use our hosting service to build and deploy these pages and make sure it can handle a high page and image count. How much difference does it make to use static params vs dynamic params? Which one is optimal if you need a fast build time? Which one is optimal if you don’t care about build time but want a blazing fast website? Let’s find out.

By the end of this article, you'll see how I generated 5000 test images and records, uploaded them for delivery to Amazon S3 and Dynamo DB using AWS Amplify, built a Next.js app to fetch the data and images, render them on screen, deployed to Amplify Hosting and took record of performance impact and differences.

Sourcing and Uploading 5000 Pieces of Data

TL;DR: If you prefer not to follow the process outlined in this section, you can follow these links to access my 5000 records and 5000 images.

How do you find 5k Images?
The first challenge I faced was finding 5000 images for each of the pages. Instead of relying on datasets from platforms like Kaggle, I used a more direct approach. I downloaded ten images from Unsplash and kept them in a local folder called 5k_src.

If you’ve used Unsplash, you would recall that these raw images are typically high-resolution and large, often exceeding 1MB. I optimized each image to reduce its file size. Make sure you have your own set of 10 optimized images in a folder of your choice.

Once I had 5000 images, I wrote a script to duplicate these images until I had a total of 5000. It wasn't important to me that each image be unique, so I decided to use ten different images and duplicate them until I had 5000 images. To take advantage of this script, I would need to create a src folder for the 10 images and the destination folder for the 5k images. Create a folder called demo and add two folders to it: 5k_dest, 5k_src.

Switch into the demo folder and run this CLI script in your terminal to duplicate the images:

dest="5K_dest"
src="5K_src"
for i in {1..500}; do cp "$src/b.jpg" "$dest/b$i.jpg"; done

The script sets a destination folder named 5K_dest to store all the copied images. It also specifies a source folder, 5K_src, containing the original image. Then, it runs a loop for 500 iterations.

Each iteration duplicates the image named b.jpg from the source folder and saves the duplicate in the destination folder with a unique name. The new names include a number (the value of i) that increases with each iteration, resulting in images named "b1.jpg", "b2.jpg", and so on up to "b500.jpg".

I used this approach to ensure that each image has a unique filename. By running this script for each image, I got a total of 5000 images. To get the 5000 duplicate images, you can run the script on each image in your 5k_src folder.

How do you find 5k Records?

Next, I needed to generate a list of random records. I used a tool called Mocaroo, which allows you to generate at most 1000 rows of records at a time for a free account.

After accessing Mocaroo, I cleared all of its default data and added new fields as shown in the image below.

After adding the new fields, I set the Rows field to 1000 which is the max Mockaroo can generate. Once I had that setup, I clicked Generate Data 5 times to generate a 5 csv files with each containing 5000 records.

Now to merge all of these 5 csv files, I had to turn to Google Sheets. If you are following along, you can do the same with the following steps:

Open Google Sheets.
Create a new file.
Click on "File" at the top left.
Click “Import” and select "Upload" and choose the first csv file.
Once the first csv file is done uploading, repeat the same step but when the pop up option for merging appears, import the rest to the same sheet and append to the end of the sheet.

Once I was done importing, I used Autofill to add the image names to each record. This was fine since the images are sequential.

How do you upload 5k Images to the Cloud?

The next thing I needed to do was upload the 5k images to the cloud, specifically Amazon Simple Storage Service (Amazon S3), and I had to first create an AWS Amplify project. To do that, follow these steps:

Navigate to your AWS console and search for AWS Amplify.
Select AWS Amplify to open the Amplify Console.
In the upper right-hand corner, select New app and choose Build an app from the dropdown menu.

Give the app a name (I called mine 5kpages) and click Confirm Deployment to deploy it.

Once the deployment is completed, click the Launch Studio button to open the Amplify studio.

The next thing I needed to do was create a storage instance to store the images. However, before I could do that, I needed to set up authentication.

To proceed with the authentication setup, click the Set up button. You can leave all the default selections as we won't be using authentication for this app; it is only required for using storage. Go ahead and click the Deploy button, acknowledge the warning, and select Confirm Deployment.

The authentication deployment process should take a minute or two. Once completed, you will see a confirmation message stating that authentication has been successfully deployed.

After setting up authentication, I set up storage and created a new S3 bucket. To do this, select the Storage option in the setup menu on the screen's left side.

In the authorization settings, ensure that signed-in users have permission to upload, view, and delete files, while guest users can only view and delete files. Finally, click the Create bucket button.

To view the bucket, you can navigate back to your Amplify console. Search for s3 and then select it.

I called my bucket 5kpages. Select yours to open it.

To upload the images to the bucket, click the Upload button.

To upload the 5k images to the S3 bucket I dragged and dropped the 5k_dest folder onto the page, and clicked the Upload button as shown below.

It took some time to upload all the images.

Once the upload is complete, return to the Amplify studio and select the File browser option in the side menu. In the public folder, you will find the 5k_dest folder containing all 5,000 images. You can browse through the pages to view the images.

How do you upload 5k Records to the Cloud?
After I uploaded the images, the next step was to upload the 5,000 records to Amazon DynamoDB. To do this, follow these steps:

Go back to your Amplify console.
Select Data from the side menu.
Click on the "+ Add model" button.
Fill in the fields as shown in the image below.
After filling in the fields, click the Save and Deploy button.

After creating the model, go to your Amplify console and search for DynamoDB. Click Tables on the side menu, you will find a product table with an item count of 0. Copy the name of the table and head over to your terminal to create a Node app.

Before creating the Node app, I needed to downloaded the 5kproducts.csv records file from Google Sheets.
To download the file, follow these steps:

Open the Google Sheets containing the 5000 records.
Click on "File" at the top left.
Select "Download" and then choose "Download as CSV".

After downloading the file, create a new folder and name it 5kdyno or any other preferred name. Place the downloaded CSV file inside this folder. Next, create a package.json file inside the folder and add the following to it:

{
  "name": "5kdyno",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-sdk/client-dynamodb": "^3.423.0",
    "@aws-sdk/lib-dynamodb": "^3.423.0",
    "aws-sdk": "^2.1468.0",
    "csv-parse": "^5.5.0",
    "csv-reader": "^1.0.12",
    "uuid": "^9.0.1"
  },
  "type": "module"
}

Run the following command in your terminal to install those dependencies:

npm install

Create an index.js file inside the folder and add the following to it:

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { PutCommand, DynamoDBDocumentClient } from "@aws-sdk/lib-dynamodb";
import { v4 } from "uuid";

import { parse } from "csv-parse";
import { createReadStream } from "fs";

const client = new DynamoDBClient({});
const docClient = DynamoDBDocumentClient.from(client);

export const main = async () => {
  const parser = createReadStream("5kproducts.csv").pipe(parse());
  for await (const row of parser) {
    console.log(row);
    const command = new PutCommand({
      TableName: "Product-f6gl4tj2gzffyfynoogu-staging",
      Item: {
        id: v4(),
        createdAt: new Date().toJSON(),
        desription: row[1],
        img: row[6],
        name: row[0],
        price: row[4],
        quantity: row[2],
        size: row[3],
        updatedAt: new Date().toJSON(),
        __typename: "Product",
      },
    });
    const response = await docClient.send(command);
    console.log(response);
  }
};
main();

The first thing you might notice is that I am not passing any credentials to the Dynamo DB client. You can checkout this AWS doc to guide you on how to set up credentials for your computer.

The next thing I did was to create an instance of the DynamoDBClient and use this instance to create a DynamoDBDocumentClient. This client provides a higher-level interface for working with DynamoDB.

Next, I declared an asynchronous function called main, and set up a stream to read the file 5kproducts.csv row by row and pipe this stream into a CSV parser. Afterward, I loop through each row of the CSV file as it is parsed and log each of them to the console.

The PutCommand creates a write operation to the DynamoDB table using the rows from the csv. Finally I sent the write operation to Dynamo DB using the client

Don’t forget to replace the TableName with the name of the table you created.

Now, if you open your terminal and run the command node index.js, you will see that it is writing to the specified table.

This should take a few minutes to complete, but once it is done, go back to DynamoDB and refresh the page. Click on "Explore table items," and you should be able to see the items in the database.

Now, if you go back to Amplify and click the "Content" section from the side menu, you will be able to see the incoming content.

Rendering Data on the Browser

After uploading the images and records to the cloud, the next thing I needed to do was to display the list of products on a website. To accomplish this, I created a Next.js app. Instead of starting from scratch, I created a starter project that includes Tailwind configurations and other setups. You can clone it by running the following Degit command in your terminal:

npx degit christiannwamba/5kpages#starter

The starter project contains three components and a ui/button component. One of the components is the ProductList, which receives items, loops through them, and renders them. Within the ProductList component, the S3Image component is used to fetch images from S3. Additionally, the project includes a Pagination component that manages pagination.

After that, run the following command to install the dependencies:

npm install

The next thing I did was to configure Amplify so we can access the data and images we uploaded. To do that, go back to Amplify Studio, and copy the pull command displayed.

From your projects directory, paste the copied command into the terminal and then execute the command you copied.

When you run the command, you will be redirected to your web browser to grant the CLI access. Once there, click 'Yes' to authenticate with Amplify Studio.

After that, return to the CLI. Here, you will be asked a series of questions to gather essential details about your project's configuration. Accept the default values highlighted in the image below:

Next, I configured Next.js so that it recognizes the source domain for the images. To do that, add the following to your next.config.js file:

/** @type {import('next').NextConfig} */

const nextConfig = {
  images: {
    domains: [
      "5kproducts-storage-dd7c40fc142146-staging.s3.us-east-1.amazonaws.com",
    ],
  },
};

module.exports = nextConfig;

Don’t forget to replace the domains with the one you copied from your s3 bucket.

Once I had set up an Amplify project, I needed to generate the code for the GraphQL Operations that we can use to interact with our data.

To generate these operations, run the following command at the root of your project:

amplify add codegen

Accept the default values highlighted in the image below:

This command will generate the GraphQL operations and save them in the graphql directory within src/graphql. The generated operations are ready to be imported into your components for seamless interaction with your API.

To fetch and render the list of products, add the following to your app/page.js file:

import { API } from "aws-amplify";

import Pagination from "@/components/Pagination";
import ProductList from "@/components/ProductList";
import * as queries from "../src/graphql/queries";

async function fetchData(nextToken, prevToken, action) {
  const variables = {
    limit: 10,
  };
  if (action == "next" && nextToken) variables.nextToken = nextToken;
  if (action == "prev" && prevToken) variables.nextToken = prevToken;

  const allProducts = await API.graphql({
    query: queries.listProducts,
    variables,
  });

  return allProducts.data.listProducts;
}

async function Home({ searchParams }) {
  const nextToken = searchParams.nextToken;
  const prevToken = nextToken;
  const action = searchParams.action;

  const products = await fetchData(nextToken, prevToken, action);

  return (
    <div className="w-[800px] mx-auto py-24">
      <h1 className="text-2xl text-center pb-8">Products</h1>
      <ProductList items={products.items} />
      <Pagination nextToken={products.nextToken} prevToken={prevToken} />
    </div>
  );
}

export default Home;

In this file, I'm importing several things. First, I import API from the AWS Amplify library. This allows me to interact with the GraphQL API. I also import the Pagination and ProductList components, which are React components used to display the list of products and provide pagination functionality, respectively. Additionally, I import queries from the ../src/graphql/ queries file.

Next, I define an asynchronous function called fetchData that fetches product data based on provided parameters. In the function, I define an object called variables with a limit of 10, indicating that I want to fetch 10 products at a time.

I then modify variables for pagination based on the provided action and token. If the action is next and nextToken is provided, variables.nextToken is set to the value of nextToken, which fetches the next set of products. If the action is prev and prevToken is provided, it uses the prevToken to fetch the previous set of products.

The function then makes a GraphQL call using the queries.listProducts query and the variables to fetch the products data. Finally, it returns the fetched products list.

Next, I define the Home component, which serves as the main React component for displaying the product list on the homepage. This component is asynchronous and retrieves nextToken, prevToken, and action from the searchParams.
To fetch the required products list, the component calls the fetchData function with these parameters.

The returned JSX includes the page title, the list of fetched products passed to the ProductList component, and the Pagination component for handling pagination controls.

If you go to your browser now, you will see the displayed products. If you click the Next button, you can view more products, and the 'previous' button will show you the Previous set of products.

Render Dynamic Page with Dynamic Params
I wanted to explore both dynamic parameters and statically generated pages and also compare the performance difference.

For dynamic parameters, we need to receive the id as a parameter. With this, we can start building the page to render individual product items.

Create a new folder called [id] in your app folder. Inside the [id] folder, create a page.js file and add the following code to it:

import { API } from "aws-amplify";
import * as queries from "@/src/graphql/queries";
import S3Image from "@/components/S3Image";
import Link from "next/link";
import { Button } from "@/components/ui/button";

async function Product({ params }) {
  console.log(params);
  const variables = {
    id: params.id,
  };
  const res = await API.graphql({
    query: queries.getProduct,
    variables,
  });

  const product = res.data.getProduct;
  return (
    <div className=" p-4 w-1/2">
      <div className="flex items-center mb-4">
        <div className="h-96 w-80 bg-slate-400 relative">
          <S3Image imageName={product.img} />
        </div>
        <div className="ml-4">
          <p className="text-lg font-semibold pb-2 text-slate-800">
            ${product.price}
          </p>
          <p className="text-xs">{product.quantity} left</p>
          <h3 className="text-lg">{product.name}</h3>
          <div>{product.desription}</div>

          <Link href={`/`} className="mt-8 block">
            <Button className="w-full">Go back</Button>
          </Link>
        </div>
      </div>
    </div>
  );
}

export default Product;
export const revalidate = 60 * 50;

The file begins with several imports. The API import is from the AWS Amplify library and is used to interact with the GraphQL API. The queries import is used to fetch details of a product. The S3Image import is used to display images stored in Amazon S3. The Link import from next/link is used for client-side transitions between routes. Lastly, the Button component is imported for UI purposes.

Next, I define an asynchronous component named Product. It begins by defining a variables object and using the id from params to set the variables. This id is used to query a specific product.

Next, the function makes a GraphQL call using the queries.getProduct query and the variables. The response contains the product data, which is extracted and stored in the product constant.

Finally, the returned JSX includes the following for each product: An image of the product using the S3Image component, the product's price the quantity left in stock, the product's name, the product's description, and a button that, when clicked, navigates the user back to the home page.

I also defined a constant named revalidate that specifies how often (50 minutes) Next.js should re-check for new data on a page. It is important to revalidate Next.js to ensure that your responses are not cached for too long. If you have content that needs to change frequently, caching can present challenges in keeping the content fresh.

In this demo, the main issue with caching is related to using Amazon S3 for image storage. S3 does not provide a public URL directly. Even if it gives you a public URL, it is signed with a token that expires. Once the token expires, you can no longer access the image using the same URL and must request a new token.

This means that if Next.js caches your response and holds the URL, it will not know that the image is now invalid. When you try to render the image, it will not display anything. Unless you ask Next.js to refresh its cache and make a fresh request to storage for a new URL.

To address this, I have set the expiry time for the S3 images to one hour and configured Next.js to revalidate the image after 50 minutes. This way, Next.js makes a fetch request before the S3 images expire and invalidates the cache and show the updated page.

Render Dynamic Page with Static Params
So far, we’ve seen how to achieve dynamic rendering with dynamic parameters. Now, let’s explore how to achieve dynamic rendering with static parameters.

To do this, go to your code editor and commit changes you’ve made to the main branch. To create a new branch, run the following command in your terminal:

git checkout -b static

Open your app/[id]/page.js and add following code to the bottom of the file:

export async function generateStaticParams() {
  const variables = {
    limit: 5000,
  };

  const allProducts = await API.graphql({
    query: queries.listProducts,
    variables,
  });
  const items = allProducts.data.listProducts.items;

  return items.map((item) => ({
    id: item.id,
  }));
}

This function fetches a list of all products (5000 of them) using the queries.listProducts GraphQL query. It then maps over the list of products and extracts the IDs.
The returned array of IDs would be used by Next.js for static generation at build time, creating a pre-rendered page for each product ID.

If you visit your browser, refresh the page, and randomly click on items, you will notice a significant improvement in loading speed which is a result of the implementation of static generation.

Building Locally

Now let's take stock of what we've done so far and compare the build times for dynamic parameters versus static parameters.

To switch back to the main branch, run the following command in your terminal:

git checkout main

Run the following command in your terminal to see the build time for dynamic parameters:

npm run build

As shown in the image below, the build process generated only 5 static pages and was completed in 12 seconds.

Let’s do the same for static parameters. Run the following command in your terminal:

git checkout static
npm run build

You should notice that it is iterating and attempting to build each of the pages. In the image below, you can see that the build time took 3 minutes, which is equivalent to 180 seconds.

Building in Production

The next step is to deploy to production and test. Return to your code editor and publish the static branch. After that is done, publish the main branch as well.

Go to your AWS console and search AWS Amplify and select it from the list of services. Next, select the 5kpages app.

Select Hosting environments.

Select GitHub or your Git provider on the next page and click the Connect branch button.

Select the repository you intend to host, select the main branch for dynamic parameters, and click the Next button to proceed.

In the build settings page, select an environment or Create a new environment. Select an existing service role if you have one, or click the Create new role button to create a new role that allows Amplify Hosting to access your resources. Once you have made your selections, click the Next button to continue.

Review your Repository details and your App settings then click Save and deploy.

Dev and User Experience Insights

While I was building and deploying static and dynamic versions of the app, I was keeping track of a few numbers. I wanted to see if there are any useful insights when I consider the following:

How fast is the build time?
What is the perceived load speed for a visitor?

Dev Experience

How fast is the build time?

Measuring the build time was easy — iTerm (local) and AWS Amplify (production) had timestamps during the build and all I needed to do was subtract the times. The following table indicates that that dynamic parameters are faster than statically generated pages at build time.

	Build Time (seconds)	Deploy Time (seconds)
Dynamic Params	12	58
Static Params	180	240

(The deploy time accounted for only building the Next.js app and does not include provisioning and backend build time.)

The reason for the difference in build vs deploy time is clear — Next.js has to build each of the 5000 pages if I want it to be statically generated.

Develop in Dynamic Mode, Release in Static Mode

A strategy I stumbled upon that no one talks about is to not call the generateStaticParams when you are testing things out in a non-production environment. Waiting for 5k pages to build on a staging server is a painful developer experience.

My recommendation is to only enable generateStaticParams in production since you’d hardly build production frequently.

User Experience

What is the perceived load speed for a visitor?

To get insights on what difference it makes to have a statically generated site and a dynamic site, I analyzed the website with PageSpeed Insights. Here’s my log for the server and cache speed index of the home page, dynamic params page, and statically generated pages.

For context, I analyzed 6 websites from the Next.js Showcase and the average Speed Index was 2.6 seconds.

	Home (seconds)	Dynamic Params (seconds)	Static Params (seconds)
Speed Index (Server)	3.7	2.9	2.4
Speed Index (Cache)	3.1	2.1	1.6

(Server speed index was taken immediately after deployment was successful. Cache speed index was taken by analyzing again)

My first observation was that the home pages were relatively slower than the dynamic pages because they have more images to render.

As expected, statically generated pages load 1.2x faster than dynamic parameters. In a real world scenario, a page will have more text, font, and images compared to my demo. So take 1.2x with a pinch of salt because the difference will definitely be more significant in such cases.

Other User Experience Metrics

Speed Index gives you a wholistic view but it is not enough to consider when you measuring your site’s performance. What is speed is a great article to understand why and what to also consider. Taking this into consideration, I decided to leave a dump of all the images from PageSpeed Insights in case you want to dig deeper.

Home page from server:

Dynamic params page from server:

Statically generated page from server:

Home page from cache:

Dynamic params page from cache:

Static params page from cache:

Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.

amplify delete

My Opinion

This was an insightful experiment for me and it led to some interesting conclusions that will guide me in the next few months when using Next.js.

For my customers’ experience: I will always default to having statically generated pages in production with the exception of when the dynamic pages content changes frequently. Additionally, Amplify Hosting met my expectation by building all of the pages with no errors and no additional delays.

For my dev experience: I am going to ignore static page generation when working on dynamic pages. It’s ok for it to be an afterthought since Next.js has designed generateStaticParams to be pluggable. If you’d like to learn more about Amplify hosting, here is a guide on how to get started with it.

How a URL Shortener Works and How to Build One with Next.js

Christian Nwamba — Mon, 11 Sep 2023 12:55:35 +0000

In web development, CRUD (create, read, update, delete) operations are essential, but they only scratch the surface of what's possible. To build applications tailored to specific use cases, it's often necessary to create custom business logic.

This article aims to share a few skills that can help you build apps beyond creating, reading, updating, and deleting. If you’ve used AWS Amplify, you know you get a CRUD API out of the box once you create a table but I wanted to give you more than just that.

A URL shortener is an excellent example of an application that requires a custom solution. It's not just about storing and retrieving data, but also about generating a unique, shorter representation of a given URL, and redirecting users to the corresponding long URL when accessed.

By the end of this article, you should be able to write custom logic that communicates with your Amplify GraphQL API. We will write the custom logic in a Next.js API which you can deploy to AWS Amplify.

Prerequisites

To follow this tutorial, you'll need an AWS account. If you don't have one, you can create an account here. This tutorial also assumes that you're familiar with the basics of both JavaScript/ES6 and React.

Create an Amplify Project

To create an Amplify project, navigate to your AWS console, search for AWS Amplify, and select it
to open the Amplify Console.

If this is your first Amplify app, scroll to the bottom of the page in the Amplify Studio section, select Get started. Name your app, and select Confirm Deployment.

If you’ve created an Amplify App in the past, follow the steps below:

Select New app in the upper right-hand corner, and select Build an app from the dropdown menu.

Give the app a name, and click the Confirm Deployment to deploy.

Once the deployment is completed, click the Launch Studio button to launch the Amplify studio.

AWS Amplify Studio is a visual development environment tailored for building fullstack web and mobile apps. One of its standout features is the ease with which you can set up backend resources for various tasks, such as authentication and managing customer data.

It also has a Content Management System (CMS), which is incredibly useful for viewing and managing user data.

You should now see the Home menu for your application. To learn more, see the Amplify Studio introduction.

Create a Data Model

Next, we need to define a data model to store a short code and long url. To ensure that a short URL always redirects to the correct long URL, it's important to store the short-long URL pairs in a persistent location. This allows for quick retrieval of the original URL when a user navigates to the short URL, as we can efficiently query for the original URL based on the short code.

Amplify provides the ability to create data models, which represent the structure of the data your application will work with. The Studio data model designer provides a visual way to achieve this.

Follow the steps below to create a data model for your app:

On the Setup menu on the left, select Data, and select Add model.

As seen in the image below, we call our data model URL. Click the Add a field link, and in the field that appears, and a a field name called long to store the long URL.
Add another field name called short to store the short URL.
Select the Save and Deploy button. Acknowledge the warning, and select Deploy.

The deployment should take a few minutes, but once it is completed, you should see a message saying you've successfully deployed the data model.

Get Environment Variables

After successfully deploying our data model in the Amplify Studio, we need to set up environment variables to enable secure communication between our Next.js application and AWS AppSync back-end. For this, we need our GraphQL endpoint and the corresponding API key.

Follow these steps to get your credentials:

Log into the AWS Console and navigate to the AWS AppSync service.
Select the API for your application.

On the left-hand side menu, click on Settings.
Here, you'll find your GraphQL endpoint and your API Key.

Store these values securely. They values will be used as environment variables later in our application.

Set up Next.js Project

To keep the focus of this guide on building our chat app, I'll skip the steps in setting up certain dependencies, such as
Tailwind CSS for styling, Nano ID for generating strings used to create a short URL version of an original URL and validator for implement URL validation.

Run the following command from your preferred directory to clone a Next.js starter project that already includes these dependencies.



npx degit christiannwamba/urlshortener#starter urlshortener

Run the following command to navigate into the urlshortner directory, install the dependencies, and start up your development server:



cd urlshortner
npm install
npm run dev

This lets you see the output generated by the build. You can see the running app by navigating to http://localhost:3000.

The pages/index.js file contains the basic structure for our URL shortener app. It imports React, and Next.js's Link component for navigation.

It renders an input field where users can enter the URL they wish to shorten, with Tailwind CSS utility classes providing styling. It also renders a section to display the original and shortened URLs. However, this is currently a static display and will be replaced with dynamic data as we build out the functionality of our app.

At the root of your project, create a file called .env and add the following to it:



GRAPHQL_ENDPOINT=REPLACE_WITH_YOUR_GRAPHQL_ENDPOINT
GRAPHQL_KEY=REPLACE_WITH_YOUR_GRAPHQL_KEY

URL Validation

When building a URL shortener, ensuring that the URLs being input are valid is important. Not every string is a valid URL, and users can make mistakes while entering URLs or even input strings that are not URLs at all. By not validating the URLs, we risk our application breaking or not behaving as expected.

In this section, we will implement URL validation using a third-party library — validator, to help ensure the input is a valid URL. Update the code in your pages/index.js file to match the following:



import React from "react";
import Link from "next/link";
// Import this
import isURL from "validator/lib/isURL";
function Home() {
  // Add this
  const [isURLValid, setIsURLValid] = React.useState(true);
  return (
    <main className="grid place-items-center h-screen">
      <div className="bg-cyan-900 w-full grid place-content-center py-20">
        <div>
          <h1 className="text-center text-4xl text-white">URL Shortener</h1>
          <div></div>
          <div className="w w-96">
            <div className="relative mt-4">
              {/* Update input element to match the following */}
              <input
                type="text"
                name="search"
                placeholder="Enter link here"
                id="search"
                className={`block w-full rounded-md border-0 py-3 px-3 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset outline-none focus:ring-cyan-600 ${
                  !isURLValid && "focus:ring-red-600 ring-red-600"
                } `}
                onKeyUp={async (e) => {
                  if (e.key === "Enter") {
                    if (isURL(e.target.value)) {
                      setIsURLValid(true);
                    } else {
                      setIsURLValid(false);
                    }
                  }
                }}
              />
              <div className="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                <kbd className="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">
                  Enter
                </kbd>
              </div>
            </div>
            {true && (
              <div className="flex gap-4 mt-6 p-5 rounded-md border border-cyan-500 bg-cyan-50 items-center">
                <p className="line-clamp-1">Long URL</p>
                <p className="text-cyan-700">
                  <Link href={`/`}> lg.sh/shorturl</Link>
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}
export default Home;

In the code above, we import the Link component to handle the application's internal routing and the isURL function from the validator library. isURL is a function that checks if a string is a valid URL.

In the Home function, we initialized a state variable — isURLValid. It stores a boolean value and keeps track of whether the URL provided by the user is valid or not.

Next, we add the onKeyUp event handler to our input element. It checks whether the URL entered by the user is valid every time the user presses the 'Enter' key. If the URL is valid, the isURLValid state is set to true; otherwise, it is set to false. We also use this validation state to dynamically style the appearance of the input field to provide real-time feedback to the user about the validity of their input.

Generating the Short URL

Next, Let’s create a Next.js API route that generates the short URL. To do this, go to your pages/api folder and create a new file called shorten.js. Then add the following code to it:



import { customAlphabet, urlAlphabet } from "nanoid";
export default async function handler(req, res) {
  const GRAPHQL_ENDPOINT = process.env.ADD_YOUR_API_ENDPOINT;
  const GRAPHQL_API_KEY = process.env.ADD_YOUR_API_KEY;

  const shortCode = customAlphabet(urlAlphabet, 5)();

  const query = /* GraphQL */ `
    mutation CREATE_URL($input: CreateURLInput!) {
      createURL(input: $input) {
        long
        short
      }
    }
  `;
  const variables = {
    input: {
      long: req.body.longUrl,
      short: shortCode,
    },
  };
  const options = {
    method: "POST",
    headers: {
      "x-api-key": GRAPHQL_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  };
  const response = {};
  try {
    const res = await fetch(GRAPHQL_ENDPOINT, options);
    response.data = await res.json();
    response.statusCode = 200;
    if (response.data.errors) response.statusCode = 400;
  } catch (error) {
    response.statusCode = 400;
    response.data = {
      errors: [
        {
          message: error.message,
          stack: error.stack,
        },
      ],
    };
  }
  res.status(response.statusCode).json(response.data);
}

Here, we are importing two specific functions from the nanoid library:

customAlphabet: is a function that allows us to create a unique string generator, and we can specify the alphabet and size for the unique string.
urlAlphabet is a predefined alphabet designed to generate unique URL-friendly strings.

We use this to generate a unique, URL-friendly string of length 5. This string is used to create the short URL version of the original URL.

The function handler is an async function that accepts a request (req) and a response (res) as parameters. In it, we defined two environment variables, GRAPHQL_ENDPOINT, and GRAPHQL_API_KEY. Replace their values with your API endpoint and API key credentials.

Next, we define a query that contains a GraphQL mutation named CREATE_URL. This mutation accepts an input of type CreateURLInput. The mutation will create a new URL entry and return its long and short values.

We define the mutation variables, including the original URL (long) and the generated short code (short). We also define the options for the fetch request to include the request method as POST, set the headers (including the API key), and convert the query and variables objects into a JSON string for the request body.

Finally, we make an HTTP request to the GraphQL endpoint with the defined options and process its response. If the request is successful, the response's data and statusCode are updated accordingly. If there are errors in the response data, the status code is set to 400.

Now update the code in your pages/index.js file to look like so:



import React from "react";
import Link from "next/link";
import isURL from "validator/lib/isURL";

function Home() {
  const [isValidURL, setIsValidURL] = React.useState(true);

  //Add this
  const [url, setURL] = React.useState({ long: "", short: "" });

  // Add this
  async function submitUrl(url) {
    const res = await fetch("/api/shorten", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(url),
    });
    const data = await res.json();
    console.log(data);
    return data.data.createURL;
  }

  return (
    <main className="grid place-items-center h-screen">
      <div className="bg-cyan-900 w-full grid place-content-center py-20">
        <div>
          <h1 className="text-center text-4xl text-white">URL Shortener</h1>
          <div></div>
          <div className="w w-96">
            <div className="relative mt-4">
              <input
                type="text"
                name="search"
                placeholder="Enter link here"
                id="search"
                className={`block w-full rounded-md border-0 py-3 px-3 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset outline-none focus:ring-cyan-600 ${
                  !isValidURL && "focus:ring-red-600 ring-red-600"
                } `}
                onKeyUp={async (e) => {
                  if (e.key === "Enter") {
                    if (isURL(e.target.value)) {
                      setIsValidURL(true);
                      //Add these
                      const url = await submitUrl({ longUrl: e.target.value });
                      setURL(url);
                    } else {
                      setIsValidURL(false);
                    }
                  }
                }}
              />
              <div className="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                <kbd className="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">
                  Enter
                </kbd>
              </div>
            </div>
            {/* Update this section */}
            {url.short.length > 0 && (
              <div className="flex gap-4 mt-6 p-5 rounded-md border border-cyan-500 bg-cyan-50 items-center">
                <p className="line-clamp-1">{url.long}</p>
                <p className="text-cyan-700">
                  <Link href={`/${url.short}`}> lg.sh/{url.short}</Link>
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

export default Home;

We defined another state variable, url, to hold the long URL entered by the user and its corresponding short URL returned from the server.

Next, we define an asynchronous function to send a POST request to the endpoint /api/shorten and get the shortened URL. It accepts the long URL as an argument, sends it to the server, converts the response to JSON, and stores it in the variable data. The shortened URL is then returned from the function.

In the onKeyUp event handler added to our input element, we call the submitUrl function if the entered URL is valid and update the url state variable with the returned short URL.

We then check to see if the url state variable's short property has a length greater than 0 (indicating that a short URL has been generated). If it does, it is displayed along with the original URL on the screen. Finally, we use the Link component from Next.js to create a link that leads to the short URL. We used lg.sh as a placeholder for the shortened URLs. Feel free to replace this with your own domain if you have one.

If you head back to the Amplify Studio Console for you app, on the Setup menu on the left, select Content. You should see the long URL and a short representation of that URL as shown below.

Now, let us create the logic that will handle redirection from the short URL to the long URL when a user clicks on the short URL.

Convert a Short URL to a Long URL

Now, we need to create a dynamic route in our application that will handle the redirection from the shortened URL to the long URL. The idea is that when a user opens the shortened URL, they are redirected to the original, long URL.

In your pages folder, create a dynamic page called [short.js] and add the following to it:



import React from "react";

function Short() {
  return <div></div>;
}

export async function getServerSideProps(context) {
  console.log(context.params.short);
  const GRAPHQL_ENDPOINT = process.env.GRAPHQL_ENDPOINT;
  const GRAPHQL_KEY = process.env.GRAPHQL_KEY;
  const query = /* GraphQL */ `
    query LIST_URLS($input: ModelURLFilterInput!) {
      listURLS(filter: $input) {
        items {
          long
          short
        }
      }
    }
  `;
  const variables = {
    input: { short: { eq: context.params.short } },
  };
  const options = {
    method: "POST",
    headers: {
      "x-api-key": GRAPHQL_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  };
  const res = await fetch(GRAPHQL_ENDPOINT, options);
  const data = await res.json();
  const url = data.data.listURLS.items[0];
  console.log(url.long);
  return {
    redirect: {
      destination: url.long,
    },
  };
}
export default Short;

In Next.js, every file in the pages directory corresponds to a route. In this case, we created a dynamic page and exported a component —Short, but we do not want to display this page to the user. We want the server to immediately redirect them to the original long URL. To accomplish this, we need to find the short code from the request path, look up the corresponding long URL in our database, and then redirect that long URL before any page is sent to the client.

This needs to happen on the server, so we are using the getServerSideProps function and Next.js's built-in redirection to perform a redirect based on the database data. The getServerSideProps function accepts a context object as an argument that contains several properties, including query parameters.

We define a GraphQL query to list all URLs that match a specific condition. It'll search for the URL with the same short code as the one in the context.params.short.

Next, we prepare our variables object for the GraphQL query. The input parameter is an object that filters the URLs we are querying for by the short property, and we want the URL where the short property equals context.params.short.

Afterward, we define the options object for the fetch request, and it includes setting the HTTP method as POST, specifying the appropriate headers, and then stringifying the query and variables objects to be sent in the body.

Next, we make the fetch call to the GraphQL endpoint and wait for the response. Once we get the response, we parse it as JSON. We get the first URL that matches our query from the list of URLs retrieved, but we expect only one item since the short code should be unique.

Finally, we use the redirect property in the returned object from the getServerSideProps function to redirect the client to the original long URL associated with the short code.

To see your newly created short URL in action, head to your browser and type in a valid URL. Once you hit Enter, you should see your short URL displayed on your screen. Click on the short URL to be redirected to the original long URL.

Host Your App with AWS Amplify

You need to deploy your project a git provider such as Github. With a git repository, you can use Amplify Hosting to set up continuous delivery automatically. Simply commit all your changes to Git and push your website to your repository. Amplify Hosting will take care of the rest, deploying your website to the cloud and updating it whenever you push changes to your repository.

Go to your AWS console and search AWS Amplify and select it from the list of services.

Next, select the urlshortner app and select Hosting environments.

Select GitHub or your Git provider on the next page and click the Connect branch button.

Select the repository you intend to host, select the main branch, and click the Next button to proceed.

For security reasons, Amplify needs you to be explicit about the fact that you want to include environmental variables in a build.

The printev command prints all of the current environment variables. Then grep matches the two you want and adds those to the .env.production file.

Click the Edit button and edit the build settings to include the following command:



printenv | grep -e GRAPHQL_ENDPOINT -e GRAPHQL_KEY >> .env.production

Once you’re done, click the Save button.

Scroll down to the Advanced settings section and add your environmental variables.

Review your settings on the next screen and click the Save and deploy button to start the deployment processes. Now you can sit back and watch your app get deployed. This might take a few minutes, depending on your internet connection.

After deploying, click on the live link provided by Amplify to access your app.

Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.



amplify delete

Conclusion

This article guides you through building a URL shortener using AWS Amplify and Next.js. With lengthy URLs becoming increasingly difficult to share and remember, URL shorteners offer a user-friendly solution. With your URL shortener up and running, you can start using it to simplify your links and make your content more accessible to your audience.

How to Protect Next.js 13 App Routes with Authentication

Christian Nwamba — Mon, 31 Jul 2023 17:34:12 +0000

Securing Next.js pages is tricky — considering all of the layers of rendering that Next.js offers. You need to understand where dynamic rendering starts and stops and where client only code takes over.

Regardless of your strategy, the common and recommended way to secure Next.js pages is to secure them on the server. That means we have to employ cookies instead of local Storage. That means we can also validate JWTs in the same file that our client code lives in.

With all of these possibilities it becomes hard to decide where things go. This article will guide you on how to handle sign in, sign up, password reset, and email confirmation.

Prerequisites

These days it’s becoming unreasonable to build Auth from scratch unless you have 30+ hours to kill. To help us focus on protecting Next.js pages instead of setting up Auth right, we’ll use AWS Amplify Auth. Amplify makes it easy to setup a full featured auth service in less than 10 clicks. That said you’ll need an AWS account and some knowledge of React to follow along.

Create an Amplify Project

To create an Amplify project, navigate to your AWS console, search for AWS Amplify, and select it to open the Amplify Console.

If this is your first app, scroll to the bottom of the page in the Amplify Studio section, select Get started. Name your app, and select Confirm Deployment.

If you’ve created an Amplify App in the past, follow the steps below:

Select New app in the upper right-hand corner, and select Build an app from the dropdown menu.

Give the app a name, and click the Confirm Deployment to deploy.

Once the deployment is completed, click the Launch Studio button to launch the Amplify studio.

It also has a Content Management System (CMS), which is incredibly useful for viewing and managing user data.

You should now see the Home menu for your application. To learn more, see the Amplify Studio introduction.

Set up Authentication

Adding authentication to your app enables users to create accounts, sign in, and ensures that only authorized users can access your app. Writing the logic for an application's login flow can be challenging and time-consuming. However, Amplify simplifies this process by providing a complete authentication solution with Amazon Cognito that can be easily added to your app.

Follow the steps below to set up authentication for your app:

Select the Authentication option in the setup menu on the screen's left side. You don't need to choose a login method in the Configure login section, as Email is already selected as the default option.
Scroll down to the Configure Signup section, and you should see the Add attribute dropdown. Click the dropdown icon and select the Name attribute. You should see the Password protection settings in this section. Click on this to select from a variety of security options for user passwords.
Click the Deploy button, acknowledge the warning, and select Confirm Deployment.

You should see the progress of this deployment process — a visual representation of how your setup is being deployed in the AWS environment.

This process should take a minute or two, but when it is done, you should see a confirmation message saying that you’ve successfully deployed authentication.

Set up a Next Project

To keep the focus of this guide on building the app, I will skip the steps in setting up the markup and the styles for the pages.

To quickly get started with a Next.js project that includes the necessary dependencies and UI components for various pages, navigate to your preferred directory and run the following command to clone this starter project:

npx degit christiannwamba/next-app-auth#starter next-app-auth

Run the following command to navigate into the next-app-auth directory, install the dependencies, and start up your development server:



cd next-app-auth
npm install
npm start

This lets you see the output generated by the build. You can see the running app by navigating to http://localhost:3000.

As you can see, we already have the custom Auth UI components set up for various pages in our Next.js application. These components are the basis for our authentication interface, providing templates for pages such as sign-in, sign-up, and password recovery.

As we continue, we will explain the contents of these starter files and their functionality in detail. We will also update their logic as needed to ensure they are tailored to the specific requirements of our application.

Navigate to your Amplify Studio application, and copy the pull command displayed. This command is important as it allows you to pull the newly created Amplify project from the cloud to your local environment (Next.js application in our case).

Dependency: Make sure you have AmplifyCLI configured before executing the pull command.

From your projects directory, paste the copied command into the terminal and then execute it. A typical instance of this command would appear as follows:



amplify pull --appId d2act21onzf92o --envName staging

The appId specifies the unique ID of the Amplify App you want to pull and envName staging specifies the environment of the Amplify App that you want to pull. An Amplify App can have multiple environments (like 'development', 'staging', 'and production').

When you execute the command, you will be automatically redirected to your web browser to grant the CLI access. Once there, click 'Yes' to authenticate with Amplify Studio.

After successful login, return to the CLI. Here, you will be asked a series of questions to gather essential details about your project's configuration. Your answers will help Amplify understand your project's structure and needs.

Accept the default values highlighted in the image below:

The Amplify CLI will automatically carry out the following steps for you:

Amplify will create a new project in the current local directory. This is indicated by the creation of an amplify folder in your project's root directory, which contains all of your project's backend infrastructure settings.
It creates a file called aws-exports.js at the root of your Next.js application. It holds all the configuration for the services you create with Amplify, allowing the Amplify client to access necessary information about your backend services, such as API endpoints, authentication configuration, etc.

Install the Amplify Library

The Amplify library is like a toolbox containing various tools (methods, components, and APIs) that help us integrate our application with various cloud services, such as AWS Cognito, for authentication. It provides pre-built functions for use cases like signing in, signing up, checking user sessions, among others.

Run the following command to install the Amplify Library:



npm install aws-amplify

The aws-amplify package is the library that enables you to connect to your backend resources.

Configure Amplify

For our application to communicate and interact with the services provided by AWS, we need to configure AWS Amplify for use throughout the project.

First, we must configure Amplify in the app/auth/Layout component to allow the library to communicate with the cloud services (like authentication) we've set up on our backend. This way, we can easily access the methods for signing in, signing up, and managing user sessions in any component that the Layout component wraps.

Update your app/auth/Layout.js file with the following:



"use client";
import React from "react";
import { Amplify } from "aws-amplify";
import awsExports from "@/aws-exports";

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

export default function Layout({ children, title }) {
  return (
    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
      {children}
    </div>
  );
}

In the code above, we import the Amplify library and configuration details from the aws-exports.js file.

We then configure AWS Amplify with the details we imported. This setup ensures that the Amplify library knows about your specific backend setup and can interact with it correctly.

To store the user access token (JWT) in the cookie instead of the localStorage, we set ssr to true. Storing the token in the cookie makes it easy for server rendered pages to access the token

As mentioned earlier, we need people to be authenticated to access the dashboard. To achieve this, let us go ahead and write the logic in our custom auth UI components.

Create a New User (Sign UP)

Update the code in your app/auth/sign-up/pages.js file to include the following:

Let’s start with importing the libraries we need for the Sign Up page:



"use client";
import React from "react";
// Import these
import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";
function SignUp() {
  // ...
}
export default SignUp;

We first import Auth from aws-amplify, the AWS Amplify library's authentication module. We also import useRouter from next/navigation, which is a hook for navigation-related functionality.

Next, we initialize a state variable called user with properties name, email, and password, all set to empty strings.



"use client";
//...
function SignUp() {
  const [user, setUser] = React.useState({
    name: "",
    email: "",
    password: "",
  });

  //...
}
export default SignUp;

We need to add a function that handles the sign up once the user submits the sign up form:



"use client";
//...
function SignUp() {
  const [user, setUser] = React.useState({
  //...

  //Add this
  const router = useRouter();
  async function signUp() {
    try {
      const auth = await Auth.signUp({
        username: user.email,
        password: user.password,
        attributes: {
          name: user.name,
        },
        autoSignIn: {
          enabled: true,
        },
      });
      console.log(auth);
      router.push(`/auth/confirm-email?email=${user.email}`);
    } catch (error) {
      console.log("error signing up:", error);
    }
  }

}
export default SignUp;

We defined an asynchronous function called signUp, which is responsible for user registration. It calls the signUp method from the Auth module to create a new user with their email (username), password, and additional attributes (user's name). We set autoSignIn to true to automatically sign the user in after registration.

If the sign-up process is successful, the user is redirected to the email confirmation page. If an error occurs, it is logged to the console.

Now let’s hook up the function to the form:



// Markup is stripped to focus on logic

function SignUp() {
  const [user, setUser] = React.useState({
    //...
  });
  //Add this
  const router = useRouter();
  async function signUp() {
    //...
  }
  return (
    <>
      {/* //... */}
      <form
        className="space-y-6"
        onSubmit={(e) => {
          e.preventDefault();
          console.log(user);
          signUp();
        }}
      >
        <div>
          <label>Full Name</label>
          <div className="mt-2">
            <input
              onChange={(e) => {
                const val = e.target.value;
                if (val !== "") {
                  setUser({ ...user, name: val });
                }
              }}
            />
          </div>
        </div>
        <div>
          <label>Email address</label>
          <div className="mt-2">
            <input
              autoComplete="email"
              onChange={(e) => {
                const val = e.target.value;
                if (val !== "") {
                  setUser({ ...user, email: val });
                }
              }}
            />
          </div>
        </div>
        <div>
          <label>Password</label>
          <div className="mt-2">
            <input
              onChange={(e) => {
                const val = e.target.value;
                if (val !== "") {
                  setUser({ ...user, password: val });
                }
              }}
            />
          </div>
        </div>
        <div>
          <button type="submit">Sign up</button>
        </div>
      </form>
      <p>
        Already have an account? <a href="/auth/sign-in">Sign in</a>
      </p>
    </>
  );
}
export default SignUp;

The return statement renders a form with input fields for capturing the user's details (name, email, and password). An onChange event handler is attached to each input field and is triggered every time the user types into the field. When triggered, the event updates the corresponding property (name, email, or password) on the user state object with the new state value using the setUser function. When the form is submitted, it calls the signUp function. We also added a link that redirects users to the sign-in page if they already have an account.

Now if you go to this URL — http://localhost:3000/auth/sign-up in your browser, and provide your details, you should be able to successfully create an account.

To see the details of the newly created account, go to your application's Amplify Studio dashboard, and navigate to the Manage section in the left sidebar. Select User management from the options available.

Confirm User’s Email

Once a user has successfully registered, AWS Amplify will automatically send a confirmation code to the user's email to verify their email address. The next step in our sign-up process is to implement the functionality that allows users to confirm their email by entering the code provided.

Update the code in your app/auth/confirm-email/pages.js file to include the following:

Let’s start with importing the libraries we need for the Confirm Email page:



"use client";
import React from "react";

//Import these
import { useSearchParams } from "next/navigation";
import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";

The code above imports the necessary modules and hooks. Two specific hooks from Next.js are used: useSearchParams for accessing query parameters and useRouter for accessing router functions.



"use client";
import React from "react";

//...

function ConfirmEmail() {
  const [code, setCode] = React.useState("");

  // Add these
  const router = useRouter();
  const searchParams = useSearchParams();

  //...
}
export default ConfirmEmail;

In the page component, we declare the state variable code to store the confirmation code the user will input. We also initialize the router and searchParams hooks.

Let’s add a function that handles the email confirmation once the user submits the form:



"use client";
import React from "react";

//...

function ConfirmEmail() {
  const [code, setCode] = React.useState("");

  const router = useRouter();
  const searchParams = useSearchParams();

  // Add this
  const router = useRouter();
  const searchParams = useSearchParams();

  async function confirm() {
    // Add these
    const email = searchParams.get("email");
    try {
      await Auth.confirmSignUp(email, code);
      router.push("/dashboard");
    } catch (error) {
      console.log("error confirming sign up", error);
    }
  }

  //...
}
export default ConfirmEmail;

We defined an asynchronous function called confirm that validates the user's account with the confirmation code sent to their email. The function retrieves the user's email from the search parameters in the URL and attempts to confirm the sign-up process using the Auth.confirmSignUp method with the user's email and the code entered by the user.

If the confirmation is successful, the function redirects the user to the dashboard page using the router.push("/dashboard") method. If an error occurs, it gets logged to the console.

Let’s hook up the function to the form:



//...

function ConfirmEmail() {
  //...

  return (
    <>
      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
        <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
          Confirm Email
        </h2>
      </div>
      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
        <form
          className="space-y-6"
          onSubmit={(e) => {
            e.preventDefault();
            confirm();
          }}
        >
          <div>
            <label
              htmlFor="code"
              className="block text-sm font-medium leading-6 text-gray-900"
            >
              Code
            </label>
            <div className="mt-2">
              <input
                id="code"
                name="code"
                type="text"
                autoComplete="code"
                required
                onChange={(e) => {
                  setCode(e.target.value);
                }}
                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              />
            </div>
          </div>
          <div>
            <button
              type="submit"
              className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              Confirm
            </button>
          </div>
        </form>
        <p className="mt-10 text-center text-sm text-gray-500">
          No Code?{" "}
          <a
            href="/auth/sign-up"
            className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
          >
            Resend Code
          </a>
        </p>
      </div>
    </>
  );
}
export default ConfirmEmail;

In the return statement, we render a form with an input field for the user to enter their confirmation code. The confirm function is triggered when the form is submitted. We also provide a link for users to request the confirmation code if they did not receive it initially.

Head over to your browser and enter the confirmation code sent to your email after signing up, and you should be redirected to the dashboard page. Then, navigate to your application's Amplify Studio dashboard. Under User Management, you should see that the user status has changed to "Confirmed" if the confirmation process was successful, as shown below.

Enable User Sign Out

To allow users sign out, we can define a component that renders a sign-out button. When the user clicks the button, they will be logged out of their account.

At the root of your project, create a folder named components and inside the folder, create a file named SignOutButton.js and add the following to it:



"use client";
import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";
import React from "react";
function SignOutButton() {
  const router = useRouter();
  return (
    <button
      type="button"
      className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      onClick={async (e) => {
        try {
          await Auth.signOut();
          router.push("/auth/sign-in");
        } catch (error) {
          console.log("error signing out: ", error);
        }
      }}
    >
      Sign out
    </button>
  );
}
export default SignOutButton;

The SignOutButton component defined above renders a button that, when clicked, attempts to sign the user out of their current authenticated session using the Auth.signOut method. If the sign-out process is successful, the user is redirected to the sign-in page (which has not yet been created). If there is an error during the sign-out process, the error is logged to the console.

To use this button component in our app, let’s update the auth/dashboard/page.js file with the following:



//Import this
import SignOutButton from "@/components/SignOutButton";
import Link from "next/link";
import React from "react";
function Dashboard() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <p>This is your dashboard</p>
      <Link
        href="/"
        className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
      >
        Go to Landing Page
      </Link>
      {/* Add this */}
      <SignOutButton />
    </main>
  );
}
export default Dashboard;

This component returns JSX code defining what authenticated users will see when they visit their dashboard. At the top of the file, we're importing the SignOutButton component we previously defined. We also render the SignOutButton component to the dashboard, allowing users to sign out from their dashboard.

If you click the Sign out button, you should be redirected to the Sign in page. Now, let’s go ahead and implement the logic for signing in.

Authenticate Users

In this section, we will update the SignIn component to collect users' credentials, authenticate them, and navigate them to their dashboard after successful authentication.

To do this, update the auth/sign-in/page.js file to include the following:

Let’s start with importing the libraries we need for the Sign in page:



"use client";
import React from "react";

import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";

Next, we define a local state variable, user, that holds the user's email and password. We also initialize a router object to handle navigation.



//...

function SignIn() {
  const [user, setUser] = React.useState({
    email: "",
    password: "",
  });

  const router = useRouter();

  //...
}
export default SignIn;

Let’s add a function that handles the sign in once the user submits the form:



function SignIn() {
  const [user, setUser] = React.useState({
   //...
  });

  const router = useRouter();

  //Add this
  async function signIn() {
    try {
      const auth = await Auth.signIn({
         username: user.email,
        password: user.password,
      });
      console.log(auth);
      router.push(`/dashboard`);
    } catch (error) {
      console.log("error signing up:", error);
    }
  }
  //...
}
export default SignIn;

We defined an async function called signIn that uses the signIn method from the Auth library to sign in the user with their email and password. If the sign-in process is successful, it redirects the user to their dashboard page; otherwise, it logs any error that occurs.

Next, we hook up the function to the form:



"use client";
import React from "react";

import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";

function SignIn() {
  //...

  return (
        <>
          //...
            <form
              className="space-y-6"
              onSubmit={(e) => {
                e.preventDefault();
                console.log(user);
                signIn();
              }}
            >
              <div>
                <label
                  htmlFor="email"
                  className="block text-sm font-medium leading-6 text-gray-900"
                >
                  Email address
                </label>
                <div className="mt-2">
                  <input
                    id="email"
                    name="email"
                    type="email"
                    autoComplete="email"
                    onChange={(e) => {
                      const val = e.target.value;
                      if (val !== "") {
                        setUser({ ...user, email: val });
                      }
                    }}
                    required
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
              <div>
                <div className="flex items-center justify-between">
                  <label
                    htmlFor="password"
                    className="block text-sm font-medium leading-6 text-gray-900"
                  >
                    Password
                  </label>
                  <div className="text-sm">
                    <a
                      href="/auth/forgot-password"
                      className="font-semibold text-indigo-600 hover:text-indigo-500"
                    >
                      Forgot password?
                    </a>
                  </div>
                </div>
                <div className="mt-2">
                  <input
                    id="password"
                    name="password"
                    type="password"
                    autoComplete="current-password"
                    onChange={(e) => {
                      const val = e.target.value;
                      if (val !== "") {
                        setUser({ ...user, password: val });
                      }
                    }}
                    required
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              />
            </div>
          </div>
          <div>
           <button
                  type="submit"
                  className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              Sign in
            </button>
          </div>
        </form>
     //...
}

export default SignIn;

The return statement renders a standard sign-in form with fields for email and password and a submit button. The onChange handlers for the input fields update the user state whenever the user types into the fields. When the form is submitted, it calls the signIn function. We also provide a link for users who have not signed up, which navigates to the sign-up page.

We have successfully set up sign-in functionality for our app. Now, you can open your application in the browser and enter the login credentials you used during sign-up. If authentication is successful, you will be automatically redirected to your dashboard.

Protect the Dashboard Page

Next, we need to secure the dashboard page by restricting access to only authenticated users. Currently, the dashboard page can be accessed by anyone, whether they are authenticated or not. We need to implement the logic that intercepts unauthenticated users attempting to access the dashboard and redirects them to the sign-in page instead.

We need to configure Amplify again because this layout is server-rendered, and Amplify library and features will not be shipped to the client. Our Auth layout and pages are client rendered and also need the Auth library. Since this Amplify config we are doing in the root layout won't be accessible to client pages, we are configuring Amplify again in the auth layout component.

Update your app/layout.js file to import and load the configuration file:



import "./globals.css";
import { Inter } from "next/font/google";

// Add these
import { Amplify } from "aws-amplify";
import awsExports from "../aws-exports";
Amplify.configure({ ...awsExports, ssr: true });

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Your Next.js App",
  description:
    "A Next.js App that shows you to protect pages in Next.js app directory",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

In the file above, we initialize and configure the AWS Amplify library. The { ...awsExports, ssr: true } syntax is used to spread the properties of the awsExports object into a new object, and we added the ssr property set to true because we want to configure the Amplify library to work correctly with Next.js's server-side rendering (SSR) feature. The ssr: true setting allows Amplify to correctly manage user sessions when your pages are rendered on the server.

Let's update our dashboard page to render the dashboard only for authenticated users and redirect unauthenticated users to the sign-in page. Replace the code in your auth/dashboard/page.js file with the following:



import SignOutButton from "@/components/SignOutButton";
import Link from "next/link";
import React from "react";

import { headers } from "next/headers";
import { withSSRContext } from "aws-amplify";
import { redirect } from "next/navigation";

async function Dashboard() {
  const req = {
    headers: {
      cookie: headers().get("cookie"),
    },
  };

  const { Auth } = withSSRContext({ req });

  try {
    const user = await Auth.currentAuthenticatedUser();
    return (
      <main className="flex min-h-screen flex-col items-center justify-center p-24">
        <p>This is your dashboard, {user.attributes.name}.</p>
        <Link
          href="/"
          className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
        >
          Go to Landing Page
        </Link>
        <SignOutButton />
      </main>
    );
  } catch (error) {
    console.log(error);
    redirect("/auth/sign-in");
  }
}

export default Dashboard;

In this code file, we first import headers in order to get the headers from the HTTP request. We also import withSSRContext, a function from AWS Amplify, to interact with Amplify functionalities on the server side. The redirect function is used to redirect users to different pages as needed.

To validate whether a user is authenticated on the server side, we build a req object to use the cookie stored by AWS Amplify for user sessions. We pass this req object to the withSSRContext function to get Amplify's Auth object, which can check if a user is authenticated.

In the try block, we use the currentAuthenticatedUser function to fetch the current user's details. If the user is authenticated, the function will return the user's data and we render the user's dashboard page. If not, we log the error to the console and redirect the user to the sign-in page.

Now, if you try to access the dashboard directly after logging out of your application, you will be redirected to the sign-in page.

Add the 'Forgot Password' Functionality

Next, let us move on to implementing the feature that allows a user to input their email address and request a password reset. This involves sending a reset code to the provided email. If the code is successfully authenticated, the user will be redirected to the password change page.

Update the code in your auth/forgot-password/page.js file with the following:



"use client";
import React from "react";

//Import these
import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";

function ForgotPassword() {
  const [email, setEmail] = React.useState("");

  //Add these
  const router = useRouter();
  async function sendCode() {
    try {
      await Auth.forgotPassword(email);
      router.push(`/auth/change-password?email=${email}`);
    } catch (error) {
      console.log("error sending code", error);
    }
  }

  return (
        <>
          <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
              <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                Forgot Password
              </h2>
            </div>
            <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
          <form
            className="space-y-6"
            onSubmit={(e) => {
              e.preventDefault();
              sendCode();
            }}
          >
            //...omitted for brevity
          </form>
          //...
  );
}

export default ForgotPassword;

In this file, we import the necessary libraries and modules. We then declare a state variable email with its initial value set to an empty string.

We define an async function called sendCode, which uses the Auth.forgotPassword() method to initiate the password recovery process. If the request succeeds, the user is redirected to the change-password (which we have yet to create) page with their email as a query parameter. If an error occurs, it gets logged to the console.

The return statement renders a form that includes an input field for the email address, which updates the email state each time the user types into it. When the form is submitted, it calls the sendCode function.

Now, if you go to the sign-in page and click on the "forgot password" link, you will be taken to the password reset page. After entering your email address, a unique code will be sent to your email, and you will be directed to the password change page.

Add the 'Change Password' Functionality

To complete the password reset flow, we need to implement the functionality for the change password page. Once the user enters the code sent to their email and submits a new password, they should be able to successfully log in with their updated credentials.

Update the code in your auth/change-password/page.js file with the following:



"use client";
import React from "react";

// Import these
import { useSearchParams } from "next/navigation";
import { Auth } from "aws-amplify";
import { useRouter } from "next/navigation";

function ChangePassword() {
  const [pass, setPass] = React.useState({
    code: "",
    password: "",
  });

  const router = useRouter();
  const searchParams = useSearchParams();

  //Add this
  async function changePassword() {
    const email = searchParams.get("email");
    try {
      await Auth.forgotPasswordSubmit(email, pass.code, pass.password);
      router.push("/auth/sign-in");
    } catch (error) {
      console.log("error changing password", error);
    }
  }

  return (
        <>
          <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
              <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                Change Password
              </h2>
            </div>
            <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
          <form
            className="space-y-6"
            onSubmit={(e) => {
              e.preventDefault();
              changePassword();
            }}
          >
            //...omitted for brevity
          </form>
            //...
  );
}
export default ChangePassword;

At the beginning of the file, we import the necessary modules. We also import useSearchParams hook to access query parameters from the current URL.

Within the ChangePassword component, we declare state variables for the password change code and the new password. Next, we define a changePassword function. It fetches the user's email from the URL's search parameters and calls the Auth.forgotPasswordSubmit method, passing in the email, code, and new password. If the password change is successful, we redirect the user to the sign-in page.

In the return statement, we render a form where users can enter the code they received in their email and their new password. Form submission triggers the changePassword function.

Now, you can copy the code sent to your email and input it into the provided form along with your new desired password. If the form is submitted successfully, you should be redirected to the sign in page.

After successfully changing your password, when you proceed to sign into your account, you will be automatically redirected to your dashboard.

Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.



amplify delete

Conclusion

In this guide, we learned how to make our Next.js pages secure by using AWS Amplify to implement a robust custom authentication system. We covered important features like signing up, signing in, and dashboard access, as well as handling edge cases like password management. With these functionalities in place, users can experience a secure and seamless experience while using your app. I hope this guide has helped you in building a secure and reliable platform for your users. Thank you for reading!

Automatically Create a DynamoDB Record from a Cognito User Pool

Christian Nwamba — Fri, 07 Jul 2023 12:33:31 +0000

To successfully authenticate a user, it means that you have securely stored their credentials on your server, and you verify their accuracy every time they try to sign in.

However, authentication is one of many reasons we store user data. In addition to verifying user credentials, creating a user often involves capturing and storing their profile information. You might want to store user data so you can use the profile data and connect it to the user data, for example, in social media use cases, such as displaying comments from all users related to a specific post.

AWS Amplify Auth uses Amazon Cognito behind the scene which means that users are stored in an AWS Cognito User Pool. This pool is different from your GraphQL API data which is stored in your DynamoDB. If you are using GraphQL API with AppSync then your user data and your app data are in two different locations.

To connect your user data from Cognito User Pool to your Amplify GraphQL API, you need to setup a Lambda function that Cognito will call with the user data. This Lambda function is a lambda trigger that is automatically invoked right after the sign-up process is completed.

In this article, we will walk through how to set up this Lambda function and connect and write to our database after Cognito has called it.

Prerequisites

To follow this tutorial, you'll need:

An AWS account. If you don't have one, you can create an account here.
Node.js v16.x or later and npm v6.14.4 or later

This tutorial also assumes that you're familiar with the basics of both JavaScript/ES6 and React.

Set up Your Development Environment

You need to configure the Amplify CLI locally, and connect it to your AWS account. Run the following command in your terminal:



npm install -g @aws-amplify/cli

Next, run the amplify configure command to configure your AWS Amplify environment. Follow the prompts to create a new IAM user that AWS Amplify will use to manage resources for your app. Here’s a link with step-by-step details on how to configure the Amplify CLI.

Create an AWS Amplify Project

The Amplify Console is where you build, manage, and host your Amplify applications. Let's set up an AWS Amplify app. Log into your AWS account and search for AWS Amplify in the console. Select AWS Amplify to open the Amplify Console.

If this is your first app, scroll to the bottom of the page in the Amplify Studio section, select Get started. Name your app, and select Confirm Deployment.

If you’ve created an Amplify App in the past, follow the steps below:

Select New app in the upper right-hand corner, and select Build an app from the dropdown menu.

Name your app, and select Confirm Deployment.

This would take a few seconds as Amplify need some time to set up a new project. Once that is completed, click the Launch Studio button.

It also has a Content Management System (CMS), which is incredibly useful for viewing and managing user data.

You should now see the Home menu for your application. To learn more, see the Amplify Studio introduction.

Set up Authentication

We need to set up authentication for our app so that users can create accounts and sign in. We want only authenticated users to access the App’s UI.

Amplify simplifies authentication and authorization. You can setup a complete auth flow and auth UI for your app in minutes.

Select the Authentication option in the setup menu on the screen's left side. Leave Email as the log in option.
Scroll down to the Configure Signup settings section. You should see the Password protection settings in this section. Click on this to see a variety of security options for user passwords.
Click the Deploy button, acknowledge the warning, and select Confirm Deployment.

You should see the progress of this deployment process — a visual representation of how your setup is being deployed in the AWS environment.

Amplify will provision AWS Cognito behind the scene. Once it’s done, you should get a confirmation message.

Create a Data Model in Amplify Studio

Next, we need to define a data model to store the user details. Amplify provides the ability to create data models, which represent the structure of the data your application will work with. The Studio data model designer provides a visual way to achieve this.

When you define your data models, AWS Amplify creates corresponding AWS AppSync GraphQL APIs to allow your application to interact with the data and Amazon DynamoDB tables based on those models.

Follow the steps below to create a data model for your app:

On the Setup menu on the left, select Data, and select Add model.

As seen in the image below, we call our data model User for this example. Click the Add a field link, and in the field that appears, type in "email".
For this email field, you will notice an option labeled 'is required' to the right. Check this box to make this a mandatory field.
Select the Save and Deploy button. Acknowledge the warning, and select Deploy.

The deployment should take a few minutes, but once it is completed, you should see a message saying you've successfully deployed the data model.

Additionally, you should also see a "pull" command that should be executed in your local terminal, precisely from your project's root directory to pull the project into your React project. You can either copy the command or ignore it for now; we'll use it soon. Let’s go ahead and set up our React project.

Set up React Project

Run the following command from your preferred directory to set up a React project:



npx create-react-app dyneapp

Run the following command to navigate into the dyneapp directory, and start up your development server:



cd dyneapp
npm start

You should see the running app by navigating to http://localhost:3000.

Install Amplify Libraries

The first step to using Amplify in the client is to install the necessary dependencies.

Run the following command to install the Amplify Libraries:



npm install aws-amplify @aws-amplify/ui-react

This command installs two libraries. The aws-amplify package is the library that enables you to connect to your backend resources. The @aws-amplify/ui-react package includes React-specific UI components that you can use to build your app UI.

The @aws-amplify/ui-react library exports a connected component that handles Auth UI flow for us.

Pull Amplify Backend Project

Navigate to your Amplify Studio application, and copy the pull command displayed. This command is important as it allows you to pull the newly created Amplify backend project from the cloud to your local environment (React project in our case).

Dependency: Make sure you have AmplifyCLI configured before executing the pull command.

From your projects directory, paste the copied command into the terminal and then execute it. A typical instance of this command would appear as follows:



amplify pull --appId d2act21onzf92o --envName staging

When you execute the command, you will be automatically redirected to your web browser to grant authorization. Once there, click 'Yes' to authenticate with Amplify Studio.

Accept the default values highlighted below:

The Amplify CLI will automatically carry out the following steps for you:

Amplify will create a new project in the current local directory. This is indicated by the creation of an amplify folder in your project's root directory, which contains all of your project's backend infrastructure settings.
It creates a file called aws-exports.js in the src directory of your React application. This file holds all the configuration for the services you create with Amplify, allowing the Amplify client to access necessary information about your backend services, such as API endpoints, authentication configuration, etc.

Configure Amplify

For your application to talk to AWS, you need to configure AWS Amplify for use throughout the project. In your app's entry point index.js, import and load the configuration file:



import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

// Add these lines
import { Amplify } from "aws-amplify";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

In the code above, we import the Amplify library and configuration details from the aws-exports.js file.

We then configure AWS Amplify with the details we imported. This setup ensures that the Amplify library knows about your specific backend setup and can interact with it correctly.

Protect Your App UI with Amplify Auth

With the configuration out of the way, we can go ahead and protect our app with the Authenticator UI component. Open your src/App.js file and import the withAuthenticator component below the last import.



import "@aws-amplify/ui-react/styles.css";
import { withAuthenticator } from "@aws-amplify/ui-react";

Next, update the code in your **src/App.js** file to match the following:



import React from "react";
//...

function App({ user, signOut }) {
  return (
    <div>
      <div className="flex justify-end px-4 py-2">
        <button
          type="button"
          className="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white"
          onClick={() => signOut()}
        >
          Sign Out
        </button>
      </div>
      <div className="flex justify-center items-center h-screen w-full">
        Hello World
      </div>
    </div>
  );
}

export default withAuthenticator(App);

The App component is a simple React component that displays a greeting message and a sign-out button. It receives signOut and user props because we wrapped the App component with a higher order compnent. The signOut function is used to log the user out of the application, and user contains the details of the currently logged-in user.

Head to the browser and you should see a sign in and create account form.

No need to create an account at the moment as we are yet to configure Lambda triggers for the authentication events.

Create a Pre-Signup Lambda Trigger

We can use Lambda triggers to intercept the auth flow and run custom code before a user is created. We need to configure Amplify Auth module with Lambda functions to extend its functionality.

Run the following command from your terminal:



amplify update auth

This command allows us to modify our existing authentication configurations. Select Walkthrough all the auth configurations and accept the configuration for the rest of the CLI prompts as as highlighted in the image below:

Let’s go through some of the important values we selected above and why:

Walkthrough all the auth configurations:This option allows us to go through and modify all the configurations for your authentication resource step by step. It is helpful for changing multiple aspects or reviewing all settings.
Selecting to Configure Lambda Triggers for Cognito: This allows us to specify that we want to run custom code during various stages of the authentication process. Lambda triggers can be used for custom validation, adding custom logic, etc.
Selecting "pre-signup": With this, we are choosing to create a Lambda function that is triggered before Amazon Cognito signs up a new user.
Selecting "Create your own module": allows us to write our custom Lambda function to implement specific logic rather than using pre-built templates provided by Amplify.

After these steps, Amplify will create a new directory called amplify/backend/function containing the source code for your new Lambda function. The file for the custom function — custom.js will be automatically opened in VS Code for you. We will modify this code to implement our custom logic for the pre-signup.

Next, we need to cd into the amplify/backend/function/DyneappPreSignup/src folder and run the following command to install version 2 of the node-fetch module as a dependency to just the Lambda function.



npm install node-fetch@2

Because we will be writing functions with CommonJS, we are installing version 2 of node-fetch. We need this to be able to access the Fetch API in our Node.js project to make a HTTP request to our GraphQL API.

Next, we need to add our GraphQL API credentials as environmental variables to our existing function.
Run the following command at the root of your project:



amplify update function

Select the Lambda function you want to update and follow the CLI prompts by selecting the values displayed in the image below:

At the end of this command you can take note of your new API endpoint and API key.

Finally, we can use this GraphQL API access credentials to store the user signing up to our Amplify Datastore.

Replace the code in your custom.js file withe the following:



/**
 * @type {import('@types/aws-lambda').APIGatewayProxyHandler}
 */

const fetch = require("node-fetch");

exports.handler = async (event, context) => {
  const GRAPHQL_ENDPOINT = process.env.ADD_YOUR_API_ENDPOINT;
  const GRAPHQL_API_KEY = process.env.ADD_YOUR_API_KEY;

  const query = /* GraphQL */ `
    mutation CREATE_USER($input: CreateUserInput!) {
      createUser(input: $input) {
        email
      }
    }
  `;

  const variables = {
    input: {
      email: event.request.userAttributes.email,
    },
  };

  const options = {
    method: "POST",
    headers: {
      "x-api-key": GRAPHQL_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  };

  const response = {};

  try {
    const res = await fetch(GRAPHQL_ENDPOINT, options);
    response.data = await res.json();
    if (response.data.errors) response.statusCode = 400;
  } catch (error) {
    response.statusCode = 400;
    response.body = {
      errors: [
        {
          message: error.message,
          stack: error.stack,
        },
      ],
    };
  }

  return {
    ...response,
    body: JSON.stringify(response.body),
  };
};

The code defines an AWS Lambda function handler. The function is an async function that receives a parameter — event, which contains information about the event that triggered the function. We defined two constants, GRAPHQL_ENDPOINT, and GRAPHQL_API_KEY. Replace their values with your API endpoint and API key credentials

Next, we defined a query constant that contains a GraphQL mutation that creates a user. It accepts an input of type CreateUserInput and returns the email field. We also created an object called variables that holds the input values for the GraphQL mutation. In this case, it sets the email field to the email value extracted from the userAttributes property of the event.request object. This property is set when Cognito calls this Lambda function.

The options object defines the options for the HTTP request. It specifies the request method as POST, sets the headers (including the API key), and converts the query and variables objects into a JSON string for the request body. We also initialized a response object as an empty object which will store the response from the GraphQL server.

We then try to make an HTTP request to the GraphQL endpoint. The request is sent to the GRAPHQL_ENDPOINT with the defined options. If the request is successful, the response is parsed as JSON and assigned to response.data. If the response contains errors, the status code is set to 400.

Deploy and Test the Signup Process

Run the following command at the root of your project to deploy the project and apply the changes to your backend infrastructure.



amplify push

Amplify will display the detected changes and request your confirmation to proceed with the deployment. You can review the changes and enter "Y" to confirm. It will go ahead to create or update the necessary AWS Lambda resources and configurations based on your code.

Let’s go ahead and test the signup process by creating sample user accounts to ensure the Lambda function is triggered when a user signs up, and records are successfully created in DynamoDB. Head over to your browser, and you should see a default sign-in/sign-up UI for users that are not authenticated. Use this form to create a new account.

This function should be triggered before verification since it is pre-signup. If you head back to the Amplify Studio Console for you app, on the Setup menu on the left, select Content. You should see the user's email as shown below.

Monitor CloudWatch Logs

Debugging is crucial to understanding what is happening to your Lambda function. You can use CloudWatch Logs to inspect what is going on.

Open your Amplify Management Console, search for and select Lambda as shown below.

Search for the name of your app, and select the preSignup option. I called mine Dyneapp.

Click on the function.

Click on Monitor and then click View cloudWatch logs.

You should see a log stream, representing the invocation of the Lambda function or trigger event.

Click on the stream to view the detailed log messages for that particular function invocation.

Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.



amplify delete

Conclusion

In this article, we leveraged the power of AWS Cognito Pre Sign Up Lambda Trigger to connect the AWS Cognito User Pool with AWS Amplify database. You now have the knowledge and tools to extend the capabilities of your application beyond simple authentication.

Take Advantage of AWS Amplify’s Push Notification Feature in a React Native App

Christian Nwamba — Thu, 29 Jun 2023 11:15:25 +0000

Engaging customers through various communication channels is important in today's dynamic business landscape. From emails and SMS to push notifications and voice messages, staying connected with your audience is the key to thriving.

This guide focuses on the push notification channel and the logistics of sending these notifications to mobile applications. Although we will focus on IOS applications built with React Native, the concept is essentially the same for Android apps.

We will create a mini React native app and use the AWS Amplify push notification feature and its easy-to-use APIs to set up and receive push notifications in our app. Under the hood, Amplify push notifications uses AWS Pinpoint, an AWS service that would serve as our our method for segmenting and targeting users.

We will first set up and get push tokens. We will then use these tokens to send push notifications from our AWS pinpoint dashboard. Then, we will show how to do the same from a mini Node.js app using the AWS library.

Prerequisites

You need to know the following to proceed with this guide:

Familiarity with React and TypeScript
Understanding of basic mobile app development with React Native
Familiarity with Restful APIs and HTTP

To be able to replicate this guide locally, you need the following:

A MacBook with Xcode 13.4+ and/or iPhone for development.
An Apple developer account, enrolled in the membership program.
An AWS account.

How Push Notification Work

Below is a diagram illustrating the main steps in sending push notifications to mobile devices. Understanding this diagram makes it easier to get started and tweak things in your app. This diagram will form the basis of all the decisions made in this guide. We will briefly explain how it works on a basic level then, based on this explanation, we will see what we need to do to build our mobile app to make this flow possible.

Let's break down how sending push notifications works in simple terms, step by step:

First, the operating system (iOS in our case) asks the user if they want to receive notifications.
If the user accepts, the app interfaces with the device operating system.
Next, the operating system, via HTTP, requests for a "push token," — which is just a string that will be used to send notifications to the device for the mobile app. This token is gotten from the push service and is then sent back to the mobile app
The app sends this token over the internet (using, for example, HTTP) to a backend web server.
When the token arrives at the server, based on its configuration and preferences, it may store the token and associate it with the user's data on some database server. Whenever the server wishes to send the user a push notification, it retrieves the push token, composes the message it wants to send to the device, and passes it to the push provider (in our case, AWS pinpoint).
It then modifies the configuration of the messages, includes any other credentials required to send the message, and then sends it to the push service.
The push service then delivers it to the device, which is displayed on the user's device. This behavior when the notification gets to the device, depending on whether the mobile app it is intended for is open (app in foreground ) or not(the app is closed or in the background ), is handled accordingly. Later in this guide, we will see how to handle all these situations.

You may wonder why the backend, — our custom API, does not directly send the message request straight to the Push service. Why does it have to go through the push provider first?

Well, technically, the backend could send notification requests directly to the push service. However, by doing so, the backend would miss the benefits provided by the notifications provider. These advantages include analytics, tracking metrics when users receive notifications, conducting campaigns (sending messages to users at specific times), managing user journeys, and more. These features are common requirements for businesses when sending out notifications.

Development Environment

As of the time of writing, this project was tested on an Intel MacBook with macOS 13.3, Xcode 14.7, and an iPhone running IOS 16.5.

Project Setup

We will revisit our push notifications diagram later, but for now, let's create a React native project.

Run the following command in your terminal:



npx react-native@latest init notificationsapp

The above command creates a bare react native mobile app in a folder called notificationsapp. Feel free to give yours any name that suits you.

Next, let us preview this app. Remember, we will only focus on the IOS part of things. We can get push tokens from simulators on MacBooks with an M1 or M2 chip. You can directly run the app on your simulator.

Run the following command in your terminal:



npx react-native run-ios

If you are running on a MacBook with an Intel processor, we will need to preview on an actual device to get push tokens. Open the ios folder in your newly created project and open the .xcworkspace folder in Xcode, then follow this guide to have it up and running on your device.

You should see the app running on your device, as shown below.

Now that we have our App up and running let's update the App.tsx file with the following:



import React, { useEffect } from "react";
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
} from "react-native";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { handleBadgeUpdate } from ".";

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === "dark";
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? "light-content" : "dark-content"}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}
      >
        <Text
          style={[
            styles.sectionTitle,
            {
              color: isDarkMode ? "white" : "black",
            },
          ]}
        >
          ios notifications example 😊
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 24,
    fontWeight: "600",
    marginTop: 70,
    textAlign: "center",
  },
});

export default App;

Once our app refreshes, it should look like the one in the image below.

Setting up Amplify

You need to configure the Amplify CLI locally, and connect it to your AWS account. Run the following command in your terminal:



npm install -g @aws-amplify/cli

Now that the CLI is ready lets now head over to the root of our react native project and run this command:



amplify init

This command will ask you to select a name for your application here, and I called mine notificationsapp. The CLI will also detect that we are developing a React native app and presents us with some default options to accept.

Once this is done, it will create amplify and src folders at the root of our project. The amplify folder holds all the configurations for all the services we will use in our project, with all the cloud formation templates required to create these resources on our AWS console.
We are only interested in the contents of the src/aws-exports.js file, which will be used later to configure the Amplify library.

You should also see a newly created amplify project on your AWS account, as shown below.

Adding Amplify Push Notifications

Next, we need to integrate the push notifications feature to our app. There are several things we need to put in place to add this functionality but first, let us take a closer look at our push notification diagram once more.

The diagram doesn't specify how our app will get installed on the user's device, so our app needs to have a provisioning profile. Xcode already created one for us to use during development; that is why we could build and run our app on an iOS device.

When you are ready to push your application to the app store, you need to create one from your developer account, but since we are only testing, we are fine with the default one created during development.

When the operating system requests a push token from the push service, the push service won’t just respond to that request and generate tokens randomly because the OS requests it. It needs to know the app and ensure it supports receiving push notifications. It needs an app or bundle id to do that.

Let's create an app id that supports push notifications and add this capability to our app from Xcode.

Create an App Id That Supports Push Notifications

Head over you your Apple Developer account and select identifiers from the page.

Click the plus icon to create a new App id of type App.

Add a description and name for your app id. Here we called ours com.notiapp.noti12345. Scroll to the bottom of the page and check push notifications in the Capabilities section.

Review all the changes, then click the Register button to register your new app id, as seen below.

You should now see a newly created app id in the identifiers section.

Now head over to your <YOUR-PROJECT-NAME>.xcworkspace file on Xcode, and in the Signings & Capabilities tap, update the bundle identifier with your newly created app id. Next, click on the + Capability button.

Next, add push notifications capability by searching for and selecting it.

Push notification capability means we also want our app to receive notifications when the app is in the background. Let's add background capabilities to our app and turn on remote notifications by searching for and selecting background mode capabilities, then checking remote notifications.

This should be all for now.

Generate an SSL Certificate That Is Bound to Our App Id

In the push notifications diagram, when the push notifications provider sends a request to the push service to send a notification to a device with the push token, the push service will not just randomly respond to message-sending requests from any random server because it could be a malicious attempt to spam or mislead users. We need to generate an SSL certificate that is bound to our app id and is known only to the push provider and the push service so that each time the push provider wants to send a message, it presents this certificate to validate the request and send the message to the targeted device.

Let's create and download a certificate signing request. Head over to your keychain from your device utilities. Create one and download the file as shown below.

Head to the Identifiers section on your Apple Developer account, and select your newly created app. In the capacities tab, scroll to push notifications and click configure, as seen below.

Under Production SSL Certificate, click the Create Certificate button.

Upload your Certificate Signing request file to create the new certificate, then download and save the resulting certificate to your local machine.

Double click on the downloaded file to install it on your keychain.

Open your keychain app and search for the installed certificate. The certificate's name will be the same as your app id's. Click on Export items from the File menu bar and export in .p12 format. Take note of the path pointing of this file, as we will use it later.

This step only applies to users developing with Intel-based MacBooks. Since these users need to test their app on an actual device to be able to get push tokens, they need to register their device on their Apple developer account to receive push notifications and get an error while developing as shown below.

Register Your Device

Head over to the Certificate, Identifiers & Profile section of your Developer Account and click on Devices from the menu. Click on the plus icon to add a device, specify the device platform, a random name of your choice, and the device UDID, then click register as shown below.

Now we can go ahead and add push notifications to our app. At the root of your project, run this command in your terminal:



amplify add notifications

In the prompt, choose to enable the Apple Push Notifications channel and then choose a certificate and specify a relative path to the certificate with a .p12 extension as shown below.

Once this is successful, the amplify folder will be updated accordingly, and our new AWS pinpoint app will be created on our dashboard as shown below

Next, let’s install the necessary libraries we will need to complete our setup. Run the following command in your terminal:



npm install aws-amplify @aws-amplify/rtn-push-notification amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill{% raw %}`
```

Let's update our `index.js` file to use the `react-native-get-random-values` and `react-native-url-polyfill` modules.

```
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

```

Next, let's link all the installed modules to our ios directory. Run the following command at the root of your project:

```
npx pod install
```

If you get an error like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poh9spndvwxxpl88bp0e.png)

Remember, Amplify push notifications is geared to only work on iOS apps with a deployment target of at least iOS 13.0. To resolve this issue, open the `ios` folder in your app and update your podfile as shown below:

```
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, "13.0"
prepare_react_native_project!
```

Then in your `ios` folder clear existing pods by running the following command:

```
pod deintegrate
```

Finally, run this:

```
pod install
```

This should fix the issue.

Now open the `<YOUR PROJECT NAME>.xcworkspace` file in XCode and make the following updates.

Update the `Appdeligate.m` file to match the following:

```
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import "AmplifyPushNotification.h"

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 self.moduleName = @"notificationsapp";
 // You can add your custom initial props in the dictionary below.
 // They will be passed down to the ViewController used by React Native.
 self.initialProps = @{};
 return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
 return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
 return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
///
/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
- (BOOL)concurrentRootEnabled
{
 return true;
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
 [AmplifyPushNotification didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
 [AmplifyPushNotification didReceiveRemoteNotification:userInfo withCompletionHandler:completionHandler];
}
@end
```

This file is the root file of any iOS project. It holds the code and configurations our app uses during startup and the interactions between our app and the operating system, irrespective of whether our application is running. 

We updated it with some imports from the Amplify notification model. We added two methods to handle registration for push tokens and handling incoming notifications.


## Building the Frontend

So far, we focused more on the configuration part of things. We already know how push notifications work, so we will make changes to our `index.js` and `App.tsx` files and then map these changes to the steps in our push notifications diagram.

Update your `index.js` file to match the following:

```
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import {Alert, AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {Amplify, Notifications} from 'aws-amplify';
import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);
Notifications.Push.enable();

AppRegistry.registerComponent(appName, () => App);
```

Next, update your `App.tsx` file to match the following:

```
import { Notifications } from "aws-amplify";
import React, { useEffect } from "react";
import {
  Alert,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
} from "react-native";
import { handleBadgeUpdate } from ".";
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === "dark";
  const backgroundStyle = {
    backgroundColor: isDarkMode ? "white" : "black",
  };

  async function handlePermissions() {
    const status = await Notifications.Push.getPermissionStatus();
    if (status === "SHOULD_REQUEST") {
      await Notifications.Push.requestPermissions({
        sound: true,
        badge: true,
      });
    }
    if (status === "SHOULD_EXPLAIN_THEN_REQUEST") {
      await Notifications.Push.requestPermissions({
        sound: true,
        badge: true,
      });
    }
  }

  const tokenReceivedHandler = (token: string) => {
    console.log({ token });
  };

  useEffect(() => {
    handlePermissions();
    const listener = Notifications.Push.onTokenReceived(tokenReceivedHandler);
    return () => listener && listener.remove();
  }, []);

  return (
    <SafeAreaView style={backgroundStyle}>
      {
        {
          /* rest UI*/
        }
      }
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  // styles
});
export default App;
```

The `index.js` file starts by using the amplify configuration in the `src/aws-exports.js` file to configure the amplify library. Next, we enable push notifications by calling the `enable()` method next in our `App.tsx` file. When this component mounts, we run an effect that requests permission from the user to receive push notifications via the `handlePermission()` method, where it requests the user's permission to receive notifications based on what the existing permission status allows. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e35sogegf3bfco29ylb.png)

If the user accepts, we also register a listener when our app receives a push notification after the operating system resolves it. We do this by calling the `Notifications.Push.onTokenReceived()` method, which gets fed a callback called `tokenReceivedHandler`, which receives the push token as a parameter and prints it to the console as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f19yxi2gv9lkve6lf7sk.png)

You could configure an API endpoint to send the token to your backend somewhere, but we are fine with just printing it to our console for now. 

Now that we have the push token, the next thing is to use this token to send users notifications. Let's copy the push token and head over to our AWS pinpoint dashboard.

## Sending Test Push Notifications from AWS Pinpoint Dashboard

On your AWS pinpoint dashboard, select your newly created pinpoint project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12iyfd57p39pv4x1bxwn.png)

Let's now send a simple push notification to our device from our pinpoint dashboard. We will do so via the following steps, ensure that the mobile app is closed or in the background before you go through this step so that the notification will pop up and appear in the notification drawer.


1. Select test messaging from the sidebar.
2. In the form, select the push notification channel.
3. Input the target device token; you can specify multiple tokens separated by a comma.
4. Select the push notification service. Since we are developing, we selected APN sandbox, which is the service used to send notifications during testing.
5. Usually, you can send standard or raw notifications when sending push notifications. We will explore raw notifications when we write code using the AWS SDK later.
6. Specify the title and body of the message.
7. Select an action when the user clicks on the notification. We just want to open the users' app.
8. Click send to send the message.


You should now see the message displayed on your device or emulator, as shown below, and clicking on the message automatically opens your App.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs8trrkb9r56n1p2qv0l.png)

While this works, remember that the OS only displays a notification like this when the App is in background mode or closed. So what happens if the App is active or in the foreground? Well, we can also add a listener to handle this situation. Update your `App.tsx` file to match the following:

```
import {Alert,   SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,} from 'react-native'

function App(): JSX.Element {
//...

 useEffect(() => {
    handlePermissions();
    const listener = Notifications.Push.onTokenReceived(myTokenReceivedHandler);
    Notifications.Push.onNotificationReceivedInForeground(async message => {
      if (message.body) {
        Alert.alert(message.body);
      }
    });
    return () => listener && listener.remove();
  }, []);

return 
  ( <SafeAreaView style={backgroundStyle}>
      //...
   </SafeAreaView>)
}
```

Now, when we get a notification while the App is in the foreground, we get an alert on our screen with the body of the message as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rpat6uflpecs5wcgcay.png)

You can also use this function to inform your notification provider that a user has received a notification to record metrics. Amplify push also provides a `Notifications.Push.onNotificationReceivedInBackground` method you can register in your `index.js` file, not **** in an app component. Since it is assumed that the app is not in the foreground when running, you can also use this to log metrics or do other work.

## Sending Push Notifications from Code

Typically, in real-world apps, you will want to send push notifications from your code, not from some custom UI. Also, unlike the example above, in most cases, you want to attach some `json` data to your notifications and customize them to meet your needs, add notification badges, etc.

Let's write a mini Node.js script to do that.

```
mkdir sample
cd sample
npm init --y
touch push.js
npm install aws-sdk

```

Update the `push.js` file to match the following:

```
"use strict";
const AWS = require("aws-sdk");
const region = "us-east-1";
var applicationId = "e5e878550b874d4b8148511c16873af4";

function CreateMessageRequest() {
    var recipientPushToken =  "b6a6cafb435111685b948fad5891b57560868104a47165c4fe21e0119387dfe4"
    var messageRequest = {
        Addresses: {
            [recipientPushToken]: {
                ChannelType: "APNS_SANDBOX",
            },
        },
        MessageConfiguration: {
            APNSMessage: {
                Action:"OPEN_APP",
                RawContent: JSON.stringify({
                    name: "benzo",
                    some_property:"yupeee!"
                    aps: {
                        alert: {
                            title: "test title from notifications app",
                            body: "app says howdy! 👋",
                        },
                        sound: "default",
                        badge: 2,
                    },
                }),
            },
        },
    };
    return messageRequest;
}

function SendMessage() {
    var messageRequest = CreateMessageRequest();
    AWS.config.update({ region: region });
    var pinpoint = new AWS.Pinpoint();
    var params = {
        ApplicationId: applicationId,
        MessageRequest: messageRequest,
    };
    pinpoint.sendMessages(params, function (err, data) {
        if (err) console.log(err);
        else console.dir(data);
    });
}

SendMessage();
```

This snippet just makes a request to the `push` service to send a notification to some user's device. It calls the `sendMessage` custom function, which creates a request by invoking the `createMessageRequest()` function, which returns an object with two properties.
The first property, `Addresses` holds the list of recipients we want to send the message to, and each key in this object is the recipient's push token, and the value is an object for the push notification service.

The second property, `MessageConfiguration` holds information about the message to be sent. We specified an action to open the app when the notification is clicked. Next is the `rawMessage` property. Remember earlier, when we sent a notification from our pinpoint dashboard, we said we could send standard or raw notifications. Typically, in most cases, you will send raw notifications since they allow you to add any JSON data, and that's why we used the `rawMessage` property.

First, we specified some hardcoded random properties we wanted to be part of the message. We trivially chose `name` and `some_property`. Finally, we specify a mandatory `aps` property. We also instruct the system to play the default notification sound when the message arrives and a hardcoded app badge of 2 so that the operating system sets a badge like the one shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3vw8rti9jbuw83qcsoy.png)

The maximum size of a push notification’s payload is 4KB, so try to keep things minimal.

Once this object is created and returned from the `createMessageRequest` function, we update the AWS SDK with our preferred origin, after which we create an AWS pinpoint instance and invoke its `sendmessages` method, which gets fed an object with our message request and our AWS pinpoint app id. The response is logged to the console if the call succeeds or fails.

Open your terminal and run the following:

```
node push.js
```

If the message was sent successfully, a response is printed to the console, like the one below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyhil4g5eo2kgmae4h6w.png)


## Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.

```
amplify delete
```


## Conclusion

Push notifications continue to remain a popular channel to engage users on mobile and web applications. This guide explains how push notifications work and explores an easy way to integrate this feature in an IOS app.

Build a Multi-User Chat App with AWS Amplify

Christian Nwamba — Tue, 13 Jun 2023 11:39:08 +0000

In today's world, technology touches practically every part of our lives. We depend significantly on applications and platforms that enable smooth and effective communication, and chat apps are an essential component of this digital ecosystem. Chat apps like WhatsApp, Slack, and Teams have transformed communication and collaboration. They have become vital for staying in touch with friends and family, discussing projects with coworkers, and even networking with professionals in various areas of our lives.

As a developer, if you want to build a multi-user Chat app, AWS Amplify is a great solution that streamlines the development process efficiently. AWS Amplify is a comprehensive development platform that provides various services such as authentication, APIs, storage, and more, making it easier to build sophisticated applications. Amplify offers a managed GraphQL service, a robust API technology that allows clients to request exactly the data they need and real-time updates on that data.

In this article, we'll look at how to build a real-time chat application using React and AWS Amplify GraphQL API, a part of Amazon's cloud services that allows developers to build and deploy secure, scalable cloud apps.

Prerequisites

To follow this tutorial, you'll need:

An AWS account. If you don't have one, you can create an account here.
Node.js v14.x or later and npm v6.14.4 or later

This tutorial also assumes that you're familiar with the basics of both JavaScript/ES6 and React.

Set up Your Development Environment

You need to configure the Amplify CLI locally, and connect it to your AWS account. Run the following command in your terminal:



npm install -g @aws-amplify/cli

Create an AWS Amplify Project

If this is your first app, scroll to the bottom of the page in the Amplify Studio section, select Get started. Name your app, and select Confirm Deployment.

If you’ve created an Amplify App in the past, follow the steps below:

Select New app in the upper right-hand corner, and select Build an app from the dropdown menu.

Name your app, and select Confirm Deployment.

This would take a few seconds as Amplify need some time to set up a new project. Once that is completed, click the Launch Studio button.

It also has a Content Management System (CMS), which is incredibly useful for viewing and manipulating user data.

You should now see the Home menu for our application. To learn more, see the Amplify Studio introduction.

Set up Authentication

We need to set up authentication for our app so that users can create accounts and sign in, and only authenticated users can use the app.

Writing the code for an application's login flow can be difficult and time-consuming. In Amplify Studio, you can easily add a complete Amazon Cognito authentication solution to your app. When you specify the login method, you will be provided with the Authenticator UI component for the entire authentication flow.

As seen in the video below:

Select the Authentication option in the setup menu on the screen's left side. You don't need to choose a login method in the Configure login section, as Email is already selected as the default option.
Scroll down to the Configure Signup settings section. You should see the Password protection settings in this section. Click on this to see a variety of security options for user passwords.
Click the Deploy button*,* acknowledge the warning, and select

Confirm Deployment.

You should see the progress of this deployment process — a visual representation of how your setup is being deployed in the AWS environment.

This process should take a bit of time, but when it is done, you should see a confirmation message saying that you’ve successfully deployed authentication.

Create Data Model

Next, we need to define a data model for the chat app to store the chat messages. One of the features that Amplify provides is the ability to create data models, which represent the structure of the data your application will work with. The Studio data model designer provides a visual way to achieve this.

When you define your data models, AWS Amplify creates corresponding AWS AppSync GraphQL APIs to allow your application to interact with the data and Amazon DynamoDB tables based on those models.

Follow the steps below to create a data model for your app:

On the Setup menu on the left, select Data, and select Add model.

As seen in the image below, we call our data model Chat for this example. Click the Add a field link, and in the field that appears, type in "text".
For this text field, you will notice an option labeled 'is required' to the right. Check this box to make this a mandatory field. Add another field to the data model, and for this, type in "email".
Once you have completed these steps, find and select the Save and Deploy button. Acknowledge the warning, and select Deploy.

The deployment should take a few minutes, but once it is completed, you should see a message saying you've successfully deployed the data model.

Set up React Project

To keep the focus of this guide on building our chat app, I'll skip the steps in setting up certain dependencies, such as Tailwind CSS for styling and date-fns for date formatting.

Run the following command from your preferred directory to clone a React starter project that already includes these dependencies.



git clone https://github.com/ifeoma-imoh/amplify-chatty-starter.git

Run the following command to navigate into the realtime-chat-app directory, install the dependencies, and start up your development server:



cd realtime-chat-app
npm install
npm start

This lets you see the output generated by the build. You can see the running app by navigating to http://localhost:3000.

Dependency: Make sure you have AmplifyCLI configured before executing the pull command.

From your projects directory, paste the copied command into the terminal and then execute it. A typical instance of this command would appear as follows:



amplify pull --appId d2act21onzf92o --envName staging

When you execute the command, you will be automatically redirected to your web browser to grant authorization. Once there, click 'Yes' to authenticate with Amplify Studio.

Accept the default values highlighted below:

The Amplify CLI will automatically carry out the following steps for you:

Amplify will create a new project in the current local directory. This is indicated by the creation of an amplify folder in your project's root directory, which contains all of your project's backend infrastructure settings.
It creates a file called aws-exports.js in the src directory of your React application. It holds all the configuration for the services you create with Amplify, allowing the Amplify client to access necessary information about your backend services, such as API endpoints, authentication configuration, etc.

Next, we need to generate the necessary GraphQL operations (queries, mutations, subscriptions) based on our schema that will be used to interact with our API.

Run the following command at the root of your project:



amplify codegen

This command will generate the necessary GraphQL operations and save them in a graphql directory in src/graphql directory. These operations are ready-to-use and can be imported into your React components to interact with your API.

Install Amplify Libraries

The first step to using Amplify in the client is to install the necessary dependencies:

Run the following command to install the Amplify Libraries:



npm install aws-amplify @aws-amplify/ui-react

The aws-amplify package is the library that enables you to connect to your backend resources. The @aws-amplify/ui-react package includes React-specific UI components that you can use to build your app UI.

We installed the Amplify UI package to use the Amplify Authenticator-connected UI components. It provides the entire authentication flow using the configuration specified in your **aws-exports.js** file.

Configure Amplify

For your application to communicate and interact with the services provided by AWS, we need to configure AWS Amplify for use throughout the project.

In your app's entry point index.js, import and load the configuration file:



import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

// Add these lines
import { Amplify } from "aws-amplify";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

In the code above, we import the Amplify library and configuration details from the aws-exports.js file.

We then configure AWS Amplify with the details we imported. This setup ensures that the Amplify library knows about your specific backend setup and can interact with it correctly.

Protect Your App UI with Amplify Auth

One way to add authentication capabilities to our application is by using the Amplify authentication UI components, which provide the entire authentication flow for us, using your configuration specified in our aws-exports.js file.

Open your **src/App.js** file and import the withAuthenticator component below the last import.



import "@aws-amplify/ui-react/styles.css";
import { withAuthenticator } from "@aws-amplify/ui-react";

Here, we import the withAuthenticator higher-order component from the AWS Amplify UI React library. This component automatically provides a pre-built sign-in and sign-up interface for your app and the associated functionality. The first line imports the default styling for these UI components.

Next, update the code in your **src/App.js** file to match the following:



import React from "react";
//...

function App({ user, signOut }) {
  return (
    <div>
      <div className="flex justify-end px-4 py-2">
        <button
          type="button"
          className="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
          onClick={() => signOut()}
        >
          Sign Out
        </button>
      </div>
      <div className="flex justify-center items-center h-screen w-full">
        Hello World
      </div>
    </div>
  );
}

export default withAuthenticator(App);

For now, The App function is a simple React component that displays a greeting message and a sign-out button. It receives signOut and user props. The signOut function is used to log the user out of the application, and user contains the details of the currently logged-in user.

Next, we wrap the App component with the withAuthenticator higher-order component, thereby adding authentication functionality to the app. When the App component is exported in this way, only authenticated users can access the app’s UI.

Now if you head over to your browser, you should see a default sign-in/sign-up UI for users that are not authenticated.

Use this form to create and authenticate a new account to access the app. After a successful sign-in, you should see the user logged to the console.

Display User Chat Messages

Let's create a text input field that gives immediate feedback by displaying any text typed into it on the screen when the user hits the 'Enter' key. Update the code in your **src/App.js** file to match the following:



function App({ user, signOut }) {
  const [chats, setChats] = React.useState([]);
  // console.log(user);
  return (
    <div>
      <div className="flex justify-end px-4 py-2">
        <button
          type="button"
          className="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
          onClick={() => signOut()}
        >
          Sign Out
        </button>
      </div>
      <div className="flex justify-center items-center h-screen w-full">
        <div className={`w-3/4 flex flex-col`}>
          {chats}
          <div>
            <div className="relative mt-2 flex items-center">
              <input
                type="text"
                name="search"
                id="search"
                onKeyUp={async (e) => {
                  if (e.key === "Enter") {
                    setChats([...chats, e.target.value]);
                  }
                }}
                className="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              />
              <div className="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                <kbd className="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">
                  Enter
                </kbd>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default withAuthenticator(App);

In the code above, the App component renders a text input for creating new chats. We created a state variable called chats that will be used to store the chat messages we will fetch from the GraphQL API.

For now, when a user enters a text and hits the Enter key on the keyboard, the value of the input field is passed into the setChats function to update the local state.

Right now, when the user types a message and hits Enter, the message is displayed on the screen immediately. This is just a placeholder functionality we have put in place for now.

Next, we will work on fetching and displaying real-time messages using the GraphQL API for a complete chat experience.

Store the Chat Messages

Let’s create GraphQL mutations using the user's input to create new chat messages. Update the code in your **src/App.js** file to match the following:



//...

// Import these
import { API } from "aws-amplify";
import * as mutations from "./graphql/mutations";

function App({ user, signOut }) {
  const [chats, setChats] = React.useState([]);
  return (
    <div>
      <div className="flex justify-end px-4 py-2">
        <button
          type="button"
          className="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
          onClick={() => signOut()}
        >
          Sign Out
        </button>
      </div>
      <div className="flex justify-center items-center h-screen w-full">
        <div className={`w-3/4 flex flex-col`}>
          {chats}
          <div>
            <div className="relative mt-2 flex items-center">
              <input
                type="text"
                name="search"
                id="search"
                onKeyUp={async (e) => {
                  if (e.key === "Enter") {
                    // Remove this line
                    // setChats(e.target.value);

                    // Add these
                    await API.graphql({
                      query: mutations.createChat,
                      variables: {
                        input: {
                          text: e.target.value,
                          email: user.attributes.email,
                        },
                      },
                    });
                    e.target.value = "";
                  }
                }}
                className="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
              />
              <div className="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                <kbd className="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">
                  Enter
                </kbd>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default withAuthenticator(App);

In the code above, we import API from the AWS Amplify library, which provides the ability to interact with the GraphQL API. It also imports mutations from the graphql/mutations file.

When the user types something in the input field and presses Enter, it triggers the onKeyUp event. The function it receives sends a GraphQL mutation request to create a new chat.

The mutation request is made using API.graphql, and we’re passing it an object that includes our mutation and the input variables. query refers to the specific GraphQL mutation that should be made (in this case, mutations.createChat defined in the imported mutations file). variables is an object that provides the input data for the mutation (the chat text and the user's email). The structure of this input matches what our mutation expects according to our GraphQL schema.

After the mutation request, we clear the input field by setting e.target.value to an empty string.

Type in new messages and hit the “Enter” key on you keyboard. To view them, navigate to the Amplify Studio dashboard for your application. Inside Amplify Studio, locate the "Manage" section in the sidebar on the left. Within this section, select "Content". The chat messages are stored in a DynamoDB database managed by AWS Amplify.

Fetch the Chat Messages

Now, we are set to fetch and display all the chat messages stored in our Amplify database using a GraphQL query. Update the code in your **src/App.js** file to match the following:



//...

import { API } from "aws-amplify";
import * as mutations from "./graphql/mutations";

// Import these
import * as queries from "./graphql/queries";
import intlFormatDistance from "date-fns/intlFormatDistance";

function App({ user, signOut }) {
  const [chats, setChats] = React.useState([]);

  // Add these
  React.useEffect(() => {
    async function fetchChats() {
      const allChats = await API.graphql({
        query: queries.listChats,
      });
      console.log(allChats.data.listChats.items);
      setChats(allChats.data.listChats.items);
    }
    fetchChats();
  }, []);

  return (
    <div>
      //...
      <div className="flex justify-center items-center h-screen w-full">
        <div className={`w-3/4 flex flex-col`}>
          {/* Add these */}
          {chats
            .sort((a, b) => a.createdAt.localeCompare(b.createdAt))
            .map((chat) => (
              <div
                key={chat.id}
                className={`flex-auto rounded-md p-3 ring-1 ring-inset ring-gray-200 w-3/4 my-2 ${
                  chat.email === user.attributes.email && "self-end bg-gray-200"
                }`}
              >
                <div>
                  <div className="flex justify-between gap-x-4">
                    <div className="py-0.5 text-xs leading-5 text-gray-500">
                      <span className="font-medium text-gray-900">
                        {chat.email.split("@")[0]}
                      </span>{" "}
                    </div>
                    <time
                      dateTime="2023-01-23T15:56"
                      className="flex-none py-0.5 text-xs leading-5 text-gray-500"
                    >
                      {intlFormatDistance(new Date(chat.createdAt), new Date())}
                    </time>
                  </div>
                  <p className="text-sm leading-6 text-gray-500">{chat.text}</p>
                </div>
              </div>
            ))}

          <div>
            <div className="relative mt-2 flex items-center">//...</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default withAuthenticator(App);

At the top of the file, we import queries from the graphql/queries file, which was auto-generated by the CLI. In the App component, we define a useEffect hook. This hook runs the provided function — fetchChats, after the first render of the component, and every time the values in the dependency array change.

The fetchChats function fetches all chat items by making a GraphQL query request using the API.graphql method and the listChats query. The result is an array of chat objects which we log to the console and update the chats state variable with the fetched chats.

In the JSX returned by the component, we map over the chats array to create a list of chats, each representing a chat message.

The chats are sorted by creation time to ensure the most recent chats appear last. We displayed the user's email for each chat but only the part before the "@" sign. We displayed the time when the chat was created using the intlFormatDistance function (imported from the date-fns library) to format the time as a relative time string. We also visually distinguish chats sent by the current user using a different background color.

Refresh your browser now, and you should see the chat messages displayed nicely as seen below.

If you type in a new chat message, you’d have to manually refresh your browser to see it displayed on the screen. Next up, we need to set up a mechanism for updating our app in real-time.

Subscribe to Data

Subscriptions are a part of the GraphQL spec, where the server can actively update its clients when certain events occur. It is a way to incorporate real-time data flow into your application, keeping it updated without needing constant manual refreshes like we did in the previous section. It is like having a direct channel between the server and your app where the server constantly notifies your app about any changes that you have specified as significant.

Update the code in your **src/App.js** file to match the following:



//...

// Import graphqlOperation
import { API, graphqlOperation } from "aws-amplify";

//...

//Import this
import * as subscriptions from "./graphql/subscriptions";
function App({ user, signOut }) {
  const [chats, setChats] = React.useState([]);

  //...

  // Add this
  React.useEffect(() => {
    const sub = API.graphql(
      graphqlOperation(subscriptions.onCreateChat)
    ).subscribe({
      next: ({ provider, value }) =>
        setChats((prev) => [...prev, value.data.onCreateChat]),
      error: (err) => console.log(err),
    });
    return () => sub.unsubscribe();
  }, []);

  return (
    <div>
      <div className="flex justify-end px-4 py-2">//...</div>di
    </div>
  );
}

export default withAuthenticator(App);

In the code above, we import the necessary dependencies: graphqlOperation from AWS Amplify, which allows us to build a subscription GraphQL query and our GraphQL subscriptions from a local file.

Then, we define a new useEffect hook, which is subscribing to a GraphQL subscription.
Within this hook, we subscribe to the onCreateChat subscription. When a new chat is created, our GraphQL server will send this data to our client.

The subscribe function takes an object with up to three properties: next, error, and complete. In our case, we only use next and error. next is a function that will run whenever new data is sent from our server. Here, it's updating our chats state with the new chat message. error is a function that will run if errors occur when setting up the subscription or receiving data.

Finally, the hook returns a cleanup function, which will run when our component is unmounted. This function unsubscribes from the GraphQL subscription to clean up potential memory leaks.

If you head over to your browser and type in a chat message now, you should see it displayed on the screen immediately.

Go ahead and test the app with multiple users by creating a new account on a different browser.

Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.



amplify delete

Conclusion

From creating data using GraphQL mutations to fetching and displaying it in a user-friendly interface, we've explored how to effectively leverage AWS Amplify's powerful capabilities to build a chat application.

This demonstrates the strength and flexibility of AWS Amplify. While we've focused on building a chat application, the techniques we've covered have much more to offer and can be applied to various projects.

Deploy an Astro Blog to AWS Amplify

Christian Nwamba — Tue, 28 Mar 2023 15:53:45 +0000

Astro.js is a modern web development framework that allows developers to build static websites and web applications using components, with support for server-side rendering, data fetching, and other advanced features.

AWS Amplify Hosting, is a subset of AWS Amplify tools and features that enable developers to deploy and manage their web applications with ease.

In this tutorial, we will cover the steps required to deploy an Astro.js website to AWS Amplify Hosting.

Create an Astro Project

Run the following command to create an Astro project on your computer:

npm create astro@latest

Give the project a name.

Choose the blog template so we can test with a production ready blog website. Go with the default settings for the rest of the wizard prompts.

Run the following to ensure that your set up works:

npm run dev

Setup Walkthrough

The website has a static home page, about page and blog index page that aggregates all your blog posts. It also has a statically generated blog pages for each blog entry.

The home and about pages are direct children of the pages folder while the blog page is an index.astro file inside pages/blog folder. The statically generated pages are setup with the slug file in pages/blog folder.

Deploy to AWS Amplify

You need to have a git repository deployed to a git provider such as Github. With a git repository, Amplify Hosting can set up continuous delivery automatically. Commit all your changes to Git and push your website to Github.

Go to your AWS console and search AWS Amplify. Open it, click the New App dropdown and choose Host web app:

Choose your Git provider and click Connect branch

Choose the repository, select a branch and click Next

In the build settings page, choose Create new environment and choose a role or create a new role that allows Amplify Hosting to access your resources.

Click Edit to edit the build settings. Change the baseDirectory to dist and click save.

Click Next and Click Save and Deploy. Give the deployment process a minute or two and once it is done, click the production URL to preview the website.

Conclusion

Congratulations! You have successfully deployed your Astro.js website to AWS Amplify Hosting. By leveraging the power of AWS Amplify, you can easily host and scale your website with minimal effort, allowing you to focus on building great web experiences for your users.

Resources

How to Add in-App Messaging to Your React App

Christian Nwamba — Tue, 14 Mar 2023 15:49:12 +0000

AWS Amplify provides an easy way to engage your customers through in-app messaging. With in-app messaging you can segment your customers, engage with them both when they are online and offline, and record analytics based on their engagement and behavior.

With AWS Amplify, you can quickly integrate in-app messaging functionality into your React app without the need to build everything from scratch. In this guide, I'll walk you through the steps needed to set up and configure AWS Amplify for your React app, and show you how to add in-app messaging.

What to Expect

You will watch me take a small shopping app and extend it so customers can get notified of a discount when they add a particular item to cart. Here’s a video that shows what you should be able to do by the end of this article:

Set up the Starter

Run the following command to setup the starter React project if you would like to follow along:

npx degit christiannwamba/inapp-react#starter

cd into the cloned starter and run

npm install

Once the dependencies have been installed, run the following to start the app:

npm run dev

Starter Overview

The app we have just set up is a demo that generates positive word cards and allows you to shop for them. You can add the words to cart. You can increase the cart items. You can also decrease them.

There is also a cart page where you can either review your cart or update the items in the cart.

You can click on the select box to update the quantity of a specific item in the cart. You can also remove items from cart here. If you find what you like in the related products section, you can also add them to cart.

The cart has a summary section where you can review the total of items in your cart after taking tax and shipping cost into consideration.

The project is set up with Tailwind so all the styles are inline and you can hover on them if you have the VS Code extension to show the styles used.

The data is generated by randomizing a list of positive words and turning them into an array of objects. Each object has an ID, the positive word, a randomly generated color for the background of the card, and the price.

//lib/data.js
const positiveAdjectives = [
  "Cute",
  "Calm",
  //...
];
export function createData() {
  return Array.from(Array(36).keys())
    .sort(() => Math.random() - 0.5)
    .map((n) => {
      n = n * 10 === 0 ? 1 : n * 10;
      return {
        id: n,
        positiveAdjective: positiveAdjectives.pop(),
        hue: n,
        saturation: 49,
        light: 44,
        price: "$" + Math.floor(Math.random() * (400 - 100) + 100),
      };
    });
}

I am caching the generated data in the localstorage using a custom hook so you don’t have to always generate the data every time the component that uses it renders.

//lib/data.js
import React from "react";
//...
export function useProducts() {
  const [products, setProducts] = React.useState([]);
  React.useEffect(() => {
    if (localStorage.getItem("products")) {
      setProducts(JSON.parse(localStorage.getItem("products")));
    } else {
      const productList = createData();
      localStorage.setItem("products", JSON.stringify(productList));
      setProducts(productList);
    }
  }, []);
  return products;
}

The home page uses a list of cards from the data to render a Products component.

// pages/index.js
import React from "react";
import Layout from "@/components/Layout";
import Products from "@/components/Products";

import { useProducts } from "@/lib/data";

export default function Home() {

  const products = useProducts();

  return (
    <Layout>
      <div className="border-b border-gray-200 pt-16 pb-10">
        <h1 className="text-4xl font-bold tracking-tight text-gray-900">
          New Arrivals
        </h1>
        <p className="mt-4 text-base text-gray-500 max-w-2xl">
          Checkout out the latest release of inspirational cards, new and
          improved with more colors and punchy positive words!
        </p>
      </div>

      <Products products={products} />

    </Layout>
  );
}

The cart page fetches a list of cart from the local storage and renders them.

// pages/cart.js
import Layout from '@/components/Layout';
import { useCart } from 'react-use-cart';
import React from 'react';
import CartItems from '@/components/CartItems';
import OrderSummary from '@/components/OrderSummary';
import RelatedProducts from '@/components/RelatedProducts';
export default function Cart() {
  const [products, setProducts] = React.useState([]);
  const { items, updateItemQuantity } = useCart();
  React.useEffect(() => {
    setProducts(items);
  }, [items]);
  return (
    <Layout>
      <div className="bg-white">
        <main className="px-4 pt-16 pb-24 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Shopping Cart
          </h1>
          <form className="mt-12 lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-12 xl:gap-x-16">
            <CartItems
              products={products}
              updateItemQuantity={updateItemQuantity}
            />
            <OrderSummary products={products} />
          </form>
          <RelatedProducts />
        </main>
      </div>
    </Layout>
  );
}

All the components in this project are for presentation purpose which means they mostly take props and render data based on the props. The only exception is the product component which adds and removes items from the cart.

The cart is managed by react use cart which allows you to add items to cart, remove items from cart, get items that are the cart and so on. The library knows how to keep track of our cart across different components because I wrapped the entire tree with a Cart provider in the pages/_app.js file.

// pages/_app.js
import { CartProvider } from "react-use-cart";

function App({ Component, pageProps }) {
  return (
    <CartProvider>
      <Component {...pageProps} />
    </CartProvider>
  );
}

export default App;

Now that we have an idea of what our starter app is doing, let’s add in-app notification to it.

Setup Amplify

Start by initializing an Amplify project using the following.

amplify init

If you don’t have the Amplify CLI, follow this tutorial to set it up. It only takes 5 minutes.

Give the project a name and accept the default configuration. Choose your CLI’s AWS profile which you created when you set up the CLI.

This will also create a config file in src folder. The config file is ignored from git because your credentials live here.

To add support for in-app messaging to your app, run the following command.

amplify add notifications

Choose In-App Messaging as the channel to enable and choose yes to allow unauthenticated users to send events since this is a demo.

You need to push the notification to AWS so the services that supports messaging can be provisioned for you:

amplify push

Confirm that you want to push and wait for the push process to complete.

When you open you aws-exports.js config file, you should see it has been updated with the service access credentials.

Create a Campaign

When you pushed your Amplify app, a Pinpoint project was created for you. Pinpoint is the AWS service that Amplify uses to segment your users, and determine which type of message to show when they perform a specific action in your app. Before you can create a segment you need to setup a campaign for the segment.

Open the AWS Console and search for “Pinpoint”.

Open Pinpoint and choose the project we created from the list of projects.

Navigate to Campaigns and click Create Campaign.

A campaign is a set of rules you give to Pinpoint and it follows those rules to assist you in messaging a given audience.

The first set of rules are about the campaign type and the channel you want to reach the audience. Give the campaign a name, leave campaign type as Standard and then choose In-app messaging as the channel and leave the prioritization to default:

Click Next to define the next set of rules.

The second set of rules allows you to define a segment of audience you want to reach. With segmentation, you can reach a segment of your audience or customers that fit into a given profile. For example in the sample app I have built, you want to show an In-app message when a user adds to the cart a specific item.

Choose Create a segment, give the segment a name and click Next.

Confirm when Pinpoint asks you if you understand that a segment might include multiple channels.

The next set of rules is specify the actual message you want to send to the audience. You can create both the content and how you want it to look in Poinpoint. This is very handy if you are not a developer but need to send out messages to your audience.

Click Create a new In-app message and give the message a header.

Write a more detailed message in the Message box:

You can see that as I enter the header and message values, the preview updates to show you how it will look like when you trigger the event.

You can customize this look to your taste. For example, change the layout so the message appears at the bottom of the screen.

Click Next to move to the last set of rules. This is how you tell the campaign when to launch and when it should send a message.

To send a message you only need to give it an event name. When it receives this event, it will trigger the event.

You can also use attributes to tell the Campaign to fire only when an event’s attribute contains a set of information.

Since I have a shop where you buy positive words, I want to only trigger the event if the item your bought is either the Happy adjective or the Lucky adjective.

Add the Happy Adjective:

Click Add new attribute to add the Luck adjective:

You need to tell the Campaign when it should start. Pinpoint allows you to start the campaign as near as 15 minutes from your current time:

Click Next to review your campaign and click Launch campaign to launch it.

You should see the campaign in your list of campaigns:

Configure In-app Messaging

We have a campaign and we have the credentials in our React project. Let’s tie both together so our app is set up for sending in-app messages.

Install Amplify JavaScript library and the Amplify UI Library:

npm install @aws-amplify/ui-react aws-amplify

Import the Amplify library and your Amplify config file in the _app.js file:

// pages/_app.js
import { Amplify } from "aws-amplify";
import awsconfig from "../src/aws-exports";

Configure the SDK with the config object:

// pages/_app.js
Amplify.configure(awsconfig);

We need to wrap the app with the in app messaging higher order component so the app has access to our notification set up and can send notification from any where in the app tree. Import withInAppMessaging:

// pages/_app.js
import { withInAppMessaging } from "@aws-amplify/ui-react";

Wrap App with it:

// pages/_app.js
export default withInAppMessaging(App);

To use custom component for the notification, import the Notification component which came with the starter project:

// pages/_app.js
import Notification from "@/components/Notification";

Pass the component to the components object which you can set as the second argument for withInAppMessaging:

// pages/_app.js
export default withInAppMessaging(App, {components: {BannerMessage: Notification}});

If you want to use the default UI component provided by Amplify, you can omit the second argument.

Sync Messages

You need to sync the messages in the user’s client whenever they are online. This does not trigger the message but makes it available offline so it can be triggered whenever a user interacts with your app and performs a specific action.

You can sync the messages anywhere in your app tree but since we intend to trigger the message events from the Product component, we can sync the messages there.

Open the Product component and import Notifications from the Amplify library.

// components/Product.js
import { Notifications } from "aws-amplify";

Grab the InAppMessaging object from it:

// components/Product.js
const { InAppMessaging } = Notifications;

Call syncMessages inside the Product component’s useEffect.

// components/Product.js
React.useEffect(() => {
  InAppMessaging.syncMessages();
}, []);

The messages will be downloaded to your localStorage and can be triggered when online or offline.

Trigger Messages

We want the following conditions to be met to trigger the message:

The first condition is that the item is not already in the cart
(we can check this inCart from react-use-cart) and
The adjectives match the adjectives we set in our attributes when we set up the campaign

Add the following to the addToCart function:

const addToCart = (product) => {
  if (!inCart(product.id)) { // Only if we have not added to cart
    InAppMessaging.dispatchEvent({
      name: "cart_15",
      attributes: { adj: product.positiveAdjective }, // Only allowed adjectives
    });
  }
  //...
};

Try adding either Be Lucky or Be Happy card to the cart and you should get see a notification:

Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.

amplify delete

Conclusion

As you’ve seen, by following the steps outlined in this guide, you can quickly set up and configure AWS Amplify to add in-app messaging capabilities to your React app. New to AWS
Amplify? You can try it on the AWS Free Tier. Once implemented, you can start experimenting with engaging with your users. Spend sometime creating campaigns and segmenting your customers so you can take full advantage of what Amplify and Pinpoint can offer.

You can visit Amplify's documentation to learn more about In-App messaging here

How to Deploy Next.js13 app with SSG and SSR to AWS Amplify

Christian Nwamba — Mon, 06 Mar 2023 15:50:16 +0000

Next.js is a React-based framework for building server-side rendered (SSR) and static site-generated (SSG) applications.

Server-side rendering (SSR) means that the initial HTML for a page is generated on the server and sent to the client, which can improve the initial page load time and allow search engines to crawl and index the page more easily.

Static site generation (SSG) means that the HTML for a page is generated at build time rather than on the server or client side, which can improve the site's performance and reduce the load on the server.

Next.js allows developers to choose between these two rendering strategies based on the specific needs of their application.

In this article, you will learn how to build a Next.js application with SSG and SSR features and deploy the app with AWS Amplify.

Prerequisites

The following are required to follow along in this post.

Basic knowledge of React.js
Node.js is installed on your computer to run some npm packages.
AWS Amplify account; sign up here.

Setting up the Next.js application

To bootstrap a new Next.js application, let's run the following commands in our terminal:



npx create-next-app <project-name>

After creating the application, navigate into the project directory and start the application with the following commands: open it with your default code editor.



cd <project-name> # to navigate into the project directory
npm run dev # to run the dev server

Adding Tailwind to the Mix

Run the following commands to add tailwind, postcss and the auto prefixer and initialize tailwind and add the tailwind.config file in your project.



npm install -D tailwindcss postcss autoprefixer
npx tailwind init -p

Next, open the tailwindcss.config.js file at the root of our project and configure it like in the below to process every javascript and typescript file in our pages and components folder.



/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, open the globals.css file from the styles folder and import the tailwind CSS files like the below:



//globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Installing Date FNS

Install date-fns with the below command to show the difference between the SSG and SSR pages by showing the date and time the page was last served.

npm install date-fns

Building a Server Rendered Page

Here, use the getServerSideProps() function to fetch data from an external API at the request time in the index.js file like below:



//pages/index.js
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch("https://fakestoreapi.com/users");
  const data = await res.json();
  // Pass data to the page via props
  return { props: { data, timeOfLoad: new Date().toISOString() } };
}

In the snippets above, we fetched data from the fakestore API endpoint, converted the data to JSON and returned it to the return() function so that the component function could access it.

Next, let’s create the component function and render the data from fakestore in it like in the below:



//pages/index.js
import { formatRelative } from "date-fns";
import React from "react";

const Home = ({ data, timeOfLoad }) => {
  const relativeTimeOfLoad = formatRelative(Date.parse(timeOfLoad), new Date());
  return (
    <div className="mx-auto  w-3/4 my-16">
      <div className="my-8">
        <h2 className="text-6xl text-center">
          Contacts from Server Side Rendering{" "}
        </h2>
        <p className="text-center">{relativeTimeOfLoad}</p>
      </div>
      <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
        {data.map((dt) => (
          <div
            key={dt.id}
            className="border-2 shadow-sm border-gray-200 rounded px-6 py-4 space-y-2"
          >
            <h3 className="text-2xl text-gray-800 capitalize">
              {" "}
              {dt.name.firstname} {dt.name.lastname}
            </h3>
            <p className="my-4 text-lg text-gray-800"> {dt.email}</p>
            <p className="my-4 text-md text-gray-800"> {dt.phone}</p>
            <p className="my-4 text-sm text-gray-500 uppercase">
              {" "}
              {dt.address.city}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Home;

In the snippets above, we:

Imported formatRelative from the date-fns package installed earlier, grab timeOfLoad we passed from the getServerSideProps function and created a relative time between when the page was generated from the server and now.
Rendered a title containing the page title, looped through the data we passed in the getServerSideProps function, and displayed the user details.

Now, run npm run dev in the terminal and head over to the browser to preview the rendered user cards.

Next, let's create the SSG page to go along with the server-side rendered page we've created.
Create an ssg.js file inside the pages folder with the following snippets:



export async function getStaticProps() {
  // Run API calls in parallel
  const productsResponse = await fetch("https://fakestoreapi.com/products");
  const products = await productsResponse.json();
  return {
    props: {
      product: products,
      timeOfLoad: new Date().toISOString(),
    },
  };
}

Here, we fetched our products using the getStaticProps() function, converted it to JSON and returned it as props.
We also attached a timeOfLoad prop just like we did in the SSR page.

Next, create an SSG function component which'll receive the product prop like in the below:



//pages/ssg.js
import Link from "next/link";
import { formatRelative } from "date-fns";
const SSG = ({ product, timeOfLoad }) => {
  const relativeTimeOfLoad = formatRelative(Date.parse(timeOfLoad), new Date());
  return (
    <div className="mx-auto  w-3/4 my-16">
      <div className="my-8">
        <h2 className="text-6xl text-center">
          Products with Static Generation{" "}
        </h2>
        <p className="text-center">{relativeTimeOfLoad}</p>
      </div>
      {product.map((pr) => (
        <div
          className="border-2 shadow-sm border-gray-200 rounded p-3 my-4"
          key={pr.id}
        >
          <div className="space-y-2">
            <p className="font-bold"> Title: {pr.title}</p>
            <p> Description: {pr.description}</p>
            <p className="text-lg"> ${pr.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
};
export default SSG;

Here we rendered the head, looped through the product prop and rendered the list of products; showing each product's details.
We imported formatRelative and repeated the process just like in the SSR page to show the relative time between when the page was sent from the server and now.

In the browser, we would confirm that the products were rendered.

Deploy to Amplify Hosting

Deploying our app with AWS Amplify allows us to test the time difference between the SSR and the SSG pages.

First, push the codes to GitHub or other preferred git providers, Login to the AWS console, search for Amplify and select it from the list of services.

Next, click on the New app drop-down and select Host Web App. Select GitHub or your Git provider on the next page and click the continue button.

Next, click on the Connect branch button, select the repository you intend to host, select the main branch and click on the Next button to proceed.

On the next page, configure the build settings and click on the Next button.

Review your settings on the next screen and click the Save and deploy button to start the deployment processes. After deploying, click on the live link provided by Amplify to access your app.

While testing the live app, notice that the SSR page always matches the current time because the getServerSideProps function is always called when the page is refreshed.
Whereas getStaticProps on the SSG page is called only when the page is loaded.

Conclusion

This post discussed how to build a Next.js application that includes a serverside rendered page and a statically generated page and deploy the application using AWS Amplify.

How to Deploy a Next.js 13 Site with AWS Amplify

Christian Nwamba — Mon, 05 Dec 2022 13:39:51 +0000

At the Nextjs 2022 Conference, the team announced Nextjs v13 with some amazing features such as improved next/image, React Server Components, Turbopack (Webpack successor), improvement to the Middleware API, and a new app directory. The stable version of Nextjs 13 has most of these features while other features available such as app directory, and Turbopack are currently in beta.

One of the biggest concerns developers have, when new version updates are released, is what the breaking changes are and how they would impact their current development setup. In Nextjs v13, the breaking changes that could disrupt developer environments are:

The minimum React version has been bumped from 17.0.2 to 18.2.0.
The minimum Node.js version has been bumped from 12.22.0 to 14.6.0 since 12.x has reached end-of-life (PR).

These changes can currently be deployed to AWS Amplify Hosting and you will learn the steps to do so in this article. I should mention that all of Next.js features are supported including server side rendering.

Start with a Next.js App

Let’s get started by bootstrapping a nextjs project. Run this command on your terminal:

yarn create next-app

When this is done, open the project in your code editor.

cd project-name
code . (for vs code users)

Server Side Rendering

Use getServerSideProps when you need to render a page whose data must be fetched at request time. For server-side rendered apps that need to render the page with user data directly on the server.

Let’s fetch user data from an external API and render this page with the data.

const getServersideprops = ({ data }) => {
    return (
        <div className="my-12">
            <h2 className='text-4xl font-extrabold dark:text-gray-900'>Load page with Server side data </h2>
            {data.map(dt => (
                <div className="border-2 shadow-sm border-gray-200 rounded p-3 space-y-2 my-4">
                    <h3 className='my-4 text-2xl text-gray-800'> {dt.name.firstname} {dt.name.lastname}</h3>
                    <p className='my-4 text-lg text-gray-800 font-bold'> {dt.email}</p>
                    <p className='my-4 text-lg text-gray-500 uppercase'> {dt.address.city}</p>
                    <p className='my-4 text-lg text-gray-800'> {dt.phone}</p>
                </div>
            ))}
        </div>
    )
}

export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch('https://fakestoreapi.com/users')
    const data = await res.json()
    // Pass data to the page via props
    return { props: { data } }
}

export default getServersideprops

Pass the data you want to render as props to the component. Run your server with yarn dev. You should get something like this.

Static Site Generation

Use getStaticPaths() when you’re using dynamic routes with getStaticProps and need to define a list of paths to be statically generated. This comes in handy when working with a content management system (CMS) or statically pre-rendering pages with data from a database.

getStaticProps statically render a page at build time and passes the data to the component using props.

Let’s render a list of products from our fake API on a page. Update your pages/product/index.js with this:


import Link from "next/link"
const getStaticprops = ({ product }) => {
    return (
        <div className="my-12">
            {product.map(pr => (
                <div className="border-2 shadow-sm border-gray-200 rounded p-3 space-y-4 my-4" key={pr.id}>
                    <p> Title: {pr.title}</p>
                    <p> Description: {pr.description}</p>
                    <p> ${pr.price}</p>
                    <Link href={`products/${pr.id}`} className='font-medium text-blue-600 dark:text-blue-500 hover:underline'>
                        <p> Get here</p>
                    </Link>
                </div>
            ))
            }
        </div>
    )
}
export async function getStaticProps() {
    // Run API calls in parallel
    const productsResponse = await fetch('https://fakestoreapi.com/products')
    const products = await productsResponse.json()
    return {
        props: {
            product: products
        },
    }
}
export default getStaticprops

When you run your server, you will see this:

We need to pre-render a page with data from each of those products by generating paths using getStaticPath().

First, let’s fetch single product data from API using the productId and then pass the data as props to the Component using getStaticProps.


export async function getStaticProps(context) {
    const { params } = context
    // Call an external API endpoint to get posts
    const response = await fetch(`https://fakestoreapi.com/products/${params.productId}`)
    const data = await response.json()
    return {
        props: {
            product: data
        }
    }
}

Then we use getStaticPaths to fetch all the product data and assign the id of each product to params.productId.

export async function getStaticPaths() {
    const response = await fetch('https://fakestoreapi.com/products')
    const data = await response.json()
    const paths = data.map(product => {
        return {
            params: {
                productId: `${product.id}`
            }
        }
    })
    return {
        paths,
        fallback: true
    }
}

When you run this, you should be able to view data of a single product item pre-rendered on a page with its dynamically generated path.

Image Optimization

There are improvements to the Nextjs image in this Nextjs v13. Most importantly, these two new improvements:

Easier to style and configure
More accessible requiring alt tags by default


<Image
    alt="layout Responsive"
    src={pr.image}
    width={700}
    placeholder="blur"
    blurDataURL={blurDataURL}
    height={475}
    sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"
    style={{
        width: '100%',
        height: 'auto',
    }}
/>

Here, we have an optimized image with a blur placeholder. It’s also responsive on all screen sizes.

Middleware

Nextjs introduced middlewares in Nextjs v12 so developers can run code before a request is completed and manipulate the incoming request. This is important when running A/B tests, setting authentication guards, or setting request headers. In Nextjs v13, you can now respond to a middleware using NextResponse and set request headers.

Let’s create a middleware to redirect users to /products when they go to the /redirect path.


//middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
    if (request.nextUrl.pathname.startsWith('/redirect')) {
        return NextResponse.redirect(new URL('/products', request.url))
    }
}

API Routing

API Routes enable developers to build GraphQL or REST APIs. All files inside pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page.

Let’s update pages/api/hello.js with this

export default function handler(req, res) {
    res.status(200).json({ name: 'Christain Nwamba' })
}

You can consume the endpoint on a page like this:


const ApiRouting = () => {
    const [hello, setHello] = useState('')
    const fetchName = async () => {
        if (global.window) {
            const response = await fetch("/api/hello")
            const data = await response.json()
            setHello(data)
        }
    }
    fetchName()
    return (
        <div>
            <h2 className='text-4xl font-extrabold dark:text-gray-900'> Using API Routes </h2>
            <h3 className='text-3xl font-extrabold dark:text-gray-700'> Hey {hello.name} </h3>
        </div>
    )
}

Deploy to Amplify Hosting

Amplify Hosting supports all Next.js features, including the new Next.js 13 features. Let’s walk through the steps to deploy your app.

Ensure you’ve created and pushed your code to GitHub or your preferred Git provider.

Head to AWS Amplify Hosting and click on the Host your web app button. You’ll be redirected to this page.

Select your Git provider (Github, in my case) and click on the Connect branch button. Ensure you install and authorize AWS Amplify to access your repositories.

Click the Next button.

You’ll be redirected to this page to configure build settings.

Click on Next. Review the settings and click on the Save and deploy button.

The deployment will take a few minutes and when it’s done, click on the deployed app link and check if all the features are working correctly.