Skip to main content

· 6 min read

Teaser image

Photo by Markus Spiske on Unsplash

Have you ever stumbled across a situation where you have your React Admin web application deployed on AWS Amplify and you are using custom APIs to authenticate your users with your AWS Cognito setup? Have you ever wondered if you really need those custom APIs or does AWS Amplify provide a neat way to directly talk to your AWS Cognito setup?

These are exactly the questions that got us thinking as well. After a bit of research, we were excited to realize that AWS Amplify did provide an out-of-the-box solution with AWS Amplify API and Amplify UI for React but that led to the next question: How do we integrate all of this into our React Admin based web application which already comes with its own authProvider component? A quick google search reveals that there is a ra-cognito npm package available but many of its dependencies are out of date (also reported in issue#10) and conflict with latest React Admin version. Therefore, in this blog we will present a way to directly incorporate AWS Amplify API into our React Admin application.

In order to grasp a complete understanding of our solution, it is highly recommended to familiarize yourself with

Step 1: Create a login component using Amplify UI for React

First we need to create a custom Login page based on Amplify UI that we can later hook up to the React Admin application. In order to do that, you just need to create a normal React functional component and use the Authenticator component provided by Amplify UI which automagically (and yes that is an actual word) adds a complete authentication work flow provided by Amplify e.g. user sign-in, sign-up and a feature to reset password etc. A sample of such a login page is given below

//Login.js

import React from 'react';
import { useRedirect } from 'react-admin';
import { Authenticator } from '@aws-amplify/ui-react';

const LoginPage = () => {
const redirect = useRedirect();

return (
<Authenticator>
{({ user }) => {
console.log(`User logged in: ${user.username}`);
return (<span>{redirect('/')}</span>);
}}
</Authenticator>
);
};

export default LoginPage;

The Authenticator component here offers various customizations e.g. you can provide your own custom Header or Footer to the login page by simply passing those components as props to the Authenticator. For further details, please read through the official Amplify UI documentation provided here.

Furthermore, within the Authenticator context you have access to the information of the signed in user e.g. their JWT, username etc. which you can choose to persist in a session storage or local storage and then have access to it throughout your React Admin application.

Step 2: Hookup the custom login component with React Admin

Now that we have our Login page ready, we need to hook that up with our React Admin such that the application renders our custom Login page instead of the default login page provided by React Admin. To do this, we have to open up /src/App.js in our React Admin application and search for the Admin component. This component is basically responsible for routing, state and controller logic of the whole application. However, for this blog we are only concerned with two of its props

  • loginPage
  • authProvider

We will now pass our custom built LoginPage.js (from Step 1) to the loginPage prop (see below).

// src/App.js

import LoginPage from '. /LoginPage'; // our custom login page built in Step 1
import authProvider from './data/authProvider'; // we will visit this in the next step


const App = () => (
<Admin

loginPage={LoginPage}
authProvider={authProvider}
>
{}
</Admin>
);

export default App;

Now whenever users opens up the Login page of our application they will see the page from the AWS Amplify UI.

But we still need to make our Login page functional so that it actually talks to our AWS Cognito setup via AWS Amplify and that is where our next step comes in.

Step 3: React Admin AuthProvider changes

By default, all React Admin applications come with no authentication implemented. But you can implement your own authentication strategy by extending the authProvider while keeping in mind the required interface.

// src/data/authProvider.js

const authProvider = {
// authentication
login: ({ username, password }) => { /* ... */ },
checkError: (error) => { /* ... */ },
checkAuth: () => { /* ... */ },
logout: () => { /* ... */ },
getIdentity: () => { /* ... */ },
getPermissions: (params) => { /* ... */ },
}

export default authProvider

Each attribute in the authProvider object above represents a method (details of each can be found here) that React Admin exposes to handle authentication work-flow in the application. For our current example, we only need to concern ourselves with the login and logout methods.

Login: since the login functionality is completely handled by the Authenticator component of AWS Amplify (Step 1) therefore, we can either remove this attribute completely from the authProvider object or just return null.

Logout: this is the method that is called when a user tries to logout from the React Admin application and in our case we want to logout via AWS Amplify. To do that, we can just directly call the signOut() provided by the Auth class of AWS-Amplify.

// src/data/authProvider.js
Import { Auth } from ‘@aws-amplify/auth’;

const authProvider = {
// authentication
login: () => { return null },
logout: () => { return Auth.signOut(); },
}

export default authProvider

And that is it. You now have a working integration of AWS-Amplify with your React Admin application that directly talks to your AWS Cognito setup for things like

  • User sign in
  • User sign out
  • New user account creation
  • Reset password

What lies ahead?

The topics covered above were just to give you a kick-start into how you can integrate some of the basic user authentication methods into your React Admin application. However, as soon as you feel confident enough, it is highly recommended to dive deeper into what AWS Amplify API and Amplify UI have to offer because that would give you plenty of options to tweak your user authentication and authorization experience.

Libraries used in this example

About the Author
Anam DodhyAnam Dodhy is a software engineer who has primarily been working on front-end technologies at Hoppe Marine for the last few years. She loves solving challenging problems and writing clean reusable code.

In her free time, she enjoys playing table tennis and is an avid follower of multiple TV series.

· 5 min read

Teaser image
Photo by Stephen Dawson on Unsplash

Imagine a world where you go to work, come to your office and see an electric bulb that either glows green or red to show the operational state of your fleet. Furthermore, the color and brightness scheme change dynamically, depending on the adjustments you made. No effort to spring into action and have a dedicated look into monitoring tools.

· 4 min read

Teaser image
Photo by Jaye Haych on Unsplash

General notes about application API keys

Application API keys provide our customers with access to their data in an unsupervised setting, and is specifically intended for use with machine to machine communication. It is recommended to use application API keys rather than user sessions for applications and scripts that require access to our APIs. This makes it possible to avoid sharing your credentials with applications, scripts or unsupervised machines.

· 5 min read

Teaser image
Photo by Tony Stoddard on Unsplash

In an increasingly connected world our customers need operational data about their vessels at their fingertips in order to make well-informed and clear decisions. This poses the immediate question of how to securely transmit data from the ship to the shore side. For most of the history in seafaring, vessels have been independent and totally isolated environments. This, however, is no longer the case. By connecting the vessel to the outside world, new risks and challenges have arisen. How do we do this while providing peace of mind? This is where our Ship-to-Shore solution comes into play. We provide simple and safe data transmission technology following highest security standards such as the European General Data Protection Regulation (GDPR).

· 8 min read

Teaser image
Photo by Med Badr Chemmaoui on Unsplash

You've just built an awesome API as a product and want your customers to easily understand and explore its features? This will certainly make you wonder how you could best provide documentation about this API to your customers.

On first publication of our ship-data and analytics APIs we hit this question as well. After a quick research about available solutions we opted - due to a lack of other options - for the official AWS API Gateway Developer Portal.

Fast-forward: Not only did we have a hard time customizing the portal but AWS informed us about a severe security issue inside the portal which would force us to migrate to a newer version. Migration, however, was such a nasty experience, that we took this as a reason to search for better and easier maintainable solutions.

This was the trigger for coming up with our current solution. A stupid simple and yet fully serverless portal to document your public facing APIs - and all of this beautifully. Check it out at https://docs.hoppe-sts.com.