We have a React app where Cognito is the identity provider. How do we build the authentication service?
The solution is pretty simple here. Create a user pool without adding a federated identity provider while adding the necessary configurations according to your requirements. Make sure to attach an app client during the process. As the Cognito itself is the identity provider here, we can add users directly in the user pool.
For the implementation, we need to install an SDK called @aws-sdk/client-cognito-identity-provider
.
Create a login (and sign-up if you allow self-registration) page and use the following function for login
export const signIn = async (username: string, password: string) => {
const params = {
AuthFlow: "USER_PASSWORD_AUTH",
ClientId: config.clientId,
AuthParameters: {
USERNAME: username,
PASSWORD: password,
},
};
try {
const command = new InitiateAuthCommand(params);
const { AuthenticationResult } = await cognitoClient.send(command);
if (AuthenticationResult) {
sessionStorage.setItem("idToken", AuthenticationResult.IdToken || '');
sessionStorage.setItem("accessToken", AuthenticationResult.AccessToken || '');
sessionStorage.setItem("refreshToken", AuthenticationResult.RefreshToken || '');
return AuthenticationResult;
}
} catch (error) {
console.error("Error signing in: ", error);
throw error;
}
};
If you enable self-registration, this can be used for sign-up:
export const signUp = async (email: string, password: string) => {
const params = {
ClientId: config.clientId,
Username: email,
Password: password,
UserAttributes: [
{
Name: "email",
Value: email,
},
],
};
try {
const command = new SignUpCommand(params);
const response = await cognitoClient.send(command);
console.log("Sign up success: ", response);
return response;
} catch (error) {
console.error("Error signing up: ", error);
throw error;
}
};
For details, look into this repository.