Setting Up Notifications With AWS Amplify Gen 1

Vladislav Bataev
No items found.

In short

The article is a comprehensive guide to implementing AWS Amplify Gen 1 push notifications in React Native Android apps. It covers setting up AWS IAM, creating an Amplify project, adding authentication, and integrating Firebase Cloud Messaging (FCM) with step-by-step instructions and code examples.

Introduction

Exploring live messaging and push notifications led me to AWS Amplify—a robust service with all-in-one features that's been on my radar. However, I found the setup process frustrating—clear, step-by-step guides are scarce, and the documentation can be overwhelming.

To help others navigate this, I’ve put together a guide for integrating Amplify with React Native, focusing on Android. If this resonates, I may follow up with an iOS guide.

Setup Process

Here are the steps to take:

  1. Set up IAM user for local development and initialize Amplify on the local machine
  2. Create a project with Amplify
  3. Add authentication via AWS
  4. Add notifications

Set up IAM user for local development

First, we will need to create an AWS profile; after that, we will start our deployment. You can register at the AWS console.

After verifying your account, you will be in the AWS console. Once you are, go ahead and install Amplify locally:

npm install -g @aws-amplify/cli

Resolve EACCES permissions when installing packages globally with npm if needed.

Next, we need to configure our user using the following command: amplify configure.

You should be redirected to your account and the IAM account section. If not, follow this link.

Here are fully described steps on how to set up a profile for local development.

Step 1

First, you will be prompted to choose a name; choose the one that is easiest for you to remember.

Creating IAM user

Step 2

Decide which accesses to give to this user. Note that we only need one AdministratorAccess-Amplify permission.

Admin access selection

Step 3

After that, we can see the details of the user we are creating. It will look like this:

Account creation review

Step 4

Now we are in the console of our users, where we will need to select the user we just created. If this is your first user, it may redirect you to the details right away. Below is an example of what a list of users looks like.

IAM Users list

Step 5

Next we need to go into the user details, and get the secret keys that we will later add to our user that we configure locally on the machine. So just click: create access key.

Step 6

In the next step, we need to select Command Line Interface CLI to access our locally installed Amplify.

Step 7

Tags are optional, but I always add them for clearer handling in the future (to understand what this key is for, etc.). So now press “Create access key,” and we’re done!

Adding tags

Step 8

Finally, you will see the access key and secret access key. We will add them through the console soon.

Retrieving secret keys

Enter the values you just copied into the corresponding CLI prompts, and that's it!

Just to double check open ~/.aws/config to see if you have there added user. You will see something like this:

If you see this and file is available, we can proceed to creating a project!

Create a project with Amplify

Create a project using CLI:

Now we need to install amplify in our project correctly, so first, we need to run the command: amplify init

Remember to choose Amplify Gen 1; of the 2nd Gen, we don't have Notifications, yet 🙂

You will have something like this. Be advised to set up properly a directory path to “ / ”

After this, you'll notice an amplify folder has been added to your project. This folder stores the backend configuration of your project, and as you add features like authentication or notifications, new files will be created within it.

You also will see a new file in the root directory calling amplifyconfiguration.json

With this helper, json react-native app will understand that we use amplify packages.

It will look like this:

creating a file calling amplifyconfiguration.json

Add libraries that we need to init Amplify on react-native part of the app:

After all these settings, we need to add Amplify to the application and make sure that everything works well. For this purpose, we need to initialize Amplify in the index file (the earlier, the better).

Now that we are done, let's move on and enable authentication! (You can check the app before adding auth, though.)

Add authentication via Amplify

Authentication is critical for notifications in Amazon Amplify to ensure they are delivered securely to targeted, authorized users. Authentication also provides seamless integration with AWS services, making notification processing secure and efficient.

To add authentication to your app, run this command: amplify add auth

Specify ‘sign in’ using Username, and without any additional configuration.

After this, Amplify will update the backend on the servers. However, if it doesn’t happen, you can double-check by using the amplify pushcommand.

Adding login form from Amplify

The @aws-amplify/ui-react-native package includes React Native-specific UI components you'll use to build your app. Install it with the following command:

Then we will add auth to our Main.tsx folder, the full file will look like this:

After installing, rebuild the app: npm run android

In this example you can see that we are using HOC withAuthenticator to wrap our app. Next, we will need to restart the app and see if we have a login form in the app. If we do, we will just need to create an account and then we will be inside our app!

screenshots with a login form

Notifications using Amplify

Adding Google Services

First, we need to add Google services because we'll still access our notifications via Firebase token. We need to add the following to the build.gradle:

And in app/build.gradle, at the top, we add:

Also we need to add google-services.json in the android/app folder like so:

folder showing google-services.json

Now, let's try to build an app and check how it works!

Adding notifications on the Amplify

amplify add notifications

We need to choose FCM  | » Firebase Push Notifications

  • After you need to name your pinpoint resource name, basically we could name it push.
  • Prompt will ask you about sending analytics, etc; just press Y for easier setup.
  • After pushing notifications to the Amplify servers part, we will need to provide a service account key (json file) path.

You can get it from a Firebase account; we will not cover the setup of Firebase here, but here are small steps to follow if you already created an account in the Firebase console:

  1. Open Project settings
  2. Click on Service accounts
  3. Generate new private key
  4. Json file was generated

Pass this file to the iTerm or terminal, and you will see an absolute file path like:

users/Desktop/secret_key12345.json

Copy this path and paste it to the Amplify initialization of Notification. You will see something like this:

Initializing notifications

Next, we need to install the missing packages in our application and initialize the notification service. Packages' installations:

Reinstall app and start it, but add the following to the index.js:

It will result in something like this:

Request permissions

Yeah, you will also need to handle permissions 😭

First of all, let’s add this to manifest:

Simplified flow of retrieving permissions will be something like this:

After that, we will need to get our FCM token to test push notifications:

Receiving notifications

Well, we are almost at the final; now, I will show you how to create a hook to work with push notifications. You will need to fix it for your needs if necessary.

Test push notifications

Get FCA token

And now we will test it how it works! First of all you need to get a token from a console.

It will be something like this string:

foN_4dzDRUu0VFGG3tM:APA91bFArqe12345zVTA8ePeZq1YBxyJMnlPD4mO34kDtDy93OkEMJ-HJWgnGRwtERDejYQW-WDtuFs6GxVmDEG_DXbaIftwNp-C12345b_-mAo122PY

Put token

Now we need to put this token in the pinpoint console. It looks like this:

Pinpointing console

Then you need to find "Test messaging" and choose "Push notifications." We will test our "Notifications" using "Device tokens" in "Destinations." There you need to specify token and choose the service FCM.

The next step is to specify our Message content:

Specifying message content

Then we press "Send Message," and voilà! We made it!

AWS notifications set

Final Notes

Implementing push notifications with AWS Amplify can be a challenging journey, and it’s not always easy to grasp everything on the first try. That’s why I created this article—to help anyone getting started with this type of notification. You can check out the fully working project I created to further guide you through this process.

Latest update:
November 4, 2024

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.