How to Implement Authentication in Next.js Using Amazon Cognito and a Custom UI

In the digital era, ensuring secure and seamless user authentication is paramount for any application. AWS Cognito is a powerful service provided by Amazon Web Services (AWS) that simplifies user authentication while offering enhanced security for sensitive user data. It leverages advanced password hashing techniques and provides an array of features to streamline user management.

What is AWS Cognito?

AWS Cognito is a managed service designed to handle authentication, authorization, and user management for your applications. It securely hashes and stores user passwords and offers features such as multi-factor authentication (MFA), identity federation, and social login integration. By using AWS Cognito, you can reduce the burden of building and managing secure authentication systems from scratch.

Setting Up AWS Cognito : A Step-by-Step Guide

Ready to get started? Follow these steps to set up AWS Cognito and integrate it into your application:

Step 1: Create an AWS Account

To begin, log in to your AWS account or create one if you haven’t already. Navigate to the AWS Management Console.

Step 2: Access the Cognito Service

In the AWS Console, type Cognito in the search bar at the top and select the service from the results.

Step 3: Choose Your Use Case

On the Cognito landing page, you’ll be presented with two options:

• Add sign-in and sign-up experience to your app
• Manage user authentication and access

For this guide, we’ll choose the first option, “Add sign-in and sign-up experience to your app.”

Step 4: Configure Your User Pool

A User Pool is the core of AWS Cognito’s authentication mechanism. Here’s what you’ll need to configure:

• Application Type: Select whether your app is a web app, mobile app, or other.
• Application Name: Give your application a recognizable name.
• Login Requirements: Specify mandatory fields for sign-up, such as email or phone number.
• Return URL: Define the URL where users will be redirected post-login.

Save your settings to finalize the User Pool configuration.

Step 5: Enable the “USER_PASSWORD_AUTH” option.

When you finalize the settings. You will be routed to the Cognito dashboard.

Go to App Client > App Client: (app_name). Select Attributes Options from the option tabs. Click on the Edit button. And Enable the “USER_PASSWORD_AUTH” options.

Step 5: Install the AWS library to your NEXT Project.

Now, Jump into your coding environment and install the following library.

npm install @aws-sdk/client-cognito-identity-provider

Step 6: Add Configuration code to your Cognito file.

Create cognito.ts in the Services folder and add the following configuration code to this File. Also replace the region, userPoolId, and clientId with yours.

import {
  CognitoIdentityProviderClient,
  SignUpCommand,
  InitiateAuthCommand,
  SignUpCommandInput,
  InitiateAuthCommandInput,
  CognitoIdentityProviderClientConfig,
  ConfirmSignUpCommandInput,
  ConfirmSignUpCommand,
} from '@aws-sdk/client-cognito-identity-provider';

// Initialize Cognito client
const cognitoClientConfig: CognitoIdentityProviderClientConfig = {
  region: process.env.AWS_REGION,
}; // Replace with your AWS region
const cognitoClient = new CognitoIdentityProviderClient(cognitoClientConfig);

// Replace with your actual values
const userPoolId = process.env.USER_POOL_ID; // Replace with your User Pool ID
const clientId = process.env.CLIENT_ID; // Replace with your App Client ID

export const signUpUser = async (email: string, password: string) => {
  const params: SignUpCommandInput = {
    ClientId: clientId,
    Username: email,
    Password: password,
    UserAttributes: [{ Name: 'email', Value: email }],
  };

  const command = new SignUpCommand(params);
  return cognitoClient.send(command);
};

export const loginUser = async (email: string, password: string) => {
  const params: InitiateAuthCommandInput = {
    AuthFlow: 'USER_PASSWORD_AUTH',
    ClientId: clientId,
    AuthParameters: {
      USERNAME: email,
      PASSWORD: password,
    },
  };

  const command = new InitiateAuthCommand(params);
  return cognitoClient.send(command);
};

export const confirmUser = async (email: string, code: string) => {
  const params: ConfirmSignUpCommandInput = {
    ClientId: clientId,
    Username: email,
    ConfirmationCode: code,
  };

  const command = new ConfirmSignUpCommand(params);
  return cognitoClient.send(command);
};

Step 7: Create API routes in the app/api folder.

Create the API routes for the authentications as follows.

import { loginUser } from '@/services/cognito/cognito';
import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    const body = (await req.json()) as { email: string; password: string };
    const { email, password } = body;
    const tokens = await loginUser(email, password);

    return NextResponse.json(tokens.AuthenticationResult, { status: 200 });
  } catch (error: unknown) {
    return NextResponse.json(
      { message: (error as Error).message || 'Login failed' },
      { status: 400 },
    );
  }
}

Step 8: Make an API request to the AWS Cognito

For login, in your design file, when you enter login and passwords and then on submit call this function you will receive a token from AWS if you registered if not you will get the errors.

 const handleLogin = async (values: { email: string; password: string }) => {
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values),
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.message || 'Login failed');
      }

      const tokens = await response.json();
      console.log('Tokens:', tokens);
    } catch (err: any) {
      console.log(err.message);
    }
  };

Final Thoughts

AWS Cognito is an excellent choice for developers seeking a secure, scalable, and customizable authentication solution. By incorporating it into your application, you can focus on building features while leaving user authentication to a reliable, battle-tested service.

Start your AWS Cognito journey today!

Do you use AWS Cognito? Share your experiences in the comments below!