firebase integration

package.json

@@ -23,6 +23,7 @@
     "color": "^4.2.3",
     "dayjs": "^1.11.13",
     "export-from-json": "^1.7.4",
+    "firebase": "^11.1.0",
     "framer-motion": "^11.11.9",
     "html-react-parser": "^5.1.18",
     "immer": "^10.1.1",

src/firebase.ts

@@ -0,0 +1,15 @@
+import { initializeApp, getApp, getApps } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyDJARj1cO7G1O6WdqNiPWG1g1CdgvAlS-s',
+  authDomain: 'resume-builder-a60ed.firebaseapp.com',
+  projectId: 'resume-builder-a60ed',
+  storageBucket: 'resume-builder-a60ed.firebasestorage.app',
+  messagingSenderId: '702040118233',
+  appId: '1:702040118233:web:549923133895907611ffc8',
+  measurementId: 'G-NV8WV25SVF',
+};
+
+const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
+export const auth = getAuth(app);

src/helpers/auth.ts

@@ -0,0 +1,37 @@
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  signOut,
+  User,
+} from 'firebase/auth';
+import { auth } from '../firebase';
+
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+
+const googleProvider = new GoogleAuthProvider();
+
+export const signInWithGoogle = async () => {
+  try {
+    const result = await signInWithPopup(auth, googleProvider);
+    const user = result.user;
+    alert(`Welcome ${user.displayName}!`);
+    return user;
+  } catch (error) {
+    console.error('Google Sign-In Error:', error);
+    throw error;
+  }
+};
+
+export const register = async (email: string, password: string): Promise<User> => {
+  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+  return userCredential.user;
+};
+
+export const login = async (email: string, password: string): Promise<User> => {
+  const userCredential = await signInWithEmailAndPassword(auth, email, password);
+  return userCredential.user;
+};
+
+export const logout = async (): Promise<void> => {
+  await signOut(auth);
+};

src/helpers/useAuth.ts

@@ -0,0 +1,19 @@
+// helpers/useAuth.ts
+import { useEffect, useState } from 'react';
+import { onAuthStateChanged, User } from 'firebase/auth';
+import { auth } from '../firebase';
+
+const useAuth = (): User | null | undefined => {
+  const [user, setUser] = useState<User | null | undefined>(undefined);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
+      setUser(firebaseUser);
+    });
+    return unsubscribe;
+  }, []);
+
+  return user;
+};
+
+export default useAuth;

src/pages/auth.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { register, login, logout, signInWithGoogle } from '../helpers/auth';
+import { useRouter } from 'next/router';
+
+const Auth: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const router = useRouter();
+
+  const redirectTo = (router.query.redirect as string) || '/';
+
+  const handleGoogleLogin = async () => {
+    try {
+      await signInWithGoogle();
+      router.push(redirectTo);
+    } catch (error) {
+      alert(`Google Login failed: ${(error as Error).message}`);
+    }
+  };
+
+  const handleLogin = async () => {
+    try {
+      await login(email, password);
+      router.push(redirectTo);
+    } catch (error) {
+      alert(`Login failed: ${(error as Error).message}`);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Authentication</h2>
+      <input
+        type="email"
+        placeholder="Email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <input
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button onClick={() => register(email, password)}>Register</button>
+      <button onClick={handleLogin}>Login</button>
+      <button onClick={logout}>Logout</button>
+      <hr />
+      <button onClick={handleGoogleLogin}>Sign in with Google</button>
+    </div>
+  );
+};
+
+export default Auth;

src/pages/builder.tsx

@@ -1,16 +1,35 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import BuilderLayout from '@/modules/builder/BuilderLayout';
+import { useRouter } from 'next/router';
+import useAuth from '@/helpers/useAuth';
+import { useEffect } from 'react';
 
 const BuilderPage: NextPage = () => {
+  const user = useAuth();
+  const router = useRouter();
+
+  // Redirecting to login if user is not logged in
+  useEffect(() => {
+    if (user === null) {
+      const redirectPath = encodeURIComponent(router.asPath);
+      router.push(`/auth?redirect=${redirectPath}`);
+    }
+  }, [user, router]);
+
+  // Showing loading state while user auth status is being determined
+  if (user === undefined) {
+    return <p>Loading...</p>;
+  }
+
+  // Allow access only if the user is logged in
   return (
     <div>
       <Head>
         <title>E-Resume: Builder</title>
         <meta name="description" content="Single Page Resume Builder" />
         <link rel="icon" type="image/png" href="/icons/resume-icon.png" />
       </Head>
-
       <BuilderLayout />
     </div>
   );