Architecture

Key Components

• AWS Cognito User Pool - Manages user identities and authentication
• AWS Amplify - Provides the authentication UI and SDK integration
• Custom Auth Hook (useAuth) - Manages authentication state in React
• Role-Based Access Control - Restricts access based on user roles

Authentication Flow

User visits protected route ↓ AuthedApp component checks authentication state ↓ If not authenticated → Show Amplify Authenticator ↓ User signs in with email/password ↓ Cognito validates credentials ↓ User role is verified against allowed roles ↓ Access granted or redirect to appropriate landing page

Setup

1. Install Dependencies

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

2. Configure Amplify

Create an aws-exports.js or configure Amplify in your app initialization:

const awsmobile = {
  aws_project_region: 'us-east-2',
  aws_cognito_region: 'us-east-2',
  aws_user_pools_id: '{YOUR USER POOL ID}',
  aws_user_pools_web_client_id: '{YOUR CLIENT ID}',
  oauth: {},
  aws_cognito_username_attributes: ['EMAIL'],
  aws_cognito_social_providers: [],
  aws_cognito_signup_attributes: ['EMAIL'],
  aws_cognito_mfa_configuration: 'OFF',
  aws_cognito_mfa_types: ['SMS'],
  aws_cognito_password_protection_settings: {
    passwordPolicyMinLength: 8,
    passwordPolicyCharacters: ['REQUIRES_LOWERCASE', 'REQUIRES_UPPERCASE', 'REQUIRES_NUMBERS'],
  },
  aws_cognito_verification_mechanisms: ['EMAIL'],
};

export default awsmobile;

3. Initialize Amplify in Your App

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

Core Implementation

AuthedApp Component