Skip to content

Frontend Implementation

Frontend Implementation

The User Profile Module’s frontend implementation is designed to be comprehensive and self-contained, providing all necessary components, assets, hooks, and context providers within the module itself. This approach ensures modularity and ease of use across different parts of the application.

Components

The module includes a set of pre-built components for common user profile scenarios:

  • EditProfileForm: A form component for user profile
  • ProfileLandingPage: A page component for user profile
  • …

These components are designed to be easily customizable and can be styled to match your application’s design system.

import ProfileLandingPage from "@app-launch-kit/modules/user-profile";


const EditProfile = () => {
  return <ProfileLandingPage />;
};

Assets

The module contains its own set of assets, such as:

  • Icons for social login providers
  • Default avatar placeholders
  • Authentication-related illustrations

These assets are optimized for use in both web and mobile environments.

Routing

For navigation within the authentication flow components, we utilize the @unitools/router package. This ensures consistent navigation behavior across Next.js and Expo platforms. Components that require routing, such as redirecting after successful login or navigating to the password reset page, use this router for seamless integration.