Create account

DEV Community

Johannes Konings for AWS Community Builders

Posted on Dec 6, 2020 • Originally published at johanneskonings.dev on Dec 6, 2020

User management with the AWS Amplify Admin UI instead as self sign up

#aws #awsamplify

In my web app, I use the authentification UI Compontents of Amplify. Without any configuration, this UI component comes with a signup link so that any person who knows the URL can signup for themself. However, this web app is for a certain group of users. That's why I want to create users who are allowed to sign in.

And this is now possible in an easy way via the new Amplify Admin UI.

The Amplify Admin UI

The Amplify Admin UI has a big set of functions. You can check the docs for more details or test it in a sandbox.
This post also gives an excellent overview.

Hide the signup link

At first, I had to hide the signup link to avoid that everyone can signup.

To hide the signup link is just one line.

<AmplifyAuthenticator>
    <AmplifySignIn hideSignUp="true" slot="sign-in" />
</AmplifyAuthenticator>

More options are described in the docs

Then it looks like that.

Create a new user via Amplify Admin UI

If a new user is needed, you can create on via the Amplify Admin UI.
That you can use the Admin UI, it is just a click in the Amplify Console.

In the Admin UI, it's in the section user management. Click on "create user".

Type in the user data. The user will get an email with the username and temporary password.

User sign in process

Then the user can log in with his username and temporary password.

At the next screen, the user has to create a new password.

Two screens are left. One for the email verification...

...and the last one for the verification code.

The last step is not necessary if the admin marks the email as verified.

That's it 🎉

Invite User to the Admin UI

Now with the Admin UI, it is also possible to invite users as admins. Even without access to the AWS account.
See details here.

Code

JohannesKonings / fff-badminton

An AWS Amplify Webapp for tracking badminton games based on the Creative Tim Template Material Dashboard React

fff-badminton

Template

Material Dashboard React

Documentation

The documentation for the Material Dashboard React is hosted at our website.

Technical description of the webapp

https://dev.to/johanneskonings/aws-amplify-api-graphql-mutation-5ba4

development

https://aws.amazon.com/de/amplify/

data model

local dev

amplify mock

test

npx cypress open
npm run cypress:open

semantic release

GITHUB_TOKEN=<<GitHub token>> npx semantic-release --dry-run

View on GitHub