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.
CodePudding user response:
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.