Profile Page
The profile page allows authenticated users to view and update their profile information. It is located at iot-frontend/src/pages/profile/index.tsx
.
Authentication
The profile page requires authentication. It uses the useAuth
hook to check the authentication status and retrieve the user session.
const { isAuthenticated, session, isLoading } = useAuth();
If isLoading
is true
, a loading indicator is displayed. If isAuthenticated
is true
, the profile page content is rendered. If isAuthenticated
is false
, the user is redirected to the login screen.
State Management
The profile page uses the useState
hook to manage the state of the user's profile information.
const [givenName, setGivenName] = useState<string>('');
const [familyName, setFamilyName] = useState<string>('');
const [email, setEmail] = useState<string>('');
It also manages the loading state of the form submission.
const [isSubmitLoading, setIsSubmitLoading] = useState(false);
Updating User Attributes
The handleUpdateAttribute
function is responsible for updating the user's attributes in AWS Cognito.
const handleUpdateAttribute = async (
attributeName: string,
attributeValue: string
) => {
// ...
const client = new CognitoIdentityProviderClient({
region: process.env.NEXT_PUBLIC_AWS_REGION,
credentials: {
accessKeyId: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID!,
secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY!,
},
});
const accessToken = (session as CustomSession).accessToken;
const command = new UpdateUserAttributesCommand({
UserAttributes: [
{
Name: attributeName,
Value: attributeValue,
},
],
AccessToken: accessToken,
});
await client.send(command);
// ...
};
It uses the AWS SDK to create a CognitoIdentityProviderClient
and sends an UpdateUserAttributesCommand
with the updated attribute values.
Form Submission
The handleSubmit
function is called when the user submits the profile update form.
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitLoading(true);
try {
await handleUpdateAttribute('given_name', givenName);
await handleUpdateAttribute('family_name', familyName);
await handleUpdateAttribute('email', email);
showToast({
message: 'Attributes were successfully updated.',
type: 'success',
});
setIsSubmitLoading(false);
} catch (error: any) {
showToast({
message: 'Error updating user attributes: ' + error.message,
type: 'error',
});
} finally {
setIsSubmitLoading(false);
}
};
It calls the handleUpdateAttribute
function for each attribute and shows a success or error toast message based on the result. It also manages the loading state of the form submission.
Rendering
The profile page conditionally renders the content based on the authentication status and loading state.
if (isLoading) {
return <LoadingIndicator />;
}
if (isAuthenticated) {
return (
<>
<Header />
{/* Profile form */}
<Footer />
</>
);
} else {
return <LoginScreen />;
}
If isLoading
is true
, a loading indicator is displayed. If isAuthenticated
is true
, the profile form is rendered along with the header and footer components. If isAuthenticated
is false
, the user is redirected to the login screen.
Conclusion
The profile page allows authenticated users to view and update their profile information using AWS Cognito. It provides a user-friendly form to edit the user's given name, family name, and email address. The page handles form submission, updates the user attributes in Cognito, and displays success or error messages accordingly.