// Import the functions you need from the SDKs you need
import { FirebaseOptions, getApp, getApps, initializeApp } from "firebase/app";
import { getAuth, inMemoryPersistence } from "firebase/auth";
 
// Firebase configuration
const firebaseConfig: FirebaseOptions = {
	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,
	//If google analytics is enabled, provide this in the .env
	measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
 
// Initialize Firebase or get the already available instance (singleton pattern)
const app = getApps().length >= 1 ? getApp() : initializeApp(firebaseConfig);
 
export default app;
 
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
 
//Do not persist. We'll use server side sessions to verify auth
auth.setPersistence(inMemoryPersistence);
 
export { auth };

export default async function LoginPage() {
	return (
		<section className="p-2 md:p-4 max-w-[60ch] mx-auto mt-10 ">
			<h2 className="font-medium py-2 text-xl tracking-tighter text-center">
				Login to continue
			</h2>
			<p className="py-2 leading-relaxed text-center">
				Please sign in to the app using one of the providers. You will
				have the option to delete your account anytime you want.
			</p>
			<div className="grid grid-flow-row max-w-sm gap-2 mt-10 mx-auto">
				{/* Providers */}
				<GoogleSignIn />
			</div>
		</section>
	);
}

"use client";
//... import required functions
 
export default function GoogleSignIn() {
	/**
	 * Handle google sign in flow.
	 */
	async function signInWithGoogle() {
		try {
			//Initialize the login flow using popup window
			const provider = new GoogleAuthProvider();
			const credentials = await signInWithPopup(auth, provider);
 
			//If login success, we can extract the JWT token from the credentials object
			const token = await credentials.user.getIdToken();
 
			//We now send the jwt token to the server to create a session cookie
			const result = await loginAction({ idToken: token });
 
			//If success, redirect to user profile (This can be done via the server action as well)
			if (result) {
				redirect("/user");
			}
		} catch (error: any) {
			//Display desired errors if needed and reset loading states
		}
	}
 
	return (
		<div className="flex flex-col w-auto gap-1">
			<button type="button" className="..." onClick={signInWithGoogle}>
				Sign in with Google
			</button>
		</div>
	);
}

import "server-only"; // Ensures this file cant be imported in the client
import { initializeApp, getApps, cert } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";
import { getFirestore } from "firebase-admin/firestore";
 
let serviceAccountDetails = {};
try {
	//Decode the base64 encoded json
	const decodedJson = atob(process.env.FIREBASE_CERT_JSON);
	//parse the json
	serviceAccountDetails = JSON.parse(decodedJson);
} catch (error) {
	console.log("Unable to parse the json data for FIREBASE_CERT_JSON");
	throw new Error("Failed to init");
}
const firebaseAdminConfig = {
	credential: cert(serviceAccountDetails),
};
 
const firebaseAdminApp =
	getApps().find((app) => app.name === "fb-admin") ||
	initializeApp(firebaseAdminConfig, "fb-admin");
 
const db = getFirestore(firebaseAdminApp);
const auth = getAuth(firebaseAdminApp);
 
/* --------------------------------- exports -------------------------------- */
export { firebaseAdminApp, auth as adminAuth, db };

/**
 * Get the token from the client and save it as a firebase cookie. If login succeeds, revalidate the whole router
 */
export async function loginAction({ idToken }: { idToken: string }) {
	try {
		if (!idToken) return;
		const result = await login(idToken);
		if (result) {
			revalidatePath("/");
			return result;
		}
	} catch (error: any) {
		console.log("loginAction Error: ", error?.message);
		return undefined;
	}
}

import "server-only";
import { adminAuth } from "./firebase-admin";
import { cookies } from "next/headers";
 
/**
 * Sign a user in
 * @param token jwt token string from client side.
 * @returns
 */
export async function login(token: string) {
	try {
		//Verify the token and get user data
		const decodedIdToken = await adminAuth.verifyIdToken(token);
		if (!decodedIdToken) return;
 
		//Create the cookie token string to save.
		const sessionCookie = await adminAuth.createSessionCookie(token, {
			expiresIn: 60 * 60 * 24 * 7 * 1000,
		});
 
		//Create the cookie
		cookies().set("__session", sessionCookie, {
			maxAge: 60 * 60 * 24 * 7, // 1 week in seconds (Im not sure but this must be in seconds instead of ms)
			httpOnly: true,
			secure: true,
		});
 
		//User logged in
		return true;
	} catch (error: any) {
		console.log("Error logging in", error?.message);
		return false;
	}
}

/**
 * Load the token from the session cookie and verify token is valid.
 * @param checkForRevocation Perform a backend query to see if token is revoked?
 * This is a costly operation. It'll connect to firebase backend to validate the account status.
 * You may use this in highly sensitive routes for extra protection.
 * @returns A decoded id token or undefined
 */
export async function isLoggedIn(checkForRevocation = true) {
	try {
		//Get current session cookie if available
		const sessionCookieValue = await getSessionCookie();
		if (!sessionCookieValue) return;
 
		//Verify cookie token and return Decoded ID Token
		return await adminAuth.verifySessionCookie(
			sessionCookieValue,
			checkForRevocation,
		);
	} catch (error: any) {
		//If there is a problem with the user auth, handle here
		//console.log(error.code) //example: auth/user-disabled
		//delete the cookie and revoke the session
		await logout();
		return undefined;
	}
}
 
/**
 * Get current user record if found
 * @returns
 */
export async function getCurrentUser(): Promise<UserRecord | undefined> {
	try {
		//load decoded id token without revocation verification call
		const decodedIdToken = await isLoggedIn(false);
		if (!decodedIdToken) return;
 
		//Load user record using uid from the token
		return await adminAuth.getUser(decodedIdToken.uid);
	} catch (error: any) {
		console.error("Error getCurrentUser", error?.message);
	}
	return undefined;
}

/**
 * Get a UserRecord as JSON object or undefined
 * @param validate query the backend to check if the token is valid? It's a costly operation and must not be called in every page
 * @returns
 */
export async function getAuthAction(validate = false) {
	try {
		if (validate) {
			const decodedIdToken = await isLoggedIn(true);
			if (!decodedIdToken) return undefined;
		}
		const user = await getCurrentUser();
		if (user) return user.toJSON();
	} catch (error: any) {
		console.log("getAuthAction Error: ", error?.message);
		return;
	}
}

import { getAuthAction } from "./actions";
import { redirect } from "next/navigation";
import { UserRecord } from "firebase-admin/auth";
 
export default async function UserPage() {
	const user = (await getAuthAction()) as UserRecord | undefined;
	if (!user) {
		return redirect("/user/login");
	}
 
	return (
		<section className="mt-10 p-2">
			{/* Card Wrapper */}
			<div className="border rounded-md bg-slate-50 overflow-hidden max-w-2xl mx-auto">
				{/* Card Header */}
				<div className="flex flex-row gap-2 items-center bg-zinc-200 justify-between p-2">
					<h3 className="font-bold flex-1 ">
						&#128100; Profile Details
					</h3>
					{/* Additional Action buttons can be inserted here later */}
				</div>
 
				{/* Card Body */}
				<div className="flex flex-col items-center md:flex-row w-full p-2 text-sm gap-10">
					{/* User Profile Image */}
					{user.photoURL && (
						<div className="w-1/4 flex flex-col items-center justify-center gap-1">
							<img
								src={user.photoURL}
								alt="User image"
								className="rounded-full w-auto"
								referrerPolicy="no-referrer"
							/>
							<span className="font-medium">
								{user.displayName}
							</span>
						</div>
					)}
 
					{/* User Details */}
					<div
						className="grid gap-y-2 gap-x-4 flex-1 overflow-hidden text-ellipsis"
						style={{ gridTemplateColumns: "auto 1fr" }}>
						{/* Row */}
						<span className="font-medium">Name</span>
						<span>{user.displayName}</span>
						{/* Row */}
						<span className="font-medium">Email</span>
						<span>{user.email}</span>
						{/* Row */}
						<span className="font-medium">Registration Date</span>
						<span>{user.metadata.creationTime}</span>
						{/* Row */}
						<span className="font-medium">Auth Provider</span>
						<span>
							{user.providerData[0]?.providerId ?? "Unknown"}
						</span>
					</div>
				</div>
			</div>
		</section>
	);
}

/**
 * Initiate logout sequence and redirect to home page if succeeds.
 * @returns
 */
export async function logoutAction(): Promise<undefined> {
	let result: true | undefined = undefined;
	//Call logout and revoke user
	try {
		result = await logout();
	} catch (error: any) {
		console.log("logoutAction Error: ", error?.message);
	}
	//If logout succeeds, redirect
	if (result) {
		revalidatePath("/");
		//Server action is capable of redirecting the client to another route
		//It must not be wrapped in try catch block.
		return redirect("/?notify=logout_success");
	}
	return undefined;
}

/**
 * Log the user out, delete the session cookie, revoke the token
 * @returns
 */
export async function logout() {
	try {
		//Get current session cookie if available
		const sessionCookieValue = await getSessionCookie();
		if (!sessionCookieValue) return;
 
		//Decode cookie to verify
		const decodedIdToken = await adminAuth.verifySessionCookie(
			sessionCookieValue,
		);
 
		//Revoke the token
		await adminAuth.revokeRefreshTokens(decodedIdToken.sub);
 
		//Delete the cookie
		cookies().delete("__session");
 
		return true;
	} catch (error: any) {
		console.error("Error logOut", error?.message);
	}
}