fix: 🐛 cognito auth implementation

[wysRocket]

User description

This pull request includes several updates to the crux-frontend project, focusing on environment configuration, UI enhancements, and code refactoring. The most important changes include adding environment variables for Cognito, updating the splash screen configuration, and refactoring the HomeScreen and AllSet components for improved functionality and readability.

Environment Configuration:

• Added Cognito environment variables to .env file (EXPO_PUBLIC_COGNITO_USER_POOL_ID and EXPO_PUBLIC_COGNITO_CLIENT_ID).

UI Enhancements:

• Updated app.json to use expo-splash-screen plugin with a new splash image and configuration.
• Refactored HomeScreen to use KeyboardAvoidingView and replaced the folder card rendering logic with a Card component. [1] [2] [3] [4]
• Updated AllSet component to use a new NomineeCard component with animations and wave backgrounds for nominee cards.

Code Refactoring:

• Consolidated imports and removed unnecessary React import from home.tsx and storage.tsx. [1] [2]
• Standardized the use of single quotes in storage.tsx and nominees.tsx for consistency. [1] [2]

These changes collectively enhance the user experience and maintainability of the codebase.

---

PR Type

enhancement, bug_fix

---

Description

• Enhanced authentication logic with new methods and user attributes.
• Refactored HomeScreen and AllSet components with new Card and NomineeCard components.
• Added BackgroundPattern and HorizontalAccordion components for improved UI.
• Updated Cognito configuration and added environment variables.
• Updated splash screen configuration and project dependencies.
• Improved code formatting and style consistency across components.

---

Changes walkthrough 📝

	Relevant files
Enhancement	10 files _layout.tsx Adjust tab bar width for better layout                                      crux-frontend/app/(authenticated)/(tabs)/_layout.tsx Adjusted tab bar width to 80% of screen width. +1/-1      home.tsx Refactor HomeScreen with new Card component                            crux-frontend/app/(authenticated)/(tabs)/home.tsx Added KeyboardAvoidingView for better keyboard handling. Replaced folder card rendering logic with Card component. Updated imports and component usage. +86/-78  allset.tsx Enhance AllSet component with animations and new design    crux-frontend/app/allset.tsx Introduced NomineeCard component with animations. Added wave backgrounds for nominee cards. Refactored component structure and animations. +202/-122 BackgroundPattern.tsx Add BackgroundPattern component for SVG backgrounds            crux-frontend/components/BackgroundPattern.tsx Added new BackgroundPattern component for SVG backgrounds. +24/-0    Card.tsx Add Card component for folder display                                        crux-frontend/components/Card.tsx Added new Card component for displaying folder information. +113/-0  Collapsible.tsx Update Collapsible component color scheme                                crux-frontend/components/Collapsible.tsx Updated color scheme usage for icons. +5/-3      HorizontalAccordion.tsx Add HorizontalAccordion component for accordion display    crux-frontend/components/HorizontalAccordion.tsx Added new HorizontalAccordion component for displaying accordion items. +127/-0  Input.tsx Update Input component type usage                                                crux-frontend/components/Input.tsx Updated import and type usage for InputModeOptions. +5/-5      Colors.ts Refactor color constants and add global styles                      crux-frontend/constants/Colors.ts Refactored color constants to a theme object. Added global styles for consistent styling. +54/-16  useAuth.ts Enhance authentication logic with new features                      crux-frontend/hooks/useAuth.ts Enhanced authentication logic with new methods. Added user attributes and session handling. +205/-64
Formatting	2 files storage.tsx Code formatting and style updates                                                crux-frontend/app/(authenticated)/storage.tsx Updated code formatting and style properties. +41/-42  nominees.tsx Code formatting and style updates                                                crux-frontend/app/nominees.tsx Updated code formatting and style properties. +54/-54
Configuration changes	4 files cognito-config.js Update Cognito configuration                                                          crux-frontend/cognito-config.js Updated Cognito user pool configuration. +4/-3      .env Add Cognito environment variables                                                crux-frontend/.env Added environment variables for Cognito configuration. +2/-0      app.json Update splash screen configuration                                              crux-frontend/app.json Updated splash screen configuration with new image and settings. +5/-7      tsconfig.json Update TypeScript configuration                                                    crux-frontend/tsconfig.json Added baseUrl to TypeScript configuration. +1/-0
Dependencies	1 files package.json Update project dependencies                                                            crux-frontend/package.json Updated dependencies and devDependencies. +35/-29

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
v0-thecrux	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 0:46am

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

(Review updated until commit 788cbeb)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 Security concerns Sensitive information exposure: The PR contains hardcoded Cognito User Pool ID and Client ID in both cognito-config.js and .env files. While moving to .env is a step in the right direction, these values are still committed to the repository. These credentials should be kept secure and not committed to version control. Additionally, the hardcoded 'Password' in useAuth.ts for new user signup is a significant security vulnerability.

⚡ Recommended focus areas for review Security Issue The signup method uses a hardcoded password 'Password' for all new users, which is a significant security risk. This should be changed to accept a user-provided password. Error Handling The error handling in authentication methods only sets generic error messages. Should provide more specific error messages to help users understand and resolve authentication issues. Potential Bug The Card component uses an undefined theme.colors object which could cause runtime errors if the theme is not properly initialized or imported. Security Concern Hardcoded Cognito credentials in the configuration file. These should be moved to environment variables to prevent exposure of sensitive information.

[qodo-code-review]

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

Persistent review updated to latest commit 788cbeb

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Latest suggestions up to 788cbeb
Explore these optional code suggestions:

Category	Suggestion	Score
Security	Remove hardcoded password from authentication methods to prevent security vulnerabilities The hardcoded password 'Password' in the signup and signin methods is a critical security vulnerability. Passwords should be provided by the user and never hardcoded. crux-frontend/hooks/useAuth.ts [81] -userPool.signUp(email, 'Password', attributeList, [], (err, result) => { +userPool.signUp(email, password, attributeList, [], (err, result) => { Apply this suggestion Suggestion importance[1-10]: 10 Why: Using a hardcoded password in authentication methods is a severe security vulnerability that could compromise user accounts. This is a critical security issue that needs immediate attention.	10
	Avoid hardcoding sensitive credentials directly in source code by using environment variables Use environment variables instead of hardcoding sensitive Cognito credentials. Access them using process.env or Expo's configuration system. crux-frontend/cognito-config.js [4-7] const poolData = { - UserPoolId: 'eu-west-2_6fPDsUm5T', - ClientId: 'samt4bt8omlj5o4jj8vm1o9ig', + UserPoolId: process.env.EXPO_PUBLIC_COGNITO_USER_POOL_ID, + ClientId: process.env.EXPO_PUBLIC_COGNITO_CLIENT_ID, }; Apply this suggestion Suggestion importance[1-10]: 9 Why: Critical security improvement to prevent exposure of sensitive AWS Cognito credentials in source code. The suggestion correctly leverages existing environment variables that are already defined in .env file.	9
Possible issue	Add error handling to the sign-out process to maintain application state consistency The signout method doesn't handle potential errors that could occur during the sign-out process, which could leave the application in an inconsistent state. crux-frontend/hooks/useAuth.ts [146-152] const signout = useCallback(async (): Promise<void> => { if (user) { - user.signOut(); - setUser(null); - setIsAuthenticated(false); + try { + await user.signOut(); + setUser(null); + setIsAuthenticated(false); + } catch (err) { + setError(err.message || 'Sign out failed'); + throw err; + } } }, [user]); Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding proper error handling to the signout process is important for maintaining application state consistency and preventing potential issues with user sessions.	7
	Handle potential image loading failures gracefully to prevent application crashes Add error handling for undefined avatar URLs to prevent app crashes when the image fails to load. crux-frontend/components/Card.tsx [30] -<Image source={{uri: avatarUrl}} style={styles.avatar} /> +<Image + source={avatarUrl ? {uri: avatarUrl} : require('../assets/default-avatar.png')} + style={styles.avatar} + onError={(e) => console.warn('Avatar loading error:', e.nativeEvent.error)} +/> Apply this suggestion Suggestion importance[1-10]: 7 Why: Important defensive programming practice to handle undefined avatarUrl and image loading failures, preventing potential app crashes in production.	7
	Enhance error handling to preserve specific error details from the authentication service The error handling in authentication methods only sets a generic error message. Proper error handling should preserve the specific error details from Cognito for debugging and user feedback. crux-frontend/hooks/useAuth.ts [131] -setError(err.message || 'Authentication failed'); +setError(err.message || err.toString() || 'Authentication failed'); Apply this suggestion Suggestion importance[1-10]: 6 Why: Better error handling improves debugging capabilities and user experience by providing more specific error messages, though not a critical security issue.	6
	Prevent application crashes from SVG rendering failures by implementing error handling Add error boundaries around SVG rendering to prevent potential crashes from invalid path data. crux-frontend/components/BackgroundPattern.tsx [14-22] -<Svg style={StyleSheet.absoluteFill} viewBox="0 0 169 150"> - <Path - d="M300.195 49.8956C300.195 49.8956 272.687 90.9668 246.011 92.8567C208.144 95.5396 191.19 56.6964 153.735 52.0255C114.434 47.1244 113.226 159.551 73.8415 155.221C35.1963 150.972 84.0944 1.29502 45.1842 5.34897C19.6784 8.00634 -6.72573 46.5074 -6.72573 46.5074" - stroke={color} - strokeWidth="24" - strokeLinecap="round" - opacity={opacity} - /> -</Svg> +try { + return ( + <Svg style={StyleSheet.absoluteFill} viewBox="0 0 169 150"> + <Path + d="M300.195 49.8956C300.195 49.8956 272.687 90.9668 246.011 92.8567C208.144 95.5396 191.19 56.6964 153.735 52.0255C114.434 47.1244 113.226 159.551 73.8415 155.221C35.1963 150.972 84.0944 1.29502 45.1842 5.34897C19.6784 8.00634 -6.72573 46.5074 -6.72573 46.5074" + stroke={color} + strokeWidth="24" + strokeLinecap="round" + opacity={opacity} + /> + </Svg> + ); +} catch (error) { + console.error('SVG rendering error:', error); + return null; +} Apply this suggestion Suggestion importance[1-10]: 5 Why: While SVG rendering errors are relatively rare, adding error boundaries provides an additional safety layer. The impact is moderate as SVG failures would only affect the background pattern.	5

💡 Need additional feedback ? start a PR chat

---

Previous suggestions

Suggestions up to commit 788cbeb

Category	Suggestion	Score
Security	Remove hardcoded authentication credentials to prevent security vulnerabilities The hardcoded password 'Password' in the signup and signin methods is a critical security vulnerability. This should be replaced with a proper password parameter passed from the calling code. crux-frontend/hooks/useAuth.ts [81] -userPool.signUp(email, 'Password', attributeList, [], (err, result) => { +userPool.signUp(email, password, attributeList, [], (err, result) => { Suggestion importance[1-10]: 10 Why: Using hardcoded passwords in authentication code is a critical security vulnerability that could be exploited. This needs immediate attention as it affects the core security of the application.	10
	Avoid hardcoding sensitive credentials in source code by using environment variables Use environment variables instead of hardcoding sensitive Cognito credentials directly in the source code. Access them using process.env or Expo's configuration system. crux-frontend/cognito-config.js [4-7] const poolData = { - UserPoolId: 'eu-west-2_6fPDsUm5T', - ClientId: 'samt4bt8omlj5o4jj8vm1o9ig', + UserPoolId: process.env.EXPO_PUBLIC_COGNITO_USER_POOL_ID, + ClientId: process.env.EXPO_PUBLIC_COGNITO_CLIENT_ID, }; Suggestion importance[1-10]: 9 Why: Critical security improvement to prevent exposure of sensitive AWS Cognito credentials in source code. The suggestion correctly leverages existing environment variables defined in .env file.	9
Possible issue	Add session validation to maintain proper authentication state The session management is incomplete - there's no check for existing sessions on component mount or handling of session expiration. This could lead to authentication state inconsistencies. crux-frontend/hooks/useAuth.ts [46-47] const useAuth = (): AuthContextType => { const [user, setUser] = useState<(CognitoUser & {...}) | null>(null); const [isAuthenticated, setIsAuthenticated] = useState(false); + + useEffect(() => { + const currentUser = userPool.getCurrentUser(); + if (currentUser) { + currentUser.getSession((err: Error | null, session: CognitoUserSession | null) => { + if (session?.isValid()) { + setIsAuthenticated(true); + setUser(currentUser as CognitoUser & CustomUserAttributes); + } + }); + } + }, []); Suggestion importance[1-10]: 9 Why: Lack of proper session management could lead to security issues and poor user experience. The suggestion adds crucial session validation logic that was missing.	9
	Enhance error handling to provide more specific feedback for authentication failures The error handling in the authentication methods only sets a generic error message. Implement proper error type checking and provide specific error messages for different failure scenarios. crux-frontend/hooks/useAuth.ts [131] -setError(err.message || 'Authentication failed'); +if (err.code === 'NotAuthorizedException') { + setError('Invalid credentials'); +} else if (err.code === 'UserNotConfirmedException') { + setError('Please verify your email first'); +} else { + setError(err.message || 'Authentication failed'); +} Suggestion importance[1-10]: 7 Why: Better error handling with specific error messages improves user experience and helps users understand and resolve authentication issues more effectively.	7
	Handle undefined image sources to prevent runtime errors Add error handling for undefined avatar URLs to prevent potential image loading failures. crux-frontend/components/Card.tsx [30] -<Image source={{uri: avatarUrl}} style={styles.avatar} /> +<Image source={avatarUrl ? {uri: avatarUrl} : require('@/assets/default-avatar.png')} style={styles.avatar} /> Suggestion importance[1-10]: 7 Why: Important defensive programming practice to handle potential undefined avatarUrl values, preventing runtime crashes when images fail to load.	7
	Add error handling for SVG rendering to prevent app crashes Add error boundaries around SVG rendering to handle potential SVG parsing errors and invalid path data. crux-frontend/components/BackgroundPattern.tsx [14-22] -<Svg style={StyleSheet.absoluteFill} viewBox="0 0 169 150"> - <Path - d="M300.195 49.8956C300.195 49.8956 272.687 90.9668 246.011 92.8567C208.144 95.5396 191.19 56.6964 153.735 52.0255C114.434 47.1244 113.226 159.551 73.8415 155.221C35.1963 150.972 84.0944 1.29502 45.1842 5.34897C19.6784 8.00634 -6.72573 46.5074 -6.72573 46.5074" - stroke={color} - strokeWidth="24" - strokeLinecap="round" - opacity={opacity} - /> -</Svg> +try { + return ( + <Svg style={StyleSheet.absoluteFill} viewBox="0 0 169 150"> + <Path + d="M300.195 49.8956C300.195 49.8956 272.687 90.9668 246.011 92.8567C208.144 95.5396 191.19 56.6964 153.735 52.0255C114.434 47.1244 113.226 159.551 73.8415 155.221C35.1963 150.972 84.0944 1.29502 45.1842 5.34897C19.6784 8.00634 -6.72573 46.5074 -6.72573 46.5074" + stroke={color} + strokeWidth="24" + strokeLinecap="round" + opacity={opacity} + /> + </Svg> + ); +} catch (error) { + console.error('SVG rendering error:', error); + return null; +} Suggestion importance[1-10]: 6 Why: Good defensive programming practice to handle potential SVG rendering errors, though SVG parsing errors are relatively rare in this simple use case.	6