Onboarding and steam cleanup

[cheesea3]

Pull Request Summary: Improvements to Username Handling and Steam Authorization

Overview

This pull request introduces a series of enhancements to the Steam authentication process in our Remix React application for the Imperfect Gamers Store Page. These changes aim to streamline the user experience by ensuring a smooth transition through the authentication sequence and automating the progression to the post-authentication onboarding flow.

Users will benefit from a smoother and more reliable username management process, with clearer feedback and error messages. The Steam linking procedure is now more intuitive and less error-prone, providing clear feedback and guidance to the user. These changes enhance the overall authentication and onboarding process necessary to increase conversions from impressions on our storefront.

Key Changes

• The Steam authentication pop-up window now has better error handling and fallback options.
• Successful Steam account linking now triggers a seamless transition to the main application instead of showing the linking button again.
• Environmental variables are utilized to manage configuration details securely.
• The verification of the Steam OpenID response is now more robust, with direct communication to Steam's servers for authenticity checks.
• Enhanced the validation logic in UsernameForm.tsx to include checks against a list of patterns that are not allowed.
• Implemented dynamic feedback in the UI during the username selection process, allowing users to see in real-time whether a username is available.

Changes

• AuthorizeForm.tsx: Added an onSuccess callback prop to the AuthorizeForm component. This callback is invoked when the Steam account link is successfully established.
• steamAuth.ts: Refined the Steam login URL generation and Steam assertion verification methods to handle errors more gracefully and securely check the user's identity.
• steam.server.ts: Implemented a new directVerificationWithSteam function that takes a URLSearchParams object as an argument and returns a Promise that resolves to a boolean. This function is used to verify a user with Steam's OpenID.
• AuthForms.tsx: Adjusted the parent component to listen for the onSuccess event from AuthorizeForm and automatically transition the user to the main onboarding flow upon successful Steam account linking.
• UsernameForm.tsx: Implemented robust validation checks to ensure usernames adhere to specified criteria, including length requirements and character restrictions.
• authorize.steam.callback.tsx: Enhanced the Steam callback handler to manage and validate responses from Steam more robustly. This involves error handling to capture and log failures during the OpenID exchange, providing clear feedback on authentication failure.
• auth.check.username.tsx: Implemented real-time username availability checks to enhance user experience (TODO: add username caching to avoid unnecessary calls).
• auth.finalize.username.tsx: Developed a secure finalization process for username registration that commits the username to the database only after all validation checks pass. Proper consideration for server side (api) integrity checks to ensure that username changes are fully consistent and atomic, with rollback capabilities in case of any part of the process failing.
• general.ts: setup environment variable management with getEnvVar from general.ts to ensure sensitive details are handled securely.

Related çhanges:

• imperfect-gamers-api: Optimized interactions for username-related through validation on database operations, such as username changes and additions, ensuring efficient and secure data manipulation. Additionally improved error handling mechanisms to provide more informative messages and gracefully handle exceptional scenarios, enhancing the user experience.
• Imperfect Gamers Site Database: Strengthened security measures by implementing safeguards against potential vulnerabilities, such as SQL injection and username duplication by modifying schema, adding unique constraints.

Details

The following detailed updates were made:

AuthorizeForm Component Update

• Introduced state management hooks to track the state of the Steam pop-up window.
• Added a useEffect hook to monitor the pop-up window state and determine if it has been closed by the user.
• Incorporated an onSuccess prop to facilitate communication with the parent component upon successful authentication.
• Enhanced Security in Response Handling: Strengthened response handling by validating the origin of messages exchanged between windows, effectively mitigating cross-origin scripting attacks. This ensures a more secure setup for our application.

Steam Auth Utilities Refinement

• Implemented a function verifySteamAssertion to verify the Steam user's assertion and extract the user's identity from the returned query parameters with error handling to ensure robustness.
  • Added a direct call to the Steam OpenID provider for authentication verification, using fetch.

AuthForms Component Enhancement

• Updated the AuthForms component to handle the onSuccess event, triggering a state update that reflects the successful linking of a Steam account providing instant feedback and progression once the user's Steam account is successfully linked and onboarded.
• Modified the component to ensure the "Link Steam Account" button does not reappear after the Steam account is linked and the user is successfully onboarded. Instead, the user is presented with a generated (if non-existent) and seamlessly transitions to the main part of the store's 'join now' CTA (call-to-action) button, the checkout process integrated through Tebex Headless API and tebexjs.js (v1.0.0).

UI Enhancements

• Implemented frontend components and forms for user authentication and authorization.
• Improved modal components to standardize header and footer with proper fallbacks.

Authorize Steam Callback Route

• Modified the loader function in auth/steam/callback.tsx to handle the callback from Steam authentication, verifying the assertion and setting the steamId in the session.

Testing

• Manual testing was conducted to ensure that the pop-up window management behaves as expected across various scenarios.
• Plans for integration with enzyme and jest coming soon [https://github.com/imperfectandcompany/imperfect-gamers-site/tree/jest-enzyme-integration](see here).

Impact:

• User Experience: Users will benefit from a smoother and more reliable username management process, with clearer feedback and error messages.
• Code Maintainability: The codebase is now more maintainable and extensible, with well-structured validation and error handling mechanisms.
• • Clear separation of concerns and improved type safety contribute to a more maintainable and scalable codebase.
• Security: By addressing potential security risks, such as SQL injection, the application's overall security posture has been significantly improved.

Implementation Notes

• Environmental variables (e.g. HOSTED_ORIGIN) were used to handle sensitive configuration details.

TODO / IDEAS

• User Feedback: Improved the feedback mechanism to provide users with suggestions for available usernames when their desired username is taken.
• Accessibility Improvements: Updated the UI components related to username entry and Steam authentication to be fully accessible, including keyboard navigation and screen reader support.
• Secure Calls: Added sophisticated rate limiting to prevent abuse of the username check endpoint, enhancing system security and reducing the risk of denial-of-service attacks.

Checklist:

• [x] My code follows the project's style guidelines
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] I have conducted manual tests that prove my fix is effective or that my feature works
• [x] Tested Steam authentication flow locally to ensure proper functionality.
• [x] Conducted manual testing to validate session storage behavior through manual testing and integration with existing Tebex checkout.
• [x] I have merged the latest dev into my branch to prevent a merge conflict.
• [x] I have run eslint and prettier to ensure uniform formatting expected in the dev branch.