AWSAmplify - A simple Multi Tenant Approach using Post Confirmation Lambda Trigger

Andrew Shanks — Sat, 24 Oct 2020 08:04:48 +0000

Your application may have the need for separate groups of users to access their own space. One way of managing this is by using Cognito groups to achieve this.

@AWSAmplify gives you the ability to create a post confirmation lambda trigger out of the box where you can choose the name of a group to add users to.

However this will add all users who signup to the same group which would not give the access control required to have a group per tenant.

Example 1

Assuming you have already created the post confirmation lambda from the amplify console already, let's modify the generated lambda function to create a random group name of our choosing when a user signs up.

Go to the source for the lambda trigger located at: amplify/backend/function/<GENERATEDID>PostConfirmation/src/index.js

Modify it as follows:

/* eslint-disable-line */ const aws = require('aws-sdk');
import { v4 as uuidv4 } from 'uuid';

exports.handler = async (event, context, callback) => {
  const cognitoidentityserviceprovider = new aws.CognitoIdentityServiceProvider({ apiVersion: '2016-04-18' });

  const groupPrefix = '<SOME_PREFIX>'
  const uuid = uuidv4()

  const groupParams = {
    GroupName: groupPrefix + uuid,
    UserPoolId: event.userPoolId,
  };

  const addUserParams = {
    GroupName: groupPrefix + uuid,
    UserPoolId: event.userPoolId,
    Username: event.userName,
  };

  try {
    await cognitoidentityserviceprovider.getGroup(groupParams).promise();
  } catch (e) {
    await cognitoidentityserviceprovider.createGroup(groupParams).promise();
  }

  try {
    await cognitoidentityserviceprovider.adminAddUserToGroup(addUserParams).promise();
    callback(null, event);
  } catch (e) {
    callback(e);
  }
};

When finished push this update using amplify push

This will create a group name with a UUID added each time a user signs up if it doesn't already exist then add the user to it.

This can be used as a basis to have individuals be assigned to a group that is created. This can be extended as in the example below.

Example 2

The example below will create 2 UserGroups, Admin and Employee and assign the current user to the Admin group. We also need to resolve an issue with lambda execution time, which is limited to 5 seconds in Cognito.

As we call more services the lambda trigger takes longer to execute and may be called more than once due to this limitation.

There is also an open bug with the auto generated code that causes the modules to be loaded inside the execution of the lambda rather than at cold-start that uses up much of that time. See [https://github.com/aws-amplify/amplify-cli/issues/3212#issuecomment-654315960] for a solution.

/* eslint-disable-line */
const aws = require('aws-sdk');
const {v4: uuidv4} = require('uuid');

exports.handler = async (event, context, callback) => {
    const cognitoidentityserviceprovider = new aws.CognitoIdentityServiceProvider({apiVersion: '2016-04-18'});

    const groupPrefix = '<SOME_PREFIX>'
    const uuid = uuidv4()
    const owner = '_owner'
    const employee = '_employee'

    const ownerGroup = `${groupPrefix}${uuid}${owner}`
    const employeeGroup = `${groupPrefix}${uuid}${employee}`

    const groupParamsOwner = {
        GroupName: ownerGroup,
        UserPoolId: event.userPoolId,
    }

    const groupParamsEmployee = {
        GroupName: employeeGroup,
        UserPoolId: event.userPoolId,
    }

    const addUserParams = {
        GroupName: ownerGroup,
        UserPoolId: event.userPoolId,
        Username: event.userName,
    }

    const getUserParams = {
        UserPoolId: event.userPoolId,
        Username: event.userName,
    }


    console.log(`Attempting to list groups for ${event.userName}`);

    let userGroups = null

    try {
        userGroups = await cognitoidentityserviceprovider.adminListGroupsForUser(getUserParams).promise();
        console.log('userGroups: ', userGroups)
    } catch (e) {

        console.log("error retrieving user", e)
    }

    if (userGroups == null || userGroups.Groups.length === 0) {
        try {
            await cognitoidentityserviceprovider.getGroup(groupParamsOwner).promise();
        } catch (e) {
            await cognitoidentityserviceprovider.createGroup(groupParamsOwner).promise();
        }

        try {
            await cognitoidentityserviceprovider.getGroup(groupParamsEmployee).promise();
        } catch (e) {
            await cognitoidentityserviceprovider.createGroup(groupParamsEmployee).promise();
        }

        try {
            await cognitoidentityserviceprovider.adminAddUserToGroup(addUserParams).promise();
            callback(null, event);
        } catch (e) {
            callback(e);
        }
    }
};

For this approach you will need to give an additional cognito permissions to the lambda function: adminListGroupsForUser.

In amplify/backend/auth/<GENERATEDID>/<GENERATEDID>-cloudformation-template.yml. we add - cognito-idp:AdminListGroupsForUser to the <GENERATEDID>PostConfirmationAddToGroupCognito policy.

When finished push this update using amplify push

AWS Amplify - Mixed Public & Private Application Routing

Andrew Shanks — Fri, 07 Aug 2020 10:58:17 +0000

Hi. This is my first post! I wanted to begin with something simple yet informative that has helped me on my side projects with Amplify.

This post assumes basic knowledge of setting up an Amplify project and is based on a React UI implementation.

Creating authenticated react applications with @AWSAmplify is simple when you want to wrap the App using withAuthenticator(App).

This works well when you are creating a demo site but when you want to send this to production you usually would want a homepage and some public links to talk about your products etc. There are many results on google relating to this kind of question and many ways to go about it.

Mixing public and private routes is usually a bit more involved. You would start using AmplifyAuthenticator in a custom component and track the users logged in state rather than use withAuthenticator.

This GitHub example by Mat Warger is very informative, if your site needs it and worth learning how it works. https://github.com/mwarger/amplify-auth-examples

A Simple Solution

But wait! I want to use the free goodness of withAuthenticator, my site isn't that complicated. Here is where nested routing using react-router comes in.

Declare you main App component which contains the top level routing that contains a ProtectedApp component which could be for admin functions.

App.js

const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/" exact render={() => <Home/>}/>
                <Route path="/admin" render={() => <ProtectedApp />}/>
            </Switch>
        </Router>
    );
}

export default App;

The ProtectedApp contains the routes for the admin function and this is wrapped in withAuthenticator(ProtectedApp)

ProtectedApp.js

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

const ProtectedApp = () => {

    return (
        <div>
            <Header />
            <Switch>
                <Route path="/admin" exact render={() => <AdminPanel />}/>
                <Route path="/admin/create" exact render={() => <CreateUser />}/>
            </Switch>
        </div>
    );
}

export default withAuthenticator(ProtectedApp);

Now you can have private application routes protected but still able to use withAuthenticator to handle the auth while having easily accessible public routes for advertising and as a home page.

Hopefully this will help others navigate auth with Amplify!

DEV Community: Andrew Shanks

AWSAmplify - A simple Multi Tenant Approach using Post Confirmation Lambda Trigger

Example 1

Example 2

AWS Amplify - Mixed Public & Private Application Routing

A Simple Solution