3rd party authentication is not something new, it's been there for a while now and its popularity is only increasing. It takes out the hassle of managing security risks (to some extent) and allows you to reduce the time to roll out your applications.
To implement auth in React using cognito we need to do two things:
- Setup AWS side of things (user pools, clients, etc.)
- Hook our AWS Cognito user pool and client with the react app
1. Create AWS Cognito User Pool
The user pool is like a user directory where all your users (and their attributes like name, email, password, etc.) are stored.
To create a new user pool, login to the AWS console and go to the AWS Cognito homepage. From there, select "Manage User Pools". Select "Create a User Pool" and give some name to the user pool. Click "Review Defaults" (or "Step through Settings" if you want to configure each step) and then click "Create Pool".
2. Create AWS Cognito User Pool's Client
Once done, it will show a success notification. From the left side, select "App clients".
Click "Add an app client", give it any name and make sure you uncheck the box next to "Generate client secret". Leave the rest of the options to their defaults unless you want to change something. Click "Create app client".
Once the client has been created, copy "App client id" (we will need it later on).
3. Add Custom Attribute(s)
AWS Cognito provides you an array of attributes that you can store against a user. The default available attributes (they are based on OpenID Connect Specifications) are:
- name
- given name
- middle name
- family name
- nickname
- preferred username
- phone number
- birthdate
- picture
- gender
- address
- profile
- zoneinfo
- locale
- updated at
- website
ℹ️ The default attributes can be made required/not-required only at the time of the user pool's creation.
But if you need to add any custom attribute you can do that easily. From the left sidebar, select "Attributes". Then click on "Add custom attribute".
Select the type of the attribute (String or number) you want to add, give it any name (without spaces), define min and max length (number of characters), and check the "Mutable" box. Once done, click "Save changes".
Now the last step is to make new attribute(s) both readable and writable. Go back to "App clients" from the left, click "Show Details", Click "Set attribute read and write permissions" (it will be at the bottom). Check the boxes against the custom attribute(s) and click "Save app client changes"
4. Hook React App with AWS Cognito
Clone this repo, install dependencies, replace the aws conf (src/configs/aws.ts) and start the app.
5. See it in Action
Create a new account
Verify User (by default the code is sent to email)
Login
Dashboard (can only access if logged in)
Newly added user 🤩
That's pretty much it. Instead of writing code for each component here, I thought it would be better to just link the repo. The code is pretty self-explanatory, but if you need any help please feel free to leave your queries in the comments.
Complete API reference: Read the official documentation
Top comments (1)
Very detailed article ! Kudos !
@mubbashir10 I did have a quick question if you don't mind me helping !
If I set up an alias attribute in the cognito user pool, where the user can login either via an username or an email address , the sign up fails with the below error when we use an email address in the username field of the sign up form -
InvalidParameterException: Username cannot be of email format, since user pool is configured for email alias.Any ideas on how to get around this issue?