desin login signup with firbase authentication system and google signup #1
11 changed files with 1349 additions and 116 deletions
62
app/(auth)/forgot-password/page.tsx
Normal file
62
app/(auth)/forgot-password/page.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
import { useState } from "react";
|
||||
import { sendPasswordResetEmail } from "firebase/auth";
|
||||
import { auth } from "@/lib/firebase";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleReset = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setMessage("");
|
||||
setError("");
|
||||
|
||||
try {
|
||||
await sendPasswordResetEmail(auth, email);
|
||||
setMessage("Password reset link sent to your email!");
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<form
|
||||
className="p-6 bg-white rounded shadow-md w-full max-w-md"
|
||||
onSubmit={handleReset}
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">
|
||||
Forgot Password
|
||||
</h2>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="border p-2 w-full mb-2 rounded"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="w-full bg-blue-600 text-white p-2 rounded mt-2"
|
||||
type="submit"
|
||||
>
|
||||
Send Reset Link
|
||||
</button>
|
||||
<Link
|
||||
className="py-1 mt-3 bg-amber-400 text-white flex justify-center items-center"
|
||||
href={"/login"}
|
||||
>
|
||||
back to login
|
||||
</Link>
|
||||
{message && <p className="text-green-600 mt-2">{message}</p>}
|
||||
{error && <p className="text-red-600 mt-2">{error}</p>}
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,80 @@
|
|||
import React from "react";
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
|
||||
import { auth, googleProvider } from "@/lib/firebase";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Navbar from "@/components/Navbar";
|
||||
|
||||
export default function Page() {
|
||||
return <div>page</div>;
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await signInWithEmailAndPassword(auth, email, password);
|
||||
router.push("/dashboard");
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleLogin = async () => {
|
||||
try {
|
||||
await signInWithPopup(auth, googleProvider);
|
||||
router.push("/dashboard");
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<form
|
||||
className="p-6 bg-white rounded shadow-md w-full max-w-md"
|
||||
onSubmit={handleLogin}
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">Login</h2>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="border p-2 w-full mb-2 rounded"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="border p-2 w-full mb-2 rounded"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="w-full bg-green-600 text-white p-2 rounded mt-2"
|
||||
type="submit"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<p className="mt-4 text-sm text-right">
|
||||
<a
|
||||
href="/forgot-password"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
Forgot Password?
|
||||
</a>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGoogleLogin}
|
||||
className="w-full bg-red-500 text-white p-2 rounded mt-2"
|
||||
>
|
||||
Login with Google
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,72 @@
|
|||
import React from "react";
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { createUserWithEmailAndPassword, signInWithPopup } from "firebase/auth";
|
||||
import { auth, googleProvider } from "@/lib/firebase";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Navbar from "@/components/Navbar";
|
||||
|
||||
export default function Page() {
|
||||
return <div>page</div>;
|
||||
export default function SignupPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleSignup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await createUserWithEmailAndPassword(auth, email, password);
|
||||
router.push("/dashboard");
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleLogin = async () => {
|
||||
try {
|
||||
await signInWithPopup(auth, googleProvider);
|
||||
router.push("/dashboard");
|
||||
} catch (error: any) {
|
||||
alert(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<form
|
||||
className="p-6 bg-white rounded shadow-md w-full max-w-md"
|
||||
onSubmit={handleSignup}
|
||||
>
|
||||
<h2 className="text-2xl font-bold mb-4 text-center">Signup</h2>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
className="border p-2 w-full mb-2 rounded"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
className="border p-2 w-full mb-2 rounded"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="w-full bg-blue-600 text-white p-2 rounded mt-2"
|
||||
type="submit"
|
||||
>
|
||||
Signup
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGoogleLogin}
|
||||
className="w-full bg-red-500 text-white p-2 rounded mt-2"
|
||||
>
|
||||
Signup with Google
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,39 @@
|
|||
import React from "react";
|
||||
"use client";
|
||||
import { useAuthStore } from "@/store/authStore";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Navbar from "@/components/Navbar";
|
||||
|
||||
export default function Page() {
|
||||
return <div>Dashboard</div>;
|
||||
export default function DashboardPage() {
|
||||
const { user, token, logout, loading } = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
if (loading) return <p className="text-center mt-10">Loading...</p>;
|
||||
if (!user) {
|
||||
router.push("/login");
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<h1 className="text-3xl font-bold">Welcome, {user.email}</h1>
|
||||
|
||||
{token ? (
|
||||
<div className="mt-4 p-4 bg-gray-100 rounded w-[600px] break-words">
|
||||
<p className="text-sm font-mono">{token}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-4 text-gray-500">Fetching token...</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={logout}
|
||||
className="mt-4 bg-red-500 text-white p-2 rounded"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
19
app/middleware.ts
Normal file
19
app/middleware.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { NextResponse } from "next/server";
|
||||
import type { NextRequest } from "next/server";
|
||||
|
||||
export function middleware(req: NextRequest) {
|
||||
const protectedPaths = ["/dashboard"];
|
||||
const token = req.cookies.get("firebaseToken");
|
||||
|
||||
if (protectedPaths.some((path) => req.nextUrl.pathname.startsWith(path))) {
|
||||
if (!token) {
|
||||
return NextResponse.redirect(new URL("/login", req.url));
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ["/dashboard/:path*"],
|
||||
};
|
||||
105
app/page.tsx
105
app/page.tsx
|
|
@ -1,103 +1,6 @@
|
|||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
||||
app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
export default function HomePage() {
|
||||
redirect("/login");
|
||||
return <div>dashboard</div>;
|
||||
}
|
||||
|
|
|
|||
29
components/Navbar.tsx
Normal file
29
components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import { useAuthStore } from "@/store/authStore";
|
||||
|
||||
export default function Navbar() {
|
||||
const { user, logout } = useAuthStore();
|
||||
|
||||
return (
|
||||
<nav className="bg-gray-800 text-white p-4 flex justify-between items-center">
|
||||
<div className="font-bold text-xl">Website Builder</div>
|
||||
<div className="space-x-4">
|
||||
<Link href="/">Home</Link>
|
||||
{user ? (
|
||||
<>
|
||||
<span>{user.email}</span>
|
||||
<button onClick={logout} className="bg-red-600 px-2 py-1 rounded">
|
||||
Logout
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login">Login</Link>
|
||||
<Link href="/signup">Signup</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
15
lib/firebase.ts
Normal file
15
lib/firebase.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { initializeApp } from "firebase/app";
|
||||
import { getAuth, GoogleAuthProvider } from "firebase/auth";
|
||||
|
||||
const firebaseConfig = {
|
||||
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
|
||||
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN!,
|
||||
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
|
||||
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET!,
|
||||
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID!,
|
||||
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID!,
|
||||
};
|
||||
|
||||
const app = initializeApp(firebaseConfig);
|
||||
export const auth = getAuth(app);
|
||||
export const googleProvider = new GoogleAuthProvider();
|
||||
990
package-lock.json
generated
990
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@
|
|||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"axios": "^1.11.0",
|
||||
"firebase": "^12.2.1",
|
||||
"lucide-react": "^0.542.0",
|
||||
"next": "^15.5.2",
|
||||
"react": "19.1.0",
|
||||
|
|
|
|||
50
store/authStore.ts
Normal file
50
store/authStore.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
"use client";
|
||||
import { create } from "zustand";
|
||||
import { auth } from "@/lib/firebase";
|
||||
import { User, onAuthStateChanged, signOut, getIdToken } from "firebase/auth";
|
||||
|
||||
interface AuthState {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
loading: boolean;
|
||||
setUser: (user: User | null) => void;
|
||||
setToken: (token: string | null) => void;
|
||||
setLoading: (loading: boolean) => void;
|
||||
fetchToken: (user: User) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>((set) => ({
|
||||
user: null,
|
||||
token: null,
|
||||
loading: true,
|
||||
|
||||
setUser: (user) => set({ user }),
|
||||
setToken: (token) => set({ token }),
|
||||
setLoading: (loading) => set({ loading }),
|
||||
|
||||
fetchToken: async (user) => {
|
||||
const idToken = await getIdToken(user, true);
|
||||
set({ token: idToken });
|
||||
},
|
||||
|
||||
logout: async () => {
|
||||
await signOut(auth);
|
||||
set({ user: null, token: null, loading: false });
|
||||
},
|
||||
}));
|
||||
|
||||
// ✅ Firebase observer
|
||||
onAuthStateChanged(auth, async (user) => {
|
||||
const store = useAuthStore.getState();
|
||||
|
||||
if (user) {
|
||||
store.setUser(user);
|
||||
await store.fetchToken(user);
|
||||
store.setLoading(false);
|
||||
} else {
|
||||
store.setUser(null);
|
||||
store.setToken(null);
|
||||
store.setLoading(false);
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue