Hi i am currently working on a project where i need to build a logIn page without password, so when user visit my website they can input their mail and if mail exist in any documment in my firestore collection “Kunder” the code will send them a email with unique id that get stored in the “Kunder” collection and with matching email in field called “kundensLANK”

But now i need to build an other component that will have route /shop/id:, so when user get a link in the email and visit the route i need to map through “Kunder” and check if the id exist in any of documments saved there with field called “kundensLANK”.

If id exist the user get access to the shop but if id dosent exist i need to throw an 404

My current folder structure i use next js 14

app
└── src
└── app
└──page.js/Home

Here is how user get mail and how i store evrything

'use client';
import { useEffect, useState } from 'react';
import { db } from './frConfig';
import { collection, getDocs, updateDoc, doc } from 'firebase/firestore'; // Import updateDoc and doc
import FormData from 'form-data';
import Mailgun from 'mailgun.js';
import { v4 as uuidv4 } from 'uuid'; // Import the uuid library

export default function Home() {
  const [email, setEmail] = useState('');
  const [customers, setCustomers] = useState([]);
  const API_KEY = 'test';
  const DOMAIN = 'test';

  async function sendMail(uniqueID) {
    const mailgun = new Mailgun(FormData);
    const clientMailgun = mailgun.client({ username: 'api', key: API_KEY });

    const MessageData = {
      from: 'test', 
      to: email,
      subject: 'Engångs länk',
      text: `Testing some Mailgun awesomeness! Your unique ID is: ${uniqueID}`,
    };

    try {
      const res = await clientMailgun.messages.create(DOMAIN, MessageData);
      console.log('Mail sent:', res);
    } catch (err) {
      console.log('Error sending mail:', err);
    }
  }

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const matchedCustomer = customers.find((customer) => customer.kundensEMAIL === email);
    if (matchedCustomer) {
      console.log('Client exists');
      const uniqueID = uuidv4();
      await sendMail(uniqueID);
      const customerRef = doc(db, 'Kunder', matchedCustomer.id);
      const currentDate = new Date(); // Get the current date
      await updateDoc(customerRef, { 
        kundensLANK: uniqueID,
        lankenSkapad: currentDate // Save the current date
      });
    } else {
      console.log('No match found');
    }
  };

  useEffect(() => {
    const fetchCustomers = async () => {
      const customersList = [];
      const customersSnapshot = await getDocs(collection(db, 'Kunder'));
      customersSnapshot.forEach((doc) => {
        customersList.push({ id: doc.id, ...doc.data() });
      });
      setCustomers(customersList);
    };

    fetchCustomers();
  }, []);

  return (
    <main className="w-screen bg-primary bg-cover h-screen">
      <div className="h-screen flex items-center justify-center">
        <form className="w-[400px] h-[400px] rounded-3xl bg-secondary text-center" onSubmit={handleSubmit}>
          <h1 className="mt-5 text-xl font-bold font-main1">
            Välkommen till <span>FIBR</span> företag!
          </h1>
          <label className="flex mt-24 ml-16 font-semibold font-main1">
            <div>
              <input
                onChange={handleEmailChange}
                type="text"
                className="relative bg-gray-50 ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-64 p-2.5"
                placeholder="Mail..."
              />
            </div>
          </label>
          <button className="mt-24 w-32 h-10 bg-trigger rounded-3xl" type="submit">
            Logga in
          </button>
        </form>
      </div>
    </main>
  );
}