Building a modern login page inspired by your screenshot is a great way to streamline user onboarding. To achieve this in Laravel, we'll use Tailwind CSS for styling and Lucide Icons (an excellent open-source alternative) to match that clean, professional look.
This template uses the same layout structure as Replit: a centered card, large "Continue with" buttons, and a clean email input section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create an Account</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="bg-white flex items-center justify-center min-h-screen font-sans text-gray-900">
<div class="w-full max-w-md px-6">
<div class="mb-12 flex justify-start">
<div class="flex items-center gap-2 font-bold text-2xl">
<span class="text-orange-600 font-mono">[ ]</span> Replit
</div>
</div>
<h1 class="text-3xl font-semibold text-center mb-8">Create a Replit account</h1>
<div class="space-y-3">
<a href="{{ route('social.redirect', 'google') }}"
class="flex items-center justify-center w-full py-3 px-4 bg-gray-100 hover:bg-gray-200 transition rounded-lg text-sm font-medium">
<i data-lucide="chrome" class="w-5 h-5 mr-3 text-red-500"></i>
Continue with Google
</a>
<a href="{{ route('social.redirect', 'github') }}"
class="flex items-center justify-center w-full py-3 px-4 bg-gray-100 hover:bg-gray-200 transition rounded-lg text-sm font-medium">
<i data-lucide="github" class="w-5 h-5 mr-3"></i>
Continue with GitHub
</a>
<div class="pt-4 border-t border-gray-200">
<form action="{{ route('login') }}" method="POST" class="space-y-3">
@csrf
<div class="relative">
<i data-lucide="mail" class="absolute left-3 top-3 w-5 h-5 text-gray-400"></i>
<input type="email" name="email" placeholder="Email address"
class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition">
</div>
<button type="submit" class="w-full py-3 px-4 bg-gray-900 text-white hover:bg-black transition rounded-lg text-sm font-medium">
Continue with Email
</button>
</form>
</div>
</div>
<p class="mt-8 text-center text-xs text-gray-500">
By continuing, you agree to the Terms of Service and Privacy Policy.
</p>
</div>
<script>
// Initialize Lucide icons
lucide.createIcons();
</script>
</body>
</html>To make these buttons work, you need to register your application with both Google and GitHub.
- Go to the Google Cloud Console.
- Create a New Project.
- Go to APIs & Services > Credentials.
- Click Create Credentials > OAuth client ID.
- Set the Authorized redirect URIs to:
http://your-domain.com/auth/google/callback
- Needed:
GOOGLE_CLIENT_IDandGOOGLE_CLIENT_SECRET.
- Go to your GitHub Settings > Developer Settings > OAuth Apps.
- Click New OAuth App.
- Set the Authorization callback URL to:
http://your-domain.com/auth/github/callback
- Needed:
GITHUB_CLIENT_IDandGITHUB_CLIENT_SECRET.
Once you have your keys, add them to your .env file:
# .env file
GOOGLE_CLIENT_ID=your_id_here
GOOGLE_CLIENT_SECRET=your_secret_here
GOOGLE_REDIRECT_URL=https://your-domain.com/auth/google/callback
GITHUB_CLIENT_ID=your_id_here
GITHUB_CLIENT_SECRET=your_secret_here
GITHUB_REDIRECT_URL=https://your-domain.com/auth/github/callbackThen, map these in config/services.php:
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_CLIENT_SECRET'),
'redirect' => env('GOOGLE_REDIRECT_URL'),
],
'github' => [
'client_id' => env('GITHUB_CLIENT_ID'),
'client_secret' => env('GITHUB_CLIENT_SECRET'),
'redirect' => env('GITHUB_REDIRECT_URL'),
],Since your screenshot shows a very modern "Magic Link" style or simplified email flow, consider using Laravel Breeze or Fortify for the backend logic. It handles the email-login portion (authentication, sessions, and security) out of the box so you can focus on the UI!
Do you need the specific Controller logic to handle the Socialite callback and user creation as well?