Connecting AWS Amplify's Cognito Authentication with Redux
Written on
Chapter 1: Prerequisites and Setup
Before diving into the tutorial, it's essential to have a solid understanding of React, AWS Amplify, and Redux Toolkit. This guide is tailored for developers who are already familiar with these technologies. Here’s what you need to begin:
- A functional React application.
- AWS Amplify properly integrated with your app.
- Authentication configurations already in place.
- Redux Toolkit enabled.
If you're not yet at this stage, refer to the official documentation to get up to speed.
Getting Started with React and Authentication
To kick things off, ensure you have a store.js file in your project’s main directory. This file will contain your Redux store configuration. We'll be integrating Amplify Hub, an event system that allows us to listen for authentication events.
If you add the following code snippet to your project and check your console logs, you should see an object with a property called channel, which typically has the values auth or core. Amplify's Hub includes various protected channels such as core, auth, api, analytics, interactions, pubsub, storage, and datastore.
import { configureStore } from '@reduxjs/toolkit';
import { Hub } from 'aws-amplify';
const rootReducer = combineReducers();
const store = configureStore({
reducer: rootReducer,
});
Hub.listen(/.*/, (data) => {
console.log('Listening for all messages: ', data);
});
export default store;
The above snippet sets up a listener for all Hub events. However, for our focus on authentication, we will modify it to specifically listen for the auth channel. Each channel has its own events, which can be accessed via data.payload.event.
Hub.listen('auth', (data) => {
console.log('Listening for all Auth events: ', data);
const event = data?.payload?.event;
switch (event) {
case 'signIn':
return;case 'signOut':
return;default:
return;}
});
Sign In Event Handling
In this section, we'll handle the sign-in events. The payload contains vital user session information, which we can capture and manage in our Redux store.
function handleSignIn({ data, storeState }) {
const user = data?.signInUserSession?.idToken?.payload;
storeState.dispatch(setAuthenticationUser(user)); // Action to be defined later
}
Now, we will set up the listener to respond specifically to sign-in events:
Hub.listen('auth', (data) => {
const event = data?.payload?.event;
const storeState = store.getState();
switch (event) {
case 'signIn':
return handleSignIn({
data: data?.payload?.data,
storeState,
});
case 'signOut':
return;default:
return;}
});
Setting Up the Redux Slice for Authentication
Next, we will create a Redux slice for authentication using Redux Toolkit's createSlice. This allows us to efficiently manage user authentication state.
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Hub } from 'aws-amplify';
import { combineReducers } from 'redux';
const authenticationSlice = createSlice({
name: 'authentication',
initialState: {
user: {},},
reducers: {
setAuthenticationUser(state, action) {
state.user = action.payload.user;},
},
});
const { setAuthenticationUser } = authenticationSlice.actions;
const rootReducer = combineReducers({
authentication: authenticationSlice.reducer,
});
const store = configureStore({
reducer: rootReducer,
});
Handling Sign Out Events
The sign-out process is straightforward. All we need to do is reset the user state within the Redux store.
function handleSignOut({ storeState }) {
storeState.dispatch(setAuthenticationUser({ user: {} }));
}
Wrapping Up
This tutorial illustrates how to integrate AWS Amplify's Cognito authentication with a Redux store effectively. By leveraging Amplify Hub and Redux Toolkit, we can seamlessly manage authentication events and enhance our application's performance.
In this video, you will learn how to build an authentication and login system in a React app using AWS Amplify step by step.
This video demonstrates how to add Amazon Cognito to an existing NodeJS-Express and React application.