Amplify-JS: restrict access by Cognito groups when using BYO resources

To restrict access to your React app based on Cognito user groups using Amplify-JS with pre-existing resources, you have a few options:

1. Custom Sign-In Function: You can create a custom sign-in function that checks the user's group membership after authentication. This approach allows you to control access at the application level.

2. Lambda Authorizer: Creating a custom Lambda authorizer is a viable option. This authorizer can check the user's group membership and deny access if the user is not in the allowed groups. This approach provides control at the API Gateway level.

3. Post-Authentication Lambda Trigger: You can use a Cognito post-authentication Lambda trigger to check the user's group membership and deny access if necessary. This method controls access at the Cognito level.

4. Client-Side Group Check: After authentication, you can check the user's group membership on the client-side using Amplify's Auth.currentAuthenticatedUser() method. While this doesn't prevent sign-in, it can restrict access to certain parts of your application.

Given your current setup, a combination of approaches might be most effective:

1. Implement a custom sign-in function or wrap the existing sign-in process. After successful authentication, immediately check the user's group membership.

2. If the user is not in one of the two allowed groups, sign them out and display an error message.

3. For different access levels between the two allowed groups, use client-side checks to control access to specific features or components in your React app.

Here's a basic example of how you might implement this:

import { Auth } from 'aws-amplify';

async function customSignIn(username, password) {
try {
const user = await Auth.signIn(username, password);
const { signInUserSession } = user;
const groups = signInUserSession.accessToken.payload['cognito:groups'] || [];

if (!groups.includes('AllowedGroup1') && !groups.includes('AllowedGroup2')) {
await Auth.signOut();
throw new Error('You do not have permission to access this application.');
}

return user;
} catch (error) {
console.error('Error during sign in:', error);
throw error;
}
}

This approach allows you to maintain your existing configuration while adding the necessary group-based access control. Remember to implement similar checks for other authentication methods (like OAuth) if you're using them.

For the different access levels between the two allowed groups, you can create conditional rendering in your React components based on the user's group membership.
Sources
User group-based data access - React - AWS Amplify Gen 2 Documentation
Customize your auth rules - AWS Amplify Gen 2 Documentation
User groups - AWS Amplify Gen 2 Documentation
Create a React app by using AWS Amplify and add authentication with Amazon Cognito - AWS Prescriptive Guidance