Existing React/Node project - adding AWS authentication

Question

Premise: I'm a newbie, so I'm aware that some of my questions or issues might sound obvious to the more experienced.

My situation is: I have an existing React frontend and Node backend. I need to add authentication to my app, so that I can provide login (and future registration) for my colleagues. We use AWS resources and there is an existing user pool in Cognito.

How do I go about doing this?

I've done some research and everything points me to AWS Amplify, but I've found the existing resources very confusing. Amplify seems to create a new, separate backend when I run amplify init, but I need to stick with the existing one.

Basically, all I need is the authentication piece, I don't want to use anything else from Amplify itself.

Apologies in advance if I might have missed something obvious. Thanks.

Answer 1

I have solved this exact situation with the Amplify library.

You can utilize the Authenticator component from @aws-amplify/ui-react where the docs are here.

In the most simple form, it would look like this:

import { Authenticator } from "@aws-amplify/ui-react";
import Amplify from "aws-amplify";

Amplify.configure(awsExports);

const App = () => {
  return (
    <Authenticator>
      {/* Pass app entry as children */}
      {({ signOut, user }) => <Home signOut={signOut} user={user} />}
    </Authenticator>
  );
};

//Object holding AWS auth config
//This is a seperate file which is imported
export const awsExports = {
  Auth: {
    mandatorySignIn: true,
    region: "YOUR REGION",
    userPoolId: "COGNITO_POOL_ID",
    userPoolWebClientId: "COGNITO_CLIENT_ID",
  },
};

So in my app, I only use this Authenticator component which does all of the interactions with the cognito pool and nothing else from Amplify. There's a number of different props you can pass into the Authenticator component so certainly review the docs.