How to allow a user to choose a Group Pool on sign-up in VueJS with AWS Amplify?

Question

I am building a VueJS app with AWS Amplify for authentication, and I want to allow users to choose between two group pools (Teachers and Students) when they're signing up. I have already added authentication using amplify add auth and created the necessary groups in the Cognito user pool.

Here is the current code I have in my SignIn.vue view:

<template>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

<script setup>
import { Authenticator } from '@aws-amplify/ui-vue';
import '@aws-amplify/ui-vue/styles.css';
</script>

How can I modify this code to allow the user to select a group pool during sign-up?

I would like to use the Amplify UI components for authentication if possible.

Answer 1

You can do it with custom attributes, where they're all in one "group" in cognito, but have a custom attribute custom:group, that will allow you to mediate the group the user is in.

Auth.signUp({
    username,
    password,
    attributes: {
        email,
        'custom:group': 'Teacher'  // custom attribute, not standard
    }
});

You can then use a Lambda Post Confirmation trigger to send the user's information to the correct DynamoDB table to manage their profile:

  let params = {
    Item: {...},
    TableName:
      event.request.userAttributes["custom:group"] === "Teacher"
        ? process.env...[TABLE_TEACHER]
        : process.env...[TABLE_STUDENTS],
  };