Skip to content

Frontend Implementation

Frontend Implementation

The Auth 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 authentication scenarios:

  • SignInForm: A form component for user login
  • SignInWithOTPForm: A form component for user login with OTP
  • SignUpForm: A form component for user registration
  • ForgotPasswordForm: A form for initiating password reset
  • ResetPasswordForm: A form for completing password reset
  • EmailVerificationForm: A component for email verification process

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

import SignInForm from "@app-launch-kit/modules/auth/components/SignInForm";


const SignIn = () => {
  return <SignInForm />;
};

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.