I've created a complete authentication system with login and signup functionality that includes social login options for Google, GitHub, and LinkedIn. The system includes:
A login page with:
- Email/password login form
- Social login buttons (Google, GitHub, LinkedIn)
- "Forgot password" link
- Link to sign up for new users
A signup page with:
- Registration form (name, email, password)
- Same social login options
- Link back to the login page
- A dashboard page that displays user information after successful login
- Server-side authentication logic using Next.js Server Actions and API routes
The authentication flow works as follows:
- Users can sign in with email/password or choose a social login option
- For email/password login, credentials are validated server-side
- For social logins, the user is redirected to the provider's authentication page
- After successful authentication, users are redirected to the dashboard
This implementation uses cookies for session management and includes proper error handling. In a production environment, you would want to:
- Use a proper authentication library like NextAuth.js or Clerk
- Store user data in a database rather than in-memory
- Implement proper password hashing
- Set up proper OAuth flows for the social login providers
You can deploy this to Vercel and it will work out of the box for demonstration purposes. For a production application, you would need to set up the proper OAuth credentials with each provider.