Forem: Alfredo Baldoceda

Contact Form with AWS SES, Amplify Studio, DynamoDB, and NodeJS Lambda

Alfredo Baldoceda — Thu, 13 Jul 2023 22:30:17 +0000

In this tutorial, we will guide you step by step through the process of creating a contact form using AWS SES (Simple Email Service), AWS Amplify, NodeJS Lambda, DynamoDB, UI components generated by Amplify Studio, and deploying it to a Next.js app hosted on GitHub with fully automated deployment. See video here.

Prerequisites

Before we begin, make sure you have the following prerequisites:

An AWS account with appropriate permissions to create resources
AWS CLI and Amplify CLI installed and configured on your development machine
Basic knowledge of AWS services, Next.js, and GitHub

Step 1: Set up AWS SES

1. Login to the AWS Management Console and navigate to the AWS SES service.
2. Follow the instructions to verify your domain and set up email sending and receiving permissions.
3. Once your domain is verified, note down the ARN (Amazon Resource Name) of the verified domain.

Step 2: Host Next.js project with AWS Amplify

1. Create a Next.js project by running the following command:

$ npx create-next-app@latest

2. Create a GitHub repository for your project, commit and push changes to remote.
3. Initialize an Amplify project with the following command:

$ amplify init

4. Add hosting with Amplify CLI and select Continuous deployment (Git-based deployments) when prompted:

$ amplify add hosting

Note: There is a more detailed blog explaining this step here

Step 3: Create Data Model using AWS Amplify Studio

1. Launch Amplify Studio by going to the AWS console and selecting backend environments under the Amplify service, then selecting the Amplify App we set up in the previous step.
2. Once in Amplify Studio, select Data Modeling. Click on Add model and enter ContactForm as the table name. Select the following field names:

Field name: id, Type: ID!
Field name: Name, Type: String
Field name: Email, Type: AWSEmail
Field name: Subject, Type: String
Field name: Message, Type: String 3. Finally, click on save and deploy.

Step 4: Create a Lambda Node.js Trigger

1. In the Amplify Studio UI, select Local setup instructions on the top right corner and copy the pull command instruction.
2. Open a command line under the root of your Next.js project and copy and paste the pull command.

3. After the pull command has been completed, run the amplify add function command. When prompted, select the following options:

Capability: Lambda function (serverless function)
Lambda function name: SendContactInfo
Runtime: NodeJS
Function template: Lambda trigger
Event source to associate: Amazon DynamoDB Stream
DynamoDB event source: Use API category graphql @model backed DynamoDB table(s)
Advanced setting: Environment variables configuration (Add VERIFIED_EMAIL environment key and value)

4. After adding the function with the Amplify CLI, you can edit the NodeJS lambda source file.

const AWS = require('aws-sdk')
const ses = new AWS.SES

const verified_email = process.env.VERIFIED_EMAIL

exports.handler = async (event) => {

  for (const record of event.Records) {

    if (record.eventName === 'INSERT'){

      const contactName = record.dynamodb.NewImage.Name.S
      const contactEmail = record.dynamodb.NewImage.Email.S
      const contactMessage = record.dynamodb.NewImage.Message.S
      const contactSubject = record.dynamodb.NewImage.Subject.S

      const bodyData = '<br/><b>Contact Name</b>: ' + contactName +
        '<br/><b>Contact Email</b>: ' + contactEmail +
        '<br/><b>Message</b>: ' + contactMessage

      await ses.sendEmail({
        Destination: {
          ToAddresses: [verified_email],
        },
        Source: verified_email,
        Message: {
          Subject: { Data: contactSubject },
          Body: {
            Html: {
              Charset: "UTF-8",
              Data: bodyData
            },
          },
        },
      }).promise()

    }

    return { status: 'email sent'}

  }
  return Promise.resolve('Successfully processed DynamoDB record');
};

5. Make sure to add the environment variable verified_email. You can do this by running amplify update function and selecting Environment variable configuration under Available Advance settings. Alternatively, you can hardcode the value in the following code line:

const verified_email = process.env.VERIFIED_EMAIL

6. Change the cloudformation template for the lambda to have the permission to use the AWS SES service to be able to send emails.

         "PolicyDocument": {
          "Version": "2012-10-17",
          "Statement": [
            {
              "Action": [
                "ses:SendEmail"
              ],
              "Effect": "Allow",
              "Resource": {
                "Fn::Sub": [
                  "arn:aws:ses:${region}:${account}:identity/albac.dev",
                  {
                    "region": {
                      "Ref": "AWS::Region"
                    },
                    "account": {
                      "Ref": "AWS::AccountId"
                    }
                  }
                ]
              }
            },

7. To save changes on the cloud, run amplify push.

Step 5: Using generated UI Contact by Amplify Studio

1. The command amplify pull executed in Step 4 has synced the UI components from Amplify Studio and saved them locally. You can run this command again if necessary.

2. Let's start by creating a client component that will wrap the Theme provider from Amplify Studio.

'use client';

import React, { ReactNode } from 'react';
import { Amplify } from 'aws-amplify';
import awsconfig from '@/src/aws-exports';
import { ThemeProvider, defaultDarkModeOverride } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure(awsconfig);

export default function AmplifyUITheme(props: {children: ReactNode}){

  const theme = {
    name: 'my-theme',
    overrides: [defaultDarkModeOverride],
  };

  return (
    <ThemeProvider theme={theme} colorMode="system" >
      {props.children}
    </ThemeProvider>
  )
}

3. Then create another [client component](https://github.com/albac/amplify-contactform/blob/main/app/custom

contact.tsx) that will call the ContactFormCreateForm generated by Amplify and wrap it with the AmplifyUITheme component.

...
import ContactFormCreateForm from '@/src/ui-components/ContactFormCreateForm';
import AmplifyUITheme from './amplifyuitheme';
...
   <AmplifyUITheme>
     <ContactFormCreateForm 
       onSuccess={() => setShowModal(false)}
       backgroundColor="neutral.40"
       borderRadius="6px"
       width="40rem"
     />
   </AmplifyUITheme>

4. Optionally, you can also add a Modal component and use useState and useEffect to trigger the modal.

...
  const [showModal, setShowModal] = useState(false)

  useEffect(() => {
    const onKeyPress = (e: KeyboardEvent) => {
      if (e.key === "Escape") setShowModal(false);
    };

    window.addEventListener("keydown", onKeyPress);
    return () => window.removeEventListener("keydown", onKeyPress);
  },[setShowModal])

  return(
  <>
    <button onClick={() => setShowModal(true)} >
      Contact me
    </button>
    {showModal ? (
      <Modal>
...

Note: For this, we have used one of the best, but at the same time easy to use, modal components by another author. You can check his blog here.

Congratulations! You have successfully created a contact form using AWS SES, AWS Amplify Studio, and AWS Amplify, and deployed it to a Next.js app hosted on GitHub with fully automated deployment.

The final result will look something like this:

Conclusion

In this tutorial, we walked through the process of creating a contact form using AWS SES, AWS Amplify Studio, and NodeJS Lambda. We started by setting up AWS SES and hosting a Next.js project with AWS Amplify. Then, we created a data model using AWS Amplify Studio and set up a Lambda Node.js trigger to handle the form submissions and send emails using AWS SES.

We also utilized the UI components generated by Amplify Studio to create a user-friendly contact form interface. Finally, we deployed the Next.js app to GitHub with automated deployment.

Feel free to customize and enhance the contact form and the overall application according to your specific requirements. Happy coding!

Happy coding!

References

Video: https://www.tiktok.com/@albac.dev/video/7254586286583909678?_r=1&_t=8dxw7Ytz88M
GitHub Code: https://github.com/albac/amplify-contactform/
Amplify UI Theme Provider: https://ui.docs.amplify.aws/react/theming/theme-provider
Modal Blog Component: https://codewitholgun.com/how-to-create-a-modal-with-reactjs-and-style-it-with-tailwindcss

Using AWS CLI Securely with IAM Roles and MFA

Alfredo Baldoceda — Tue, 13 Jun 2023 16:32:14 +0000

Summary

This quick and easy guide provides step-by-step instructions on securely using AWS CLI with IAM roles and Multi-Factor Authentication (MFA). Learn how to set up AWS CLI securely by assuming IAM roles and enabling MFA.

Introduction

As AWS developers, it's crucial to prioritize security when accessing AWS resources. Instead of relying on permanent access keys, which pose risks like exposure and misuse, AWS offers a more secure approach using IAM roles. IAM roles provide fine-grained permissions and generate temporary security credentials, eliminating the need for permanent access keys. Additionally, enabling MFA adds an extra layer of protection to AWS CLI usage.

Prerequisites

Before getting started, make sure you have the following prerequisites:

An active AWS account and access to the AWS Management Console.
Basic understanding of the command line interface (CLI) or shell scripting.
A virtual MFA device (e.g., Google Authenticator) set up on your smartphone.

Part I - AWS Console Setup

Step 1: Creating an IAM User with Programmatic Access

1. Open the AWS Management Console and sign in with your credentials.
2. Search for IAM in the search bar and open the IAM console.
3. In the left navigation pane, click on Users and then the Add user button.
4. Provide a name for the user and select Programmatic access under Access type.
5. Choose an existing IAM group or attach policies directly to the user for permissions.
6. Review the user details and add tags if necessary.
7. Create the user and securely download the access key and secret access key.

Note: If you have an existing user that you want to provide programmatic access, just select the user and go to the "Security Credentials" tab and create a new access key.

Step 2: Setting Up MFA on AWS Console

1. Go to the IAM service in the AWS Management Console and select your IAM user.
2. In the "Security credentials" tab, click on "Manage" in the "Multi-factor authentication (MFA)" section.
3. Choose "Virtual MFA device" and follow the on-screen instructions to set up your MFA device.
4. Use the authenticator app to scan the QR code or enter the secret key to link the virtual MFA device.

Step 3: Creating an IAM Role with MFA Condition

1. Go to the IAM service in the AWS Management Console and click on "Roles".
2. Click on "Create role" and select the appropriate service or use case.
3. Attach the necessary policies to the role and skip the permissions boundary section.
4. Scroll down to the "IAM role trust relationship" section and click on "Edit trust relationship".
5. Replace the existing trust policy with the provided JSON policy, replacing <YOUR_ACCOUNT_ID> with your AWS account ID.



{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "",
      "Effect":

 "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::<YOUR_ACCOUNT_ID>:root"
      },
      "Action": "sts:AssumeRole",
      "Condition": {
        "Bool": {
          "aws:MultiFactorAuthPresent": "true"
        }
      }
    }
  ]
}

6. Save the changes to update the trust relationship.

Part II - Command Line Setup

Step 1: Installing AWS CLI

1. Check if Python 3 (version 3.6 or later) is installed by running python3 --version.
2. Install AWS CLI using pip with the command: pip install awscli --upgrade --user.
3. Verify the installation by running aws --version.



aws --version
aws-cli/2.11.26 Python/3.11.4 Darwin/22.5.0 source/x86_64 prompt/off

Step 2: Initial Configuration with IAM User Credentials

1. Obtain the access key ID and secret access key for your IAM user from the AWS Management Console.
2. Configure AWS CLI with your IAM user credentials by running aws configure.
3. Enter the access key ID, secret access key, default region, and output format as prompted.



$ aws configure
AWS Access Key ID [xxx]:
...

This command prompts you to enter the access key ID, secret access key, default region, and output format. Provide the IAM user credentials and other details as prompted.

The access key ID and secret access key are the credentials obtained for your IAM user.
The default region is the AWS region where you want to operate. For example, us-west-2 for US West (Oregon) region.
The output format specifies how AWS CLI should display the command output. You can choose json, text, or table.

4. Verify Initial Configuration: To verify that AWS CLI is configured correctly with your IAM user credentials, run the following command:



   $ aws sts get-caller-identity --no-cli-pager

Note: The aws sts get-caller-identity --no-cli-pager command is useful in the context of assuming IAM roles, as it allows you to verify the identity of the user or role associated with the temporary credentials.

This command will return information about the AWS account ID, IAM entity ARN, and other details associated with the current credentials.

Step 3: Assume Roles with MFA Configuration

In this step, we'll configure AWS CLI to assume roles using the named profiles specified in the configuration file. Follow the instructions below:

1. Add Assume Role with MFA Configuration: Add the following configuration block to the file located at ~/.aws/config (Linux/Mac) or %USERPROFILE%\.aws\config (Windows) , specifying the details for the IAM role you want to assume and mfa parameters:



   [default]
   region = us-west-2

   [profile mfa]
   region = us-west-2
   output = json
   role_arn = arn:aws:iam::123456789012:role/MyRole
   source_profile = default
   mfa_serial = arn:aws:iam::123456789012:mfa/MyMFADevice

In this example:

[default] represents the default profile used for general AWS CLI operations.
[profile mfa] represents a named profile that will be used to assume the IAM role with MFA.
region specifies the AWS region you want to use.
output specifies the output format for AWS CLI commands.
role_arn is the ARN of the IAM role you want to assume. (This is role created on the 1st part of this article)
source_profile is the profile name used to retrieve the initial temporary credentials (usually the default profile).
mfa_serial is the ARN of the MFA device associated with your IAM user.

Note that the role here is the one we created with the trust policy with MFA condition.

The mfa_serial can be obtained when selecting the MFA serial created in the 1st part of this article, under the user, security credentials tab.

2. After configuring the AWS CLI, run the following command to assume the IAM role with MFA:



$ aws sts assume-role --profile mfa --role-session-name MySessionName --duration-seconds 3600

Replace mfa with the profile name you specified in the AWS CLI configuration file. MySessionName can be any descriptive name for your session. 3600 represents the duration for which the temporary security credentials will be valid (in this example, 1 hour).

This command generates temporary security credentials that you can use for AWS operations.

3. Run the following command to retrieve the caller identity after assuming the IAM role:



$ aws --profile devadmin sts get-caller-identity --no-cli-pager                                                                   Enter MFA code for arn:aws:iam::XXXXXX:mfa/user1:

Conclusion

Setting up AWS CLI to assume IAM roles with MFA as a condition enhances the security and control of your AWS environment. By following the steps outlined in this article, DevOps and experienced AWS developers can securely configure AWS CLI for their day-to-day operations, ensuring temporary credentials, an additional authentication factor, and an MFA condition are used.

Remember to regularly rotate IAM roles, update policies, and review user access permissions to maintain a strong security posture within your AWS infrastructure.

ChatGPT Part I: AI-Powered Text Generation with Next.js and OpenAI

Alfredo Baldoceda — Fri, 02 Jun 2023 21:02:20 +0000

In today's digital age, automation and artificial intelligence (AI) have revolutionized various industries, including content creation and customer support. One such powerful tool is AI-powered text generation, which can assist in generating content, answering queries, and even enhancing creative writing. In this article, we will explore how Next.js, a popular React framework for building web applications, can be combined with the OpenAI API to leverage AI-powered text generation capabilities.

Introduction to Next.js and OpenAI API

Next.js stands as a JavaScript framework that empowers developers to construct server-side rendered (SSR) React applications. Boasting a robust ecosystem, it provides a solid foundation for building efficient and scalable web applications.

On the other hand, the OpenAI API serves as a powerful language model, capable of generating text that closely resembles human-written content. By seamlessly integrating Next.js with the OpenAI API, we gain the ability to develop dynamic and interactive web applications that generate AI-generated content in real-time.

Setting up the Next.js Application

To get started, we need to set up a Next.js application and configure the OpenAI API. Here are the steps:

1. Create a new Next.js project by running:

$ npx create-next-app chatbot-app

2. Configure the OpenAI API by creating an account on the
OpenAI website and obtaining an API key.

3. Install the OpenAI package by running:

$ cd chatbot-app
$ npm install openai

4. Set up the OpenAI API configuration in your Next.js application. Create a new file, openai.js, and add the following code:

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default openai;

Make sure to replace process.env.OPENAI_API_KEY with your actual API key.

As an alternative, you can generate a .env file containing your secret API key.

Creating the AI-Powered Text Generation Endpoint

Now that we have our Next.js application and OpenAI API configured, let's create an endpoint that utilizes the AI-powered text generation. We will create a serverless function that handles HTTP POST requests and generates AI-generated text based on the provided prompt.

To manage the http requests we use the Route Handlers Method functions from the new Next.js 13.4 App Router. For more details go to https://nextjs.org/docs/app/building-your-application/routing/router-handlers#supported-http-methods.

The Davinci Model

export async function POST(req: Request) {
  const { prompt } = await req.json();

  if (!prompt || prompt === '') {
    return new Response('Please send your prompt', { status: 400 });
  }

  const aiResult = await openai.createCompletion({
    model: 'text-davinci-003',
    prompt: `${prompt}`,
    temperature: 0.9,
    max_tokens: 2048,
    frequency_penalty: 0.5,
    presence_penalty: 0
  });

  const response = aiResult.data.choices[0].text?.trim() || 'Sorry, there was a problem!';

  return NextResponse.json({ text: response });
}

The POST function is called when an HTTP POST request is made to the serverless function. It expects the request body to contain a JSON object with a prompt property.

If the prompt is missing or empty, a response with the text 'Please send your prompt' and a status code of 400 (Bad Request) is returned.

If the prompt is provided, an AI completion is generated using the OpenAI API. The openai.createCompletion function is called with various parameters, including the model to use ('text-davinci-003'), the provided prompt, and additional settings like temperature, max tokens, frequency penalty, and presence penalty.

The response from the API call is stored in the aiResult variable. The generated text is extracted from aiResult.data.choices[0].text?.trim(). If no text is generated, a fallback message of 'Sorry, there was a problem!' is used.

Finally, the response is sent using NextResponse.json(), wrapping the generated text in a JSON object with the property text.

Here's an explanation of the parameters provided to the OpenAI API's create_completion method:

1. model: 'text-davinci-003'

This parameter specifies the model to be used for generating the completion. In this case, 'text-davinci-003' refers to the specific version of the GPT-3.5 model developed by OpenAI. Different models may have varying capabilities and performance.

2. prompt: ${prompt}

This parameter represents the text that serves as the starting point or input for the completion. You can replace ${prompt} with the actual text you want to use as the prompt.

3. temperature: 0.9

The temperature parameter controls the randomness of the generated output. A higher temperature, such as 1.0, makes the output more diverse and creative, while a lower temperature, like 0.1, makes it more focused and deterministic. A value of 0.9 indicates a relatively high temperature, resulting in more varied responses.

4. max_tokens: 2048

This parameter determines the maximum number of tokens in the generated completion. Tokens are chunks of text, which can be as short as one character or as long as one word. Setting max_tokens to 2048 ensures that the completion will not exceed that length. Be aware that longer completions may incur higher costs and take more time to generate.

5. frequency_penalty: 0.5

The frequency penalty is used to discourage the model from repeating the same words or phrases excessively in its output. A higher value, such as 1.0, will strongly penalize repeated text, while a lower value, like 0.0, will not penalize repetition. A value of 0.5 indicates a moderate frequency penalty, encouraging the model to produce varied and diverse responses.

6. presence_penalty: 0

The presence penalty is employed to discourage the model from mentioning specific words or phrases in its output. A higher value, such as 1.0, will strongly penalize the inclusion of specific terms, while a lower value, like 0.0, will not penalize their presence. A value of 0 implies no presence penalty, allowing the model to freely include any relevant terms.

Turbo 3.5 GPT Model

This model differs slightly from the Davinci model in regard to the request data required and the response that produces

export async function POST(req: Request) {
  const { prompt } = await req.json();
  // console.log(prompt)
  //
  //

  if (!prompt || prompt === "") {
    return new Response("Please send your prompt", { status: 400 });
  }

  const aiResult = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: `${prompt}` }],
    temperature: 0.9,
    max_tokens: 2048,
    frequency_penalty: 0.5,
    presence_penalty: 0,
  });

  const response =
    aiResult.data.choices[0].message?.content?.trim() ||
    "Sorry, there was a problem!";

  // console.log(response)

  return NextResponse.json({ text: response });

Here an explanation of the parameters that are different for the "gpt-3.5-turbo" model:

1. model: "gpt-3.5-turbo"

This parameter specifies the model to be used for generating the completion. In this case, "gpt-3.5-turbo" refers to a specific version of the GPT-3.5 model known for its speed and cost-effectiveness compared to the base GPT-3 models.

2. messages: [{ role: "user", content: ${prompt} }]

Instead of using a traditional prompt, the "messages" parameter allows for more interactive conversations. Each message object represents a role ("user" or "assistant") and the content of the message. In this case, there is a single message from the "user" role with the content of ${prompt}. You can replace ${prompt} with the actual text of the user's message.

Setting up the Chat interface

Using the Next.js App Router, we set up our interface that will make calls to our existing API created in the previous step.

ChatMessage Component

The ChatMessage component is responsible for rendering individual chat messages:

const ChatMessage = ({ text, from }: MessageProps) => {
  return (
    <>
      {from == Creator.Me && (
        <div className="bg-white p-4 rounded-lg flex gap-4 items-center whitespace-pre-wrap">
          <Image src={mePic} alt="Me" width={40} />
          <p className="text-gray-700">{text}</p>
        </div>
      )}
      {from == Creator.Bot && (
        <div className="bg-gray-100 p-4 rounded-lg flex gap-4 items-center whitespace-pre-wrap">
          <Image src={botPic} alt="Bot" width={40} />
          <p className="text-gray-700">{text}</p>
        </div>
      )}
    </>
  );
};

The ChatMessage component receives the text and from props, destructured from MessageProps.
Conditional rendering is used to differentiate between the user's messages (Creator.Me) and the bot's responses (Creator.Bot).
When the message is from the user, a white-colored message bubble with the user's image is rendered.
When the message is from the bot, a gray-colored message bubble with the bot's image is rendered.

ChatInput Component

The ChatInput component handles the user input and sending messages:

const ChatInput = ({ onSend, disabled }: InputProps

) => {
  const [input, setInput] = useState("");

  const sendInput = () => {
    onSend(input);
    setInput("");
  };

  const handleKeyDown = (event: any) => {
    if (event.keyCode === 13) {
      sendInput();
    }
  };

  return (
    <div className="bg-white border-2 p-2 rounded-lg flex justify-center">
      <input
        value={input}
        onChange={(event: any) => setInput(event.target.value)}
        className="w-full py-2 px-3 text-gray-800 rounded-lg focus:outline-none"
        type="text"
        placeholder="Ask me anything"
        disabled={disabled}
        onKeyDown={(ev) => handleKeyDown(ev)}
      />
      {disabled && (
        <svg
          aria-hidden="true"
          className="mt-2 inline w-6 h-6 mx-2 text-gray-100 animate-spin dark:text-gray-300 fill-gray-500"
          viewBox="0 0 100 101"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <!-- SVG path data -->
        </svg>
      )}
      {!disabled && (
        <button
          className="p-2 rounded-md text-gray-500 bottom-1.5 right-1"
          onClick={() => sendInput()}
        >
          <AiOutlineSend size={20} />
        </button>
      )}
    </div>
  );
};

The ChatInput component receives the onSend and disabled props, destructured from InputProps.
The component manages the user input using the useState hook. The input state variable stores the current value of the input field.
When the user clicks the send button or presses Enter, the sendInput function is called, which invokes the onSend callback prop with the input value and clears the input field.
The handleKeyDown function listens for the Enter key press and triggers the sendInput function.
The component renders a text input field, a loading spinner when disabled is true, and a send button when disabled is false.

ChatGPTPage Component

The main component that brings everything together is ChatGPTPage:

export default function ChatGPTPage({ params }: { params: { model: string } }) {
  const [messages, setMessages, messagesRef] = useState<MessageProps[]>([]);
  const [loading, setLoading] = useState(false);

  const { model } = params;

  console.log(model);

  const callApi = async (input: string) => {
    setLoading(true);

    const myMessage: MessageProps = {
      text: input,
      from: Creator.Me,
      key: new Date().getTime(),
    };

    setMessages([...messagesRef.current, myMessage]);

    const response = await fetch(`/api/${model}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt: input,
      }),
    }).then((response) => response.json());
    setLoading(false);

    if (response.text) {
      const botMessage: MessageProps = {
        text: response.text,
        from: Creator.Bot,
        key: new Date().getTime(),
      };
      setMessages([...messagesRef.current, botMessage]);
    } else {
      // Error message here
    }
  };

  return (
    <ViewAuth>
      <main className="relative max-w-2xl mx-auto">
        <div className="sticky top-0 w-full pt-10 px-4">
          <Chat

Input onSend={(input) => callApi(input)} disabled={loading} />
        </div>

        <div className="mt-10 px-4">
          {messages.map((msg: MessageProps) => (
            <ChatMessage key={msg.key} text={msg.text} from={msg.from} />
          ))}
          {messages.length == 0 && (
            <p className="text-center text-gray-400">
              Hello there, this is albac.dev ChatGTP bot
            </p>
          )}
        </div>
      </main>
    </ViewAuth>
  );
}

The ChatGPTPage component receives a params prop, which is an object containing the model property.
The component initializes state variables using the useState hook: messages stores the chat messages, setMessages is the function to update the messages, and messagesRef is a reference to the messages array.
The loading state variable is used to indicate if a request is currently being made to the ChatGPT API.
The callApi function is responsible for sending user input to the API and handling the bot's response. It updates the messages state to include the user's message and makes a POST request to the /api/${model} endpoint with the user's input as the request payload. The response is then added to the messages state as the bot's message.
The component renders the ViewAuth component, which likely handles authentication or authorization.
Inside the main element, the ChatInput component is rendered at the top of the page, allowing the user to enter messages. The onSend prop is set to the callApi function, and the disabled prop is set to the loading state variable.
The messages state is mapped over to render the ChatMessage components, passing the necessary props.
If there are no messages in the messages state, a default greeting message is rendered.

Note: Notice that we are using a different useState hook called react-usestateref. This custom hook extends the functionality of the useState hook in React by providing a way to create a mutable reference to a value. With this hook, you can access and modify the value directly without triggering a re-render of the component.

In the standard useState hook, when you update the state using the setter function returned by useState, React will re-render the component to reflect the new state value. However, there are cases where you might want to update a value without triggering a re-render, or you need to access the current value of the state outside the scope of the component's render function.

The ViewAuth component is used to validate our authentication with AWS Amplify. It checks if the user is authenticated to use this page.

generateStaticParams Function

Lastly, we have a helper function called generateStaticParams:

export function generateStaticParams() {
  return [{ model: "turbo" }, { model: "davinci" }];
}

The generateStaticParams function returns an array of objects representing different models that can be used for the ChatGPT interface. In this case, the models are "turbo" and "davinci".

The Final Result!

Finally, you can see the different responses we get when we switch from the Davinci Model to the ChatGPT 3.5 Turbo Model.

This code snippet provides a foundation for creating a chat interface using ChatGPT in a Next.js application. It includes components for rendering chat messages and handling user input, as well as functions for sending and receiving messages from the ChatGPT API. With this code as a starting point, you can further customize and enhance the chat interface to suit your specific requirements.

See the full code for the Davinci Model Next.js Router Handler api here.

See the full code for the Turbo Model Next.js Router Handler api here.

See the full code of the App page interface that makes the call to our api here

Testing it out

Feel free to try out this ChatGPT chatbot on my portfolio at https://albac.dev.

Conclusion

AI-powered text generation opens up exciting possibilities for automating content creation, enhancing customer support, and aiding creative writing. By combining the power of Next.js and the OpenAI API, developers can leverage AI-generated text in real-time, creating dynamic and interactive web applications.

However, it is crucial to use AI responsibly and ensure human oversight. While AI can assist in generating content, human intervention is essential to verify accuracy, maintain ethical standards, and provide a personalized touch. AI should be treated as a tool that complements human efforts rather than replacing them entirely.

With the Next.js framework and the OpenAI API, developers can unlock the potential of AI-powered text generation and build innovative applications that cater to various industries and user needs.

Reference:

React UseStateRef: https://www.npmjs.com/package/react-usestateref
OpenAI ChatGPT Docs: https://platform.openai.com/docs/api-reference/completions/create
Next.js Route Handlers: https://nextjs.org/docs/app/building-your-application/routing/router-handlers
Blog in Albac.Dev: https://albac.dev/blog/e53210af-d54b-423e-a9f3-a4dc3bac4032

Migrating from Next.js Pages Router to App Router

Alfredo Baldoceda — Fri, 26 May 2023 22:44:57 +0000

Summary

Migrating from Next.js Pages router to Next.js App router provides several benefits and introduces new concepts for organizing your Next.js project. In this guide, we will walk you through the process of migrating to the App router, explaining important concepts and highlighting key steps along the way. We will also explore the integration of Tailwind CSS into the project.

Introduction

Next.js is a popular React framework for building server-side rendered and static websites. With the introduction of the App router, Next.js offers a more structured approach to organizing your application's routes and components. This migration guide will help you understand the steps involved in adopting the Next.js App router and using it alongside Tailwind CSS.

Prerequisites

Before we begin, make sure you have the following requirements in place:

Node.js 16.8+ installed on your system.
A basic understanding of Next.js and Tailwind CSS.

Step 1: Installing Required Packages

To get started, navigate to your Next.js project directory and install the latest required packages for Next.js and Tailwind CSS. Open your terminal and run the following command:

npm install next@latest react@latest react-dom@latest tailwindcss@latest

This command will update your project with the latest versions of Next.js, React, React DOM, and Tailwind CSS.

Step 2: Updating the Next.js and Tailwind Configuration

Next, we need to update the Next.js configuration to enable the App directory and configure Tailwind CSS accordingly. Locate the next.config.js file in your project and add the following lines:

module.exports = {
  experimental: {
    appDir: true,
  },
  // Other configuration options...
};

Enabling the appDir option allows Next.js to recognize the App directory as the main directory for your application's routes.

Now, open the tailwind.config.js file and update the content property as follows:

module.exports = {
  // Other configuration options...
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
};

This change ensures that Tailwind CSS scans the App directory for CSS utility classes.

Step 3: Creating First App Page Component and Root Layout

To take full advantage of the App router, we need to reorganize our directory structure and create the initial App page component and root layout.

Create a new directory called app in your project's root directory. This directory will hold your App-specific components and files.
To avoid conflicts with new App router files, rename the existing pages directory to old-pages or choose a different name that is distinct from the default pages directory.
Edit the page.tsx file inside the app directory with a simple React component representing your homepage:

   import React from 'react';

   export default function HomePage() {
     return <div>This is my new App Route Home Page</div>;
   }

Start your Next.js development server using the npm run dev command. This will generate the

layout.tsx file automatically for you.

   $ npm run dev
   ...
   wait - compiling /page (client and server) ...
   Your page app/page.tsx did not have a root layout. We created app/layout.tsx for you.

After the server starts, your project structure should look like this:

   - app
     - index.tsx
     - layout.tsx

Since we now have a root layout file, we can add our Tailwind CSS styles to it. Open the layout.tsx file and import the globals.css file:

   import '../styles/globals.css';

Step 4: Naming Convention

The App router follows a naming convention for its files. The files should be named page.tsx, layout.tsx, loading.tsx, etc., depending on their purpose. This convention helps Next.js identify and associate the components correctly with their routes.

Step 5: Understanding Layouts

The layout.tsx file in the App directory serves as a global layout for all child views. This means that any components placed in the layout file will be shared across multiple pages unless you create a new layout specifically for a particular page or group of pages. The layout file is an excellent place to define global settings, such as importing global libraries or configuring services like AWS Amplify.

For example, you can configure AWS Amplify in the layout.tsx file as follows:

import awsconfig from '../src/aws-exports';
import { Amplify, AuthModeStrategyType } from 'aws-amplify';

Amplify.configure({
  ...awsconfig,
  ssr: true,
  DataStore: {
    authModeStrategyType: AuthModeStrategyType.MULTI_AUTH,
  },
});

interface RootLayoutProps {
  children: React.ReactNode;
}

export default async function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

The layout component is responsible for rendering the shared structure, such as the HTML and body tags, while the children prop represents the content specific to each page.

Step 6: Using the "use client" Directive

By default, all code within the App router runs on the server. To execute code on the client-side, such as React hooks, you need to use the "use client" directive at the beginning of your document.

For example, in app/page.tsx, you can use the "use client" directive and implement a simple counter:

"use client"

import { useState } from "react";

export default async function Page() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => setCounter(prev => prev + 1)}>+1</button>
    </div>
  );
}

The "use client" directive indicates that this code should run on the client-side, allowing the use of client-specific features like React hooks.

Step 7: Sending Components to the Client

The App router provides a convenient way to send only the necessary components to the client. This approach improves performance by reducing the amount of code sent to the browser.

For example, you can fetch data on the server and render a specific component on the client:

// All this code will be executed on the server

import { withSSRContext } from 'aws-amplify';
import { serialize } from 'next-mdx-remote/serialize';
import { Posts } from '../../../src/models';
import Post from '../../../components/Post';

async function fetchPost(slug) {
  const { DataStore } = withSSRContext();
  const post = await DataStore.query(Posts, slug);
  const mdxSource = await serialize(post.content);

  return {
    date: post.createdAt,
    title: post.title,
    content: mdxSource,
    slug,
  };
}

export default async function SlugPage({ params }) {
  const { slug } = params;
  const post = await fetchPost(slug);

  // The <Post/> component will be rendered on the client-side, as we use "use client" within it.
  return <Post {...post} />;
}

Another good example, it is our Root Layout Component.

The Root Layout is a server component that calls the NavBar and AuthBtn components.

AuthBtn Component use the useAuthenticator hook which can only work on client components.

We call the AuthBtn component from our NavBar component. Both are client components.

AuthBtn component:

"use client";

import Link from "next/link";
import { useAuthenticator } from "@aws-amplify/ui-react";
import { Auth } from "aws-amplify";

export default function AuthBtn({ setter }) {
  const { authStatus } = useAuthenticator((context) => [context.authStatus]);

  return (
    <>
      {authStatus && authStatus !== "authenticated" ? (
        <SignInButton setter={setter} />
      ) : (
        <SignOutButton setter={setter} />
      )}
    </>
  );
}

This approach ensures that only the necessary components are sent to the client, reducing the initial load time and improving the overall performance of your application.

For more details information about client components go to https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive.

Step 8: Leveraging SEO Metadata

The App router provides a convenient way to handle metadata, such as page titles, descriptions, and keywords. You can export metadata from your views and layouts to ensure proper SEO optimization.

In your view components, export the metadata as follows:

export const metadata = {
  title: 'App Route',
  description: 'First metadata in app route',
  keywords: ['react', 'nextjs'],
};

You can also define general metadata in your layout component. Next.js is intelligent enough to prioritize view-specific metadata over layout metadata.

export const metadata = {
  title: 'App Route',
  description: 'First metadata in app route',
  keywords: ['react', 'nextjs'],
};

export default function Layout({ children }) {
  return (


 <main>
      {children}
    </main>
  );
}

By leveraging metadata, you can improve the search engine visibility and discoverability of your application's pages.

Our Website running NextJS App Router

See our current Website laveraging App Router in our github repo: https://github.com/albac/albac.dev

Look at our current structure to see how we organize your pages and components:


app/api/davinci:
route.ts

app/api/turbo:
route.ts

app/blog-edit:
[id]/

app/blog-edit/[id]:
page.tsx

app/chatgpt:
[model]/

app/chatgpt/[model]:
page.tsx*   layout.tsx

app/legal:
privacy-policy/   terms-conditions/

app/legal/privacy-policy:
page.tsx

app/legal/terms-conditions:
page.tsx

app/projects:
loading.tsx  page.tsx

app/signin:
page.tsx

app/storagemanager:
page.tsx*

app/profile:
loading.tsx        image-profile.tsx  page.tsx

Conclusion

Migrating to the Next.js App router introduces a more structured approach to organizing your application's routes and components, making it easier to build and maintain complex applications. In this guide, we specifically looked at how you can migrate a blog application to the App router.

By migrating your blog application to the Next.js App router, you gain a more structured and organized approach to building your blog. The separation of concerns, client-side rendering capabilities, and SEO optimization features provided by the App router enhance the overall user experience and make your blog more efficient and discoverable.

We hope this guide has been helpful in understanding and implementing the Next.js App router in your blog application. For more detailed information and examples, refer to the official Next.js documentation on https://nextjs.org/docs/app.

References

Next.js Documentation App: https://nextjs.org/docs/app
Next.js Official Migration Documentation: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration
Amplify Documentation: Use Amplify with Next.js App Router (App Directory): https://docs.amplify.aws/lib/ssr/q/platform/js/#use-amplify-with-nextjs-app-router-app-directory

Managing a blog with AWS Amplify Studio

Alfredo Baldoceda — Thu, 25 May 2023 03:48:28 +0000

Summary

This article explains how to use AWS Amplify to manage a blog by creating, updating, and deleting new posts. In contrast to the previous blog post that used MDX files, this article uses a table on AWS DynamoDB and a graphical interface to update content. The article covers how to launch Amplify Studio, create a post data model using Data Modeling, and how to pull resources. Additionally, it demonstrates how to integrate Amplify libraries with Next.js for server-side rendering (SSR)and provides code examples for fetching and rendering blog posts from the DataStore.

Following the series of articles about AWS Amplify, in this post, we will cover a way to manage our blog by adding a way to create, update, and delete new posts.

In our past blog, we used MDX files to get the markdown content and use Tailwind/Topography prose plugins to show our markdown with tons of beautiful styles.

For this blog, instead of using MDX files to get our markdown content, we will use a table on AWS DynamoDB and a graphic interface to update our content.

Prerequisites

Before proceeding with this article, make sure you have an existing project hosted using AWS Amplify. If you don't have a project yet, you can follow this blog to learn how to host a project using Amplify.

Launching Amplify Studio

To get started, we need to launch Amplify Studio, which is a visual interface that manages the backend resources created by Amplify.

1. Go to the AWS Console and navigate to Amplify services.
2. Select your app, and under backend environments, click on the yellow button labeled Launch Studio.

Once Amplify Studio is launched, you will see the homepage where you can create or manage different resources. This interface provides a more convenient way to manage data models compared to using the Amplify CLI.

Data Modeling

Now let's create the data model for our blog posts using Amplify Studio.

1. Click on the Data link in the left menu.
2. Click on Add model to create a new model.
3. Enter the model title as Posts.
4. Add the following columns: title, content, and summary.

After defining the model, click on Save and Deploy to deploy the infrastructure.

Wait for a few minutes until Amplify has finished creating all the necessary resources. Once completed, you will see the configuration and instructions for pulling that configuration. Here, you can select the model, operation, and language to generate code for accessing and managing your data.

Create Initial Content

Now, on the Amplify Studio home page go to*Content* on the left menu. Here you will be able to create new post and see the list of post that has been created.

Note: There is currently a report that the new data manager doesn't support markdown editor anymore, but there is a work around provided by amplify team until this is resolved:
https://github.com/aws-amplify/amplify-studio/issues/815

And add some markdown content:

Pull resources

Once we have successfully deployed our infrastructure, you can download the configuration locally using AWS Amplify CLI:

$ amplify pull --appId ddxxxxxxxir --envName dev                                                               

Pre-pull status:

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ Create    │                   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Api      │ albacdev       │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

⚠️ Local changes detected.
⚠️ Pulling changes from the cloud will override your local changes.

Now you are ready to start coding and use your data model storage.

The Code

In our previous implementation, we used MDX files stored in a GitHub repository to display our markdown content as a web blog page. However, this approach made it challenging to manage and maintain the MDX files through a website. It required downloading, editing, and re-uploading the MDX files.

To improve the management of our blog posts, we can leverage the Amplify libraries for a more efficient workflow.

aws-amplify: This is the core library of AWS Amplify, providing a JavaScript interface for interacting with AWS services, including authentication, storage, and database.
@aws-amplify/ui-react: This library offers UI components and utilities for building user interfaces in React applications. It includes components for authentication, forms, and commonly used web application UI elements.

These libraries simplify the integration of AWS services into React applications, providing convenient methods and components for tasks like authentication and data management. They abstract the underlying AWS SDKs, offering a higher-level API that streamlines the development process.

To implement this solution, we can also take advantage of the Next.js server-side rendering (SSR) feature supported by the Amplify libraries.

First, make sure you have the necessary Amplify UI libraries by running the following command:

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

Next, update your _app.js file to configure Amplify and enable SSR support:

import { Amplify } from 'aws-amplify';
import awsconfig from '../src/aws-exports';
Amplify.configure({
  ...awsconfig,
  ssr: true
});

In your [slug.js] file, make the following changes:

+import { withSSRContext } from "aws-amplify";
+import { Posts } from "../../src/models";
import { format, parseISO } from "date-fns"

export async function getStaticProps(context) {
+  const { DataStore } = withSSRContext(context);
  const { params } = context;
-  const allPosts = getAllPosts();
-  const { data, content } = allPosts.find((item) => item.slug === params.slug);
+  const { slug } = params;
+  const post = await DataStore.query(Posts, slug);
+  const { data, content } = matter(post.content);
+  console.log(data, content);
  const mdxSource = await serialize(content);

  return {
    props: {
      ...data,
-      date: data.date.toISOString(),
+      date: post.createdAt,
      content: mdxSource,
    },
+    revalidate: 60 * 60,
  };
}

-export async function getStaticPaths() {
+export async function getStaticPaths(context) {
+  const { DataStore } = withSSRContext(context);
+  const posts = await DataStore.query(Posts);
+  const paths = posts.map((post) => ({ params: { slug: post.id } }));
  return {
-    paths: getAllPosts().map((post) => ({
-      params: {
-        slug: post.slug,
-      },
-    })),
-    fallback: false,
+    paths,
+    fallback: true,
  };
}

Let's break down the changes:

import { withSSRContext } from "aws-amplify";
import { Posts } from "../../src/models";

Here, we import the withSSRContext function, which enables us to query our data using SSR, and the Posts schema from the GraphQL models.

export async function getStaticProps(context) {
  const { DataStore } = withSSRContext(context);
  const { params } = context;
  const { slug } = params;
  const post = await DataStore.query(Posts, slug);
  const { data, content } = matter(post.content);
  const mdxSource = await serialize(content);

We utilize the getStaticProps function from Next.js, which receives the context object containing the req and res keys from the session.

Using context, we leverage withSSRContext from Amplify to obtain the DataStore function. We also extract the parameters and the slug, which represents the ID of our post request. With the slug and DataStore.query function, we fetch the data and assign it to the post variable. From post, we can retrieve all the relevant post details such as the content, date, and summary.

return {
  props: {
    ...data,
    date: post.createdAt,
    content: mdxSource,
    slug: slug,
  },
  revalidate: 60 * 60,
};

Finally, we return the data for rendering. The revalidate property is used to generate the data on the server-side according to the specified schedule.
In the future we will like to use on On-Demand Incremental Static Regeneration (ISR) but at the moment is not a supported feature: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html

The same modifications are made to the getStaticPaths function for generating the paths:

export async function getStaticPaths(context) {
  const { DataStore } = withSSRContext(context);
  const posts = await DataStore.query(Posts);
  const paths = posts.map((post) => ({ params: { slug: post.id } }));
  return {
    paths,
    fallback: true,
  };
}

With these changes in place, you can render the post as before, but now utilizing the Post model datastore instead of static files.

  <div className="mx-5">
    <h2 className="dark:text-white text-3xl mt-8 font-bold">
      {title}
    </h2>
    <div className="text-sm text-gray-600 dark:text-gray-200 mt-4">
      Published {format(parseISO(date), "MMMM do, uuu")}
    </div>
    <article
      className="
+        prose dark:prose-invert
+        prose-a:text-blue-600
+        prose-a:font-light
+        prose-a:italic
+        prose-pre:bg-slate-800
+        prose-img:rounded
+        xl:prose-pre:prose-md
+        lg:prose-pre:prose-sm
+        xl:prose-xl
+        lg:prose-lg
+        prose-xl
+        max-w-sm
+        sm:max-w-lg
+        md:max-w-2xl
+        lg:max-w-3xl
+        xl:max-w-5xl
+        2xl:max-w-5xl
+        lg:prose-img:max-w-5xl
+        pt-6 text-slate-600 dark:text-slate-300 font-light font-sans"
    >
      <MDXRemote {...content} />
    </article>
  </div>

You can find the complete code here.

Finally, once you update a blog on Amplify Studio, depending of the revalidation time, the content of the blog will be recreated from our database and show in our website.

Conclusion

In the context of this blog, DynamoDB is used as the data store for the blog posts. Instead of using MDX files, the blog content is stored in a DynamoDB table, which is accessed and managed using Amplify Studio. This approach provides an easy way to manage blog content without having to deal with the complexities of file-based storage.

In summary, AWS Amplify is a powerful development platform that provides a wide range of services and features for building modern web and mobile applications. Amplify Studio is a visual interface that simplifies the process of managing backend resources, making it an ideal choice for developers who prefer a more visual approach. Next.js is a popular React-based framework that offers several features for building server-side rendered web applications. AWS DynamoDB is a highly available, durable, and secure NoSQL database service that provides fast and predictable performance with seamless scalability.

References

Nadder Dabit GitHub(Popular AWS/Next.js/Web3 developer): https://github.com/dabit3/next.js-amplify-datastore
Official Amplify documentation for DataStore: https://docs.amplify.aws/lib/datastore/data-access/q/platform/js/
AWS Amplify Next.js feature support: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html
Author's portfolio blog: https://albac.dev/blog/67d0470b-4056-460c-9272-3b182d4ab8aa
Blog code: https://github.com/albac/albac.dev/blob/v1.3/

Implementing User Authentication in a Blog Application using AWS Amplify, NextJS, and Google Sign-In

Alfredo Baldoceda — Thu, 25 May 2023 03:47:43 +0000

In this tutorial, we will walk through the process of implementing user authentication in a blog application using AWS Amplify, NextJS, and Google Sign-In. Adding user authentication to your blog application allows users to authenticate themselves and edit their blogs securely. This feature enhances the user experience and adds an extra layer of security to your application.

Prerequisites

Before getting started, make sure you have the following prerequisites:

An AWS account
Basic knowledge of NextJS and AWS Amplify

If you haven't already done so, we recommend checking out our previous blog post on adding a post data model with Amplify.

Additionally, we suggest following the hosting blog before adding authentication, as it provides instructions that will be helpful in this blog.

Step 1: Set up Google Console OAuth

Before adding social authentication to our app, we need to configure Google OAuth. Follow these steps:

1. Go to the Google Cloud Console and create a new project.

2. Set up the OAuth consent screen by selecting API & Services in the left menu, then Oauth Consent screen. Choose External as the User Type, enter an App Name, and optionally upload a logo.

3. After completing the consent screen, go to credentials under API & Services and create an OAuth Client ID. Choose Web Application as the application type and enter a name to identify your client. Leave the Authorized JavaScript origins and Authorized redirect URIs blank for now.

4. Take note of the Google Web Client ID and Google Client Secret generated for your OAuth flow.

Step 2: Set up AWS Amplify Authentication

Now, let's set up AWS Amplify Authentication and configure Google Sign-In as a social provider. Follow these steps:

1. Ensure you have Amplify set up and a GraphQL API created. You can check the status by running amplify status in your terminal. You can also follow our past tutorial where we initiate and host an amplify project.



    Current Environment: dev

┌──────────┬──────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name        │ Operation │ Provider plugin   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting       │ Create    │                   │
├──────────┼──────────────────────┼───────────┼───────────────────┤
│ Api      │ albacdev             │ No Change │ awscloudformation │
└──────────┴──────────────────────┴───────────┴───────────────────┘

2. Add a new Amplify Authentication and Google Sign-In as a social provider by running the following command in your terminal:



   $ amplify add auth

Choose Default configuration with Social Provider (Federation) when ask for the default authentication and security configuration. Select Email as the sign-in option and configure advanced settings as needed. Enter your chosen domain name prefix, redirect sign-in and sign-out URIs (e.g., http://localhost:3000), and choose Google as the social provider.




$ 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? Default configuration with Social Provider (Federation)
  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 configure advanced settings? No, I am done
  What domain prefix do you want to use?
  Enter your redirect signin URI: http://localhost:3000/
 ? Do you want to add another redirect signin URI No
  Enter your redirect signout URI: http://localhost:3000/
 ? Do you want to add another redirect signout URI No
  Select the social providers you want to configure for your user pool: Google

  You've opted to allow users to authenticate via Google. If you haven't already, you will need to go to https://developers.google.com/identity and create an App ID.

  Enter your Google Web Client ID for your OAuth flow: XXXXXXXXXXXXXXX
  Enter your Google Web Client Secret for your OAuth flow: XXXXXXXXXXXXXXXXXXXXXXXXX

3. Provide your Google Web Client ID and Google Client Secret when prompted.

Once the setup is complete, Amplify will add the necessary auth resources locally.

Take a note of the Hosted UI Endpoint and go back to Google Console OAuth Credentials, type it into your user pool domain into Authorized Javascript origins and with the /oauth2/idpresponse endpoint into Authorized Redirect URIs.

Step 2: Set Up Groups and Permissions

To control access to our application, we need to set up groups and permissions. This can be done using the AWS CLI or Amplify Studio. Here's an example of how to do it using the CLI:

1. Add groups using the following command:



   amplify auth add-group

2. Add permissions using the following command:



   amplify auth add-permission

You can also set up groups and permissions using Amplify Studio, which provides a visual interface for managing authorization rules.

Step 3: Modify Your NextJS Code

Now that we have set up the authentication provider, social provider, groups, and permissions, we need to modify our NextJS code to handle the sign-in and sign-out workflow and display a list of blogs that the user can edit.

1. Load the authentication setup by calling Amplify.configure and loading the aws_exports configuration in the _app.js file.



   Amplify.configure({
     ...awsconfig,
     ssr: true,
     DataStore: {
       authModeStrategyType: AuthModeStrategyType.MULTI_AUTH,
     },
   });

This enables server-side rendering (SSR) and the MULTI_AUTH strategy for our data store, allowing us to have permissions for both Cognito groups and social provider groups.

2. Add the Authenticator.Provider to your _app.js file:



   <Authenticator.Provider>
       <Component {...pageProps} />
   </Authenticator.Provider>

This sets up the authentication provider for your application.

3. Use the useAuthenticator hook in your NavBar-Menu component to check if the user is authenticated. Show the SignOut button if the user is authenticated against Cognito or the Google provider; otherwise, show the SignIn button to allow users to authenticate.



const { user } = useAuthenticator((context) => [context.user]);
...
...
 {user ? <SignOutButton username={user.username} /> : <SignInButton />}
...

4. Create the necessary routes and components for the sign-in and sign-out functionality.

On the SignIn button we only use next/link to redirect the request to the /signin page:



<Link className="text-white" href="/signin">

On the SignIn page we are using the Authenticator component, customized with our Logo and use ThemeProvider to enable dark mode:



...
import {
  Authenticator,
  defaultDarkModeOverride,
  ThemeProvider,
  useTheme,
  View,
} from "@aws-amplify/ui-react";
...
...
 const theme = {
    name: "my-theme",
    overrides: [defaultDarkModeOverride],
    tokens: {
      components: {
        textareafield: {
          rows: { value: "{20}" },
          size: { value: "large" },
          resize: { value: "vertical" },
        },
      },
    },
  };

  const components = {
    Header() {
      const { tokens } = useTheme();

      return (
        <div className="mx-32">
        <View textAlign="center" padding={tokens.space.large}>
          <ImageS3 alt="Amplify logo" src="albac_logo" />
        </View>
        </div>
      );
    },
  };
...
...
          <Authenticator components={components}>
            <>{errorMessage && <p>Error: {errorMessage}</p>}</>
            <ThemeProvider theme={theme} colorMode="system" />
          </Authenticator>
...

5. Protect restricted routes from non-authenticated users. Wrap the components that require authentication with the Authenticator component.

On the blog-edit page, we do the same to protect from non-authenticated users.



          <Authenticator components={components}>
            <>{errorMessage && <p>Error: {errorMessage}</p>}</>
            <ThemeProvider theme={theme} colorMode="system">
              <NewPostsUpdateForm
                mode="Dark"
                id={id}
                onSuccess={() => router.push("/blog/" + id)}
                onError={(error) => {
                  setErrorMessage(error);
                }}
              />
            </ThemeProvider>
          </Authenticator>

After this is setup you should be able to see the login page from Amplify ui component and able using cognito.

By following these steps, you should be able to implement user authentication in your NextJS blog application using AWS Amplify, NextJS, and Google Sign-In.

Conclusion

In this tutorial, we have learned how to implement user authentication in a blog application using the powerful combination of AWS Amplify, NextJS, and Google Sign-In. By following the step-by-step guide, you can enhance your blog application and provide a secure environment for users to manage their blogs.

User authentication is an essential feature for web applications, and with AWS Amplify, the process becomes seamless and efficient. By integrating Google Sign-In as a social provider, you allow users to authenticate themselves easily while maintaining a high level of security.

By implementing user authentication, you can ensure that only authorized users can access and edit their blogs, enhancing the overall user experience and adding an extra layer of security to your application. Additionally, with the flexibility and scalability of AWS Amplify, you can easily adapt and expand your authentication system as your application grows.

Reference

Host a Next.js Blog with AWS Amplify and Setup Automated Deployments

Alfredo Baldoceda — Thu, 25 May 2023 00:46:56 +0000

In this tutorial, we will guide you through the process of hosting a Next.js blog using AWS Amplify and automating deployments with GitHub. We will also provide information about the AWS resources created by Amplify and present some guided images to help you understand the workflow.

To host a site using AWS Amplify, we first need to have a website we can host. For this article, we will use a site that was created on our previous blog post.

Prerequisites

Before getting started with Amplify, make sure you have the following:

An AWS Account: If you don't have one, you can create it by following the instructions in the AWS Account Creation Guide.
Amplify CLI: Install the Amplify CLI by referring to the Amplify CLI Installation Guide.
GitHub Account: Create a GitHub account if you don't have one already at https://github.com/.

Setting Up the Project

To prepare your project to work with Amplify follow these steps:

1. Create a new NextJS project or you can follow our past blog and use that project. To create a new Next.js project run the following:

npx create-next-app@latest dev-blog --typescript --eslint

2. Initialize Amplify for SSR (Server-Side Rendering): In the root directory of your project, run the following command:

$ amplify init

? Enter a name for the project: albacdev
? Enter a name for the environment: dev
? Choose your default editor: vim
? Choose the type of app that you're building: javascript
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: .next
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Y
? Please choose the profile you want to use: <your profile>

3. Push Code to GitHub Repository:

If you don't have one already, create a public repository on Github:

And push your project code to the main branch using the following commands:

$ git init
$ git remote add origin git@github.com:username/my-next-app.git
$ git add .
$ git commit -m "initial commit"
$ git push origin main

Adding Amplify Hosting

First, since we will need server-side rendering for NextJS in future blogs, we need to make sure we initialize Amplify for SSR. Make sure you enter .next as the Distribution Directory Path.

To add hosting to your project and enable continuous deployments from GitHub, follow these steps:

1. Add Hosting with Amplify CLI: Run the following command to add hosting to your project:

$ amplify add hosting

? Select the plugin module to execute: # Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type: # Continuous deployment (Git-based deployments)

2. Connect to GitHub: Amplify will open the Amplify AWS console in your browser. Follow the instructions to connect your project to the GitHub repository.

3. Configure Build Settings: In the Amplify console, set up or select the environment to use and the required AWS role for Amplify to access your resources.

4. Build and Deployment: Once the build settings are configured, Amplify will start the build process. You can monitor the build progress in the Amplify console. The build process will create all the necessary resources and deploy your application.

5. Custom Domain (Optional): You can set up a custom domain for your hosted website by accessing the Amplify console and selecting "Domain management" under "Amplify settings".

Architecture and AWS Resources

Amplify utilizes AWS resources behind the scenes to deploy and host your Next.js blog. Here are some of the AWS resources and configurations created by Amplify:

Multiple AWS roles and policies: Amplify creates IAM roles and policies to manage access to AWS resources.
S3 bucket: Amplify uses an S3 bucket to store your application's static assets.
CloudFront setup configurations (CDN): Amplify configures CloudFront, a content delivery network, to cache and serve your application's content globally.
AppSync GraphQL setup: Amplify sets up an AppSync GraphQL API for data management and real-time updates.
AppSync API Key setup: Amplify generates an API key for accessing the AppSync API.
AppSync DataStore setup: Amplify enables the AppSync DataStore, which provides offline data synchronization and conflict resolution capabilities.
Multiple AppSync Resolvers: Amplify configures resolvers to handle data queries and mutations in the AppSync API.
Multiple AppSync Functions: Amplify creates AppSync functions to perform custom logic or integrations.
Build pipeline: Amplify sets up a build pipeline to automate the deployment process.
Domain Name management: Amplify offers domain management features, allowing you to configure custom domains for your website.
SSL/TLS certificates: Amplify automatically provisions and manages SSL/TLS certificates for secure communication with your website.

Conclusion

AWS Amplify simplifies the deployment workflow by seamlessly integrating with GitHub for continuous deployments. This means that every time you push changes to your GitHub repository, Amplify will automatically trigger a build process and deploy the updated version of your Next.js blog. This streamlined workflow saves time and effort, allowing you to focus on developing your application rather than dealing with manual deployment processes.

One of the key advantages of using AWS Amplify is its user-friendly interface. The Amplify console provides a centralized location where you can manage your Amplify projects, configure build settings, monitor deployment progress, and access various AWS resources. This intuitive interface makes it easy to navigate and understand the different components of your Next.js blog's infrastructure.

Amplify also offers support for custom domains, allowing you to associate a personalized domain name with your hosted website. This feature enables you to create a branded and professional online presence. With Amplify's domain management capabilities, you can easily configure and manage custom domains, making it simple to establish a unique identity for your Next.js blog.

Hosting a Next.js blog with AWS Amplify provides a comprehensive solution for deploying and managing your application. It streamlines the deployment process, offers a user-friendly interface, supports custom domains, and ensures secure communication. By utilizing Amplify's powerful features and its integration with Next.js, you can focus on delivering an exceptional user experience while leaving the infrastructure management to Amplify.

References

Building a Markdown blog using Next.js and Tailwind Typography

Alfredo Baldoceda — Wed, 24 May 2023 18:30:35 +0000

Project Overview

In this tutorial, we will create a Markdown blog using Next.js, a powerful React framework for building web applications. We will use Tailwind CSS, a utility-first CSS framework, to style the blog. Additionally, we will leverage the Tailwind Typography plugin to enhance the typography of the Markdown content.

To parse the Markdown files and extract metadata, we will use the gray-matter package. The nextjs-mdx-remote package will help us seamlessly render the Markdown content on the server and client sides. Lastly, we will utilize the date-fns package for working with dates and formatting them in the blog posts.

The current webpage has been developed using the instructions provided in this blog.

You can find the updated code for this project here.

This guide follows Harry Wolf's YouTube tutorial video with some personal modifications we have added. Please watch the tutorial and consider subscribing to his YouTube Channel.

You will find the code for this page on my public repository.

Additionally, I have opened a pull request to the original author with the changes made to this blog.

Getting Started

To begin, ensure that you have the following software and packages installed on your machine:

Node.js (version 19.4.0)
Next.js (version 13.3.4)
React (version 18.2.0)
Tailwind CSS (version 3.3.2)
@tailwindcss/typography (version 0.5)
nextjs-mdx-remote (version 1.5.0)
gray-matter (version 4.0.3)
date-fns (version 2.23.0)
Tailwind Typography: Tailwind Typography is a plugin for Tailwind CSS that provides a set of typographic styles and utilities for Markdown content. It helps improve the readability and visual appeal of text by applying consistent and responsive typographic styles.
nextjs-mdx-remote: The nextjs-mdx-remote package is a library that enables rendering of MDX (Markdown and JSX) content in Next.js applications. It allows you to fetch and render MDX files on both the server and client sides, making it suitable for building blogs and documentation websites.
gray-matter: gray-matter is a popular JavaScript library used for parsing and extracting metadata from Markdown files. It allows you to access front-matter data (metadata) in your Markdown files, such as titles, dates, or custom fields. It simplifies working with Markdown files that contain additional structured data.
date-fns: date-fns is a lightweight JavaScript library for working with dates. It provides various utility functions for parsing, formatting, manipulating, and comparing dates. In the context of a blog, date-fns can be used to format dates from metadata in a human-readable format, handle time zones, calculate time differences, and perform other date-related operations.

The setup

Make sure you have the latest version of Node installed:



$ node --version
v19.4.0

Creating Next.js project

We recommend starting from a new project and adding the changes described in the YouTube video. However, you can also clone the original author's GitHub.

To create a new project just run the following for creating new Next.js Project with Tailwind:



$ npx create-next-app@latest dev-blog --typescript --eslint

Installing and configuration for tailwindcss

Next install tailwind and other dependencies by running:



$ cd dev-blog
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Change the file styles/globals.css with the following content:



@tailwind base;
@tailwind components;
@tailwind utilities;

Optionally, I added some base style to styles/globals.css for links and headings:



@layer base {
    a {
        @apply text-blue-600 hover:text-blue-500 dark:text-sky-400;
    }
    h1 {
        @apply dark:text-gray-300 text-3xl;
    }
    h2 {
        @apply text-2xl;
    }
    h3 {
        @apply text-xl;
    }
}

Tailwindcss Typography setup

The Tailwind CSS Typography plugin will allow us to have more control over the styling of Markdown.

Run the following command to install the plugin:



$ npm install -D @tailwindcss/typography

Also, add the plugin to the Tailwind CSS configuration file, tailwind.config.js, to look like this:



module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
};

Install nextjs-mdx-remote and other npm packages

Now install nextjs-mdx-remote and all other NPM package dependencies:



$ npm install gray-matter --save
$ npm install date-fns --save
$ npm install next-mdx-remote --save

The Code

Here we will explain the changes we made to improve and fix current issues due to some package upgrades.
First, we follow almost the same changes as the original author.
Second, during the video instruction the author was using renderString and hydrate functions, that changed on the future releases of Next-MDX-Remote.
Finally, we added Tailwind Typography which helps to improve the styles of the markdown and show a more stylish look to our blog.
See all the code changes for this project at my github repo.

Generating date and creating mdx file:

To generate the date for the MDX content, Harry uses a Node command line, which we will also be using. However, we want to create the file with a name that can be sorted by date on the home page.

Using the command below, we can get the date from the toISOString() output and the name for the file from the getTime() output:



$ node -e 'console.log(new Date().toISOString(), new Date().getTime())'
2022-04-27T23:34:37.161Z 1651102477161

Create a directory called mdxfiles and place there all your markdowns.

We can then create the file using the name from getTime() and the date from toISOString():



$ vim mdxfiles/1651102477161.mdx
---
title: Blog with NextJs, Tailwind and Markdown
summary: |
  Short description
date: 2022-04-27T23:34:37.161Z
---

Some content here....

Now let's modify the index.js file and reverse array order, so we get the latest blog on top.

Use slice(0).reverse.map to reverse the array:

To display the latest blog post on top, we need to modify the index.js file and reverse the order of the array. We can use slice(0).reverse().map() to reverse the array, as shown below:



posts: allPosts
    .slice(0)
    .reverse()
    .map(({ data, slug }) => ({
        ...data,
        date: data.date.toISOString(),
        content: data.summary,
        slug,
    })),

Get Posts

And let's create the GetAllPost library that will get all post from our mdxfiles directory.



export function getAllPosts() {
  const allPosts = fs.readdirSync(contentDirectory);
  // console.log(allPosts);

  return allPosts.map((fileName) => {
    const slug = fileName.replace(".mdx", "");
    const fileContents = fs.readFileSync(
      path.join(contentDirectory, fileName),
      "utf8"
    );
    const { data, content } = matter(fileContents);
    // console.log(data, content);
    return {
      data,
      content,
      slug,
    };
  });
}

List Posts

Now we edit our index page to list all posts, we use getAllPost library on the getStaticProps.



export default function Home({ posts }) {
    return (
        <div className="h-screen">
            <Head>
                <title>albac: home</title>
                <meta
                    name="description"
                    content="Generated by create next app"
                />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main>
                <h1>Projects</h1>
            </main>
            <div className="space-y-8 mt-4">
                {posts.map((item) => (
                    <BlogListItem key={item.slug} {...item} />
                ))}
            </div>
        </div>
    );
}

export async function getStaticProps() {
    const allPosts = getAllPosts();

    return {
        props: {
            posts: allPosts
                .slice(0)
                .reverse()
                .map(({ data, slug }) => ({
                    ...data,
                    date: data.date.toISOString(),
                    content: data.summary,
                    slug,
                })),
        },
    };
}

Changes for next-mdx-remote

The breaking release Next-mdx-remote V3 included internal rewrites from V2. This blog is using next-mdx-remote 4.4.1, so we need to change the following file: pages/blog/[slug].js.



-import renderToString from 'next-mdx-remote/render-to-string';
-import hydrate from 'next-mdx-remote/hydrate';
+import { serialize } from 'next-mdx-remote/serialize';
+import { MDXRemote } from 'next-mdx-remote';

The hydrate function is no longer necessary, and you can use MDXRemote directly to hydrate the markdown content:



<MDXRemote {...content} />

The renderToString function has been replaced with serialize:



-  const mdxSource = await renderToString(content);
+  const mdxSource = await serialize(content);

Using typography plugin and prose

We can also use Tailwind's typography plugin to style the markdown. Follow the instructions in the tailwindcss/typography documentation. We can use the prose class to add styles and also use HTML tags in the markdown.



<article className="prose dark:prose-invert text-slate-600 dark:text-slate-300 font-light font-sans">
    <MDXRemote {...content} />
</article>

Here's an example of how we use h2 tags on the markdown:



<h2>The setup</h2>

Make sure you have the latest [node](https://nodejs.org/en/download/current/) installed:

We're also using dark:prose-inverse to enable the use of our dark theme on the markdown.

You can see all changes on our dynamic pages here.

Build and Start NextJs

While working on development you can start the app by only running npm run dev. However at this point you can generate an optimize Next.js version by running npm run build and then run npm run dev or npm run start



$ npm run build
> dev-blogs@0.1.0 build
> next build

info  - Linting and checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (7/7)
info  - Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ● /                                      672 B          83.4 kB
├   /_app                                  0 B            75.6 kB
├ ○ /404                                   182 B          75.8 kB
├ ○ /about                                 400 B            76 kB
├ λ /api/hello                             0 B            75.6 kB
└ ● /blog/[slug]                           1.31 kB          84 kB
    ├ /blog/1651102477161
    ├ /blog/1651103589178
    └ /blog/1651104045510
+ First Load JS shared by all              79.3 kB
  ├ chunks/framework-2c79e2a64abdb08b.js   45.2 kB
  ├ chunks/main-dda1ec63a16662d1.js        26.8 kB
  ├ chunks/pages/_app-5bca0e82a983c558.js  2.76 kB
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/b6c8a4e05cb9e5d4.css               3.7 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

This output indicates that there are no issues currently with compiling and generating the static content. Now, just run yarn dev to start the server and start coding:



$  npm run dev

> dev-blogs@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1090 ms (188 modules)
wait  - compiling...
event - compiled successfully in 104 ms (139 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 44 ms (189 modules)

Lastly, the end result can be seen on this page style. Compare it to the GitHub link to see the difference.

What is next?

Host Blog using AWS Amplify
Manage Blog with Amplify Studio
Host Next.js images in S3 with AWS Amplify.
Add Highlights and code language recognization to code blocks
Improve NexJs performance and SEO best practices.

Conclusion

In this tutorial, we learned how to create a Markdown blog using Next.js and Tailwind Typography. We covered the concepts of rendering Markdown content, styling it using Tailwind CSS, and leveraging packages like nextjs-mdx-remote, gray-matter, and date-fns. By following the steps outlined in this tutorial, you now have the foundation to create your own dynamic and stylish Markdown blog using Next.js and Tailwind CSS.

References

Code for this arcticle: https://github.com/albac/dev-blogs
Author original blog: Building a Markdown blog using Next.js and Tailwind Typography
Next MDX Remote GitHub: https://github.com/hashicorp/next-mdx-remote
Tailwind Typography plugin: https://tailwindcss.com/docs/typography-plugin
Usefull tool to checkout markdown syntax issues: https://mdxjs.com/playground/