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:
- Google Sign-In
- Email Sign-In
- Navigation back to the home page
- 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 progressisSigningInWithEmail
: Boolean to track if email sign-in is in progressemail
: 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 navigationCard
: Wraps the entire login formInput
: Used for the email input fieldBrandNameWithIcon
: 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 routingnext-auth/react
: For authenticationisemail
: For email validationreact-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
- Ensure that the
SiteConfig.signInCallbackUrl
is correctly set to handle post-authentication navigation. - Implement proper error handling for failed sign-in attempts (not shown in the current implementation).
- Consider adding loading states or spinners during the authentication process for better user feedback.
- 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:
- Add appropriate
aria-label
attributes to icon-only buttons. - Ensure color contrast ratios meet WCAG standards for both light and dark themes.
- Implement keyboard navigation support for all interactive elements.
Customization
To customize the Login component:
- Modify the
SiteConfig.signInCallbackUrl
to change the post-login redirect. - Adjust the Tailwind classes to match your design system.
- Replace the
BrandNameWithIcon
component with your own branding. - 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.