Building a Secure, Scalable Admin Panel with Amazon Cognito and React

Overview

Managing users across multiple applications while maintaining security and scalability is a critical challenge in today’s digital landscape. Traditional authentication systems often fall short when dealing with multi-tenant environments and role-based access control. This article explores building a comprehensive admin panel using Amazon Cognito, React, and serverless architecture.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

The Challenge of Modern User Management

Enterprise applications require sophisticated user management capabilities beyond simple login/logout functionality. Organizations need systems handling user creation, group-based permissions, automated email notifications, and seamless application integration. Building such systems from scratch is time-intensive and requires significant security expertise.

Architecture Overview: A Serverless Approach

Our solution leverages a fully serverless architecture using AWS managed services, providing enterprise-grade scalability while eliminating server maintenance.

Amazon Cognito is the identity provider that handles user authentication, authorization, and group management. With User Pools managing user directories and Identity Pools providing temporary AWS credentials, Amazon Cognito eliminates the complexity of building custom authentication systems.

Amazon API Gateway and AWS Lambda power the backend operations, providing RESTful APIs for user management operations and email notifications. This serverless approach ensures automatic scaling and cost optimization.

Amazon CloudFront delivers multiple applications through CDN distributions, enabling fast global access to different application modules.

Amazon SES handles automated email notifications, sending welcome emails with temporary credentials and application-specific links to new users.

Core Components

Amazon Cognito – Identity provider handling authentication, authorization, and group management
Amazon API Gateway & AWS Lambda – RESTful APIs for user operations and email notifications
Amazon CloudFront – CDN delivery for multiple applications
Amazon SES – Automated welcome emails with credentials and application links.

Amazon Cognito Configuration

The system uses both User Pools and Identity Pools for comprehensive authentication:

const amplifyConfig = {
    Auth: {
        region: awsRegion,
        userPoolId: yourPoolId,
        userPoolWebClientId: yourClientId,
        identityPoolId: yourIdentityPoolId,
    },
};

Amplify.configure({ Auth: amplifyConfig.Auth });

const amplifyConfig = {

Auth: {

region: awsRegion,

userPoolId: yourPoolId,

userPoolWebClientId: yourClientId,

identityPoolId: yourIdentityPoolId,

};

Amplify.configure({ Auth: amplifyConfig.Auth });

The system supports multiple user groups: Admin (all applications), Operations, HR, and User etc. with specialized access.

Secure Authentication Implementation

const initClient = async () => {
    try {
        const session = await Auth.currentSession();
        const credentials = await Auth.currentCredentials();

        const client = new CognitoIdentityProviderClient({
            region: amplifyConfig.Auth.region,
            credentials: {
                accessKeyId: credentials.accessKeyId,
                secretAccessKey: credentials.secretAccessKey,
                sessionToken: credentials.sessionToken,
            },
        });

        setCognitoClient(client);
        setIsAuthenticated(true);
    } catch (err) {
        handleGuestAuthentication();
    }
};

const initClient = async () => {

try {

const session = await Auth.currentSession();

const credentials = await Auth.currentCredentials();

const client = new CognitoIdentityProviderClient({

region: amplifyConfig.Auth.region,

credentials: {

accessKeyId: credentials.accessKeyId,

secretAccessKey: credentials.secretAccessKey,

sessionToken: credentials.sessionToken,

});

setCognitoClient(client);

setIsAuthenticated(true);

} catch (err) {

handleGuestAuthentication();

}

};

User Creation and Management

const addUser = async (email, group) => {
    const customPassword = generateCustomPassword();

    const createCmd = new AdminCreateUserCommand({
        UserPoolId: amplifyConfig.Auth.userPoolId,
        Username: email,
        UserAttributes: [
            { Name: "email", Value: email },
            { Name: "email_verified", Value: "true" },
        ],
        TemporaryPassword: customPassword,
        MessageAction: "SUPPRESS"
    });

    await cognitoClient.send(createCmd);
    await addUserToGroup(email, group, null, customPassword);
};

const addUser = async (email, group) => {

const customPassword = generateCustomPassword();

const createCmd = new AdminCreateUserCommand({

UserPoolId: amplifyConfig.Auth.userPoolId,

Username: email,

UserAttributes: [

{ Name: "email", Value: email },

{ Name: "email_verified", Value: "true" },

TemporaryPassword: customPassword,

MessageAction: "SUPPRESS"

});

await cognitoClient.send(createCmd);

await addUserToGroup(email, group, null, customPassword);

};

Frontend-Driven Email Notifications

The system automatically sends personalized welcome emails directly from React:

async function sendMainAfterAddition(username, groupName, password = "") {
    const response = await fetch(
        "sendEmailApi",
        {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                "action": "send_email",
                "email": username,
                "group": groupName,
                "Application_Link": deployedCDNs[groupName],
                "password": password
            })
        }
    );
}

async function sendMainAfterAddition(username, groupName, password = "") {

const response = await fetch(

"sendEmailApi",

{

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

"action": "send_email",

"email": username,

"group": groupName,

"Application_Link": deployedCDNs[groupName],

"password": password

})

}

);

}

Benefits:

Immediate user onboarding with instant credential delivery
Dynamic application routing based on user groups
Secure temporary password transmission

Intelligent Group Management

Admin users automatically receive comprehensive access:

const addUserToGroup = async (username, groupName, useremail, password) => {
    if (groupName === 'Admin') {
        let availablePermissions = ['Admin', 'HR', 'Operations'];
        let groupsUserBelongsTo = await fetchUserGroups(username);
        let groupsToBeAdded = availablePermissions.filter(permission => 
            !groupsUserBelongsTo.includes(permission)
        );

        await Promise.all(
            groupsToBeAdded.map(async (group) => {
                const command = new AdminAddUserToGroupCommand({
                    UserPoolId: amplifyConfig.Auth.userPoolId,
                    Username: username,
                    GroupName: group,
                });
                return await cognitoClient.send(command);
            })
        );
    }
    
    await sendMainAfterAddition(useremail || username, groupName, password);
};

const addUserToGroup = async (username, groupName, useremail, password) => {

if (groupName === 'Admin') {

let availablePermissions = ['Admin', 'HR', 'Operations'];

let groupsUserBelongsTo = await fetchUserGroups(username);

let groupsToBeAdded = availablePermissions.filter(permission =>

!groupsUserBelongsTo.includes(permission)

);

await Promise.all(

groupsToBeAdded.map(async (group) => {

const command = new AdminAddUserToGroupCommand({

UserPoolId: amplifyConfig.Auth.userPoolId,

Username: username,

GroupName: group,

});

return await cognitoClient.send(command);

})

);

}

await sendMainAfterAddition(useremail || username, groupName, password);

};

Security and Password Generation

Cryptographically secure password generation ensures enterprise standards:

const generateCustomPassword = () => {
    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
    const numbers = '0123456789';
    const symbols = '!@#$%^&*';

    let password = '';
    password += uppercase.charAt(Math.floor(Math.random() * uppercase.length));
    password += lowercase.charAt(Math.floor(Math.random() * lowercase.length));
    password += numbers.charAt(Math.floor(Math.random() * numbers.length));
    password += symbols.charAt(Math.floor(Math.random() * symbols.length));

    const allChars = uppercase + lowercase + numbers + symbols;
    for (let i = 4; i < 12; i++) {
        password += allChars.charAt(Math.floor(Math.random() * allChars.length));
    }

    return password.split('').sort(() => Math.random() - 0.5).join('');
};

const generateCustomPassword = () => {

const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

const lowercase = 'abcdefghijklmnopqrstuvwxyz';

const numbers = '0123456789';

const symbols = '!@#$%^&*';

let password = '';

password += uppercase.charAt(Math.floor(Math.random() * uppercase.length));

password += lowercase.charAt(Math.floor(Math.random() * lowercase.length));

password += numbers.charAt(Math.floor(Math.random() * numbers.length));

password += symbols.charAt(Math.floor(Math.random() * symbols.length));

const allChars = uppercase + lowercase + numbers + symbols;

for (let i = 4; i < 12; i++) {

password += allChars.charAt(Math.floor(Math.random() * allChars.length));

}

return password.split('').sort(() => Math.random() - 0.5).join('');

};

Performance Optimization

The serverless architecture provides automatic scaling with additional optimizations:

Pagination for large user lists
Efficient API calls with retry logic
CDN integration for global delivery
Asynchronous email sending

Conclusion

This serverless user management system demonstrates how AWS services create enterprise-grade solutions without traditional server complexity. The integration of frontend-driven email notifications with dynamic application routing provides seamless user onboarding that scales automatically.

Key achievements include:

Automatic scaling without infrastructure management
Enterprise-grade security with role-based access
Reduced operational overhead through managed services
Direct React-to-AWS integration eliminating middleware complexity

Future enhancements:

Multi-factor authentication, SSO capabilities, advanced audit logging, and Amazon EventBridge integration for real-time notifications.

This solution offers enterprise capabilities with minimal operational complexity, which is ideal for organizations modernizing user management while maintaining security and scalability requirements.

Drop a query if you have any questions regarding Amazon Cognito and we will get back to you quickly.

Empowering organizations to become ‘data driven’ enterprises with our Cloud experts.

Reduced infrastructure costs
Timely data-driven decisions

Get Started

About CloudThat

CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.

FAQs

1. How does the system handle password security and user onboarding?

ANS: – The system generates cryptographically secure temporary passwords that meet Amazon Cognito’s enterprise standards, including uppercase, lowercase, numbers, and symbols. Users receive these credentials via automated email notifications and must change their passwords upon first login. The email system is triggered directly from the React frontend and includes dynamic application links based on user groups, ensuring immediate access to relevant applications.

2. Can this architecture scale for large enterprises with thousands of users?

ANS: – Yes, the serverless architecture automatically scales to handle enterprise workloads. Amazon Cognito supports millions of users, AWS Lambda functions scale automatically based on demand, and Amazon CloudFront CDN ensures global performance. The system implements pagination for user lists, efficient API calls with retry logic, and asynchronous email processing to maintain performance. Costs scale with usage, making it cost-effective for small and large teams.

3. How flexible is the group management system for different organizational structures?

ANS: – The system supports highly flexible group structures. Admin users automatically receive access to multiple applications (Admin, Text2SQL, RAG), while specialized users get granular access based on their roles. The architecture allows easy addition of new groups and applications through configuration changes. Group assignments can be modified programmatically, and the email notification system dynamically routes users to appropriate applications based on their permissions, making it adaptable to various organizational needs.

WRITTEN BY Rishav Mehta

Rishav is a skilled Frontend Developer with a passion for crafting visually appealing and intuitive websites. Proficient in HTML, CSS, JavaScript, and frameworks such as ReactJS, he combines technical expertise with a strong understanding of web development principles to deliver responsive, user-friendly designs. Dedicated to continuous learning, Rishav stays updated on the latest industry trends and enjoys experimenting with emerging technologies in his free time.