Skip to main content
Version: Next

Login Component

The Login component is a versatile authentication interface that provides users with options to sign in using Google or email. It's designed for use in Next.js applications and includes responsive styling with Tailwind CSS.

Importing the Component​

To use the Login component in your Next.js application, import it as follows:

import Login from "@/components/Login"

Basic Usage​

Here's a basic example of how to use the Login component:

<Login />

Functionality​

The Login component provides the following functionality:

  1. Google Sign-In
  2. Email Sign-In
  3. Navigation back to the home page
  4. Link to the sign-up page

State Management​

The component uses React's useState hook to manage the following state:

  • isSigningInWithGoogle: Boolean to track if Google sign-in is in progress
  • isSigningInWithEmail: Boolean to track if email sign-in is in progress
  • email: String to store the user's input email

Authentication Methods​

Google Sign-In​

The component uses NextAuth's signIn function to initiate Google authentication:

const onGoogleSignIn = () => {
  setSigningInWithGoogle(true);
  signIn("google", { callbackUrl: SiteConfig.signInCallbackUrl });
};

Email Sign-In​

Email authentication is also handled by NextAuth's signIn function:

const onEmailSignIn = async () => {
  setSigningInWithEmail(true);
  await signIn("email", { email, callbackUrl: SiteConfig.signInCallbackUrl });
  setSigningInWithEmail(false);
};

UI Components​

The Login component uses several UI components from your custom UI library:

  • Button: Used for the Google sign-in, email sign-in, and back navigation
  • Card: Wraps the entire login form
  • Input: Used for the email input field
  • BrandNameWithIcon: Displays your brand logo and name

Styling​

The component uses Tailwind CSS for styling. Key styling features include:

  • Responsive design that centers the login form vertically and horizontally
  • A gradient background effect
  • Custom styling for the Google sign-in button
  • A divider between the Google and email sign-in options

Props​

The Login component doesn't accept any props as it's a self-contained component with its own state management.

Dependencies​

This component relies on several external libraries and internal utilities:

  • next/navigation: For routing
  • next-auth/react: For authentication
  • isemail: For email validation
  • react-icons: For icons (Google and arrow icons)
  • Internal components: BrandNameWithIcon, Button, Card, Input
  • Internal utilities: cn for class name merging, Routes for route definitions, SiteConfig for configuration

Best Practices​

  1. Ensure that the SiteConfig.signInCallbackUrl is correctly set to handle post-authentication navigation.
  2. Implement proper error handling for failed sign-in attempts (not shown in the current implementation).
  3. Consider adding loading states or spinners during the authentication process for better user feedback.
  4. Ensure that the Google authentication is properly set up in your NextAuth configuration.

Accessibility​

The Login component includes several accessibility features:

  • Proper labeling for the email input field
  • Disabled states for buttons during sign-in processes
  • Use of semantic HTML elements like <label>

To further improve accessibility:

  1. Add appropriate aria-label attributes to icon-only buttons.
  2. Ensure color contrast ratios meet WCAG standards for both light and dark themes.
  3. Implement keyboard navigation support for all interactive elements.

Customization​

To customize the Login component:

  1. Modify the SiteConfig.signInCallbackUrl to change the post-login redirect.
  2. Adjust the Tailwind classes to match your design system.
  3. Replace the BrandNameWithIcon component with your own branding.
  4. Modify the authentication providers or add additional ones as needed.

Remember to update this documentation if you make significant changes to the component's functionality or API.

Example Usage​

Here's an example of how you might use the Login component in a Next.js page:

import Login from "@/components/Login"

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-gray-100">
      <Login />
    </div>
  )
}

This example demonstrates how to use the Login component within a page, providing a full-height background.

By using the Login component, you can provide a comprehensive and user-friendly authentication interface in your Next.js application. Remember to configure your authentication providers and callback URLs appropriately to ensure smooth functionality.