Secure Protected Route? Need advice

[ksteidl]

Alright guys I need your help. So I have been trying for the last week or so to try to find the best way to check if an authenticated user has an active subscription or not. If he doesn't have it, he gets redirected to the route "/choose-plan". First I tried to get the user.id through withUserSSR and then search for an active subscription with the id like this

  whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,
})(async ({ AuthUser }) => { // AuthUser is provided by withUserSSR
  if (!AuthUser.id) { // Use AuthUser.id instead of user.id
    // If user is not authenticated, you can redirect or return null props
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  const firestore = getFirestore();
  // Use Firestore SDK to check the user's subscription status
  const q = query(
    collection(firestore, 'customers', AuthUser.id, 'subscriptions'),
    orderBy('created', 'desc'), 
    limit(1) 
  );
  const querySnapshot = await getDocs(q);
  if (querySnapshot.empty) {
    return {
      redirect: {
        destination: '/choose-plan',
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
});

But that failed because the user.id was always undefined. That's why I decided to to save the uid when the user successfully logs in with the cookies and then through context gets the uid from the cookies and makes the database request. The only problem with this is that I have to change my security rules to something like this

{
  "rules": {
    "public_resource": {
      ".read": true,
      ".write": true
    },
    "some_resource": {
      ".read": "auth.uid === 'my-service-worker'",
      ".write": false
    },
    "another_resource": {
      ".read": "auth.uid === 'my-service-worker'",
      ".write": "auth.uid === 'my-service-worker'"
    }
  }
}

(https://firebase.google.com/docs/database/admin/start#authenticate-with-limited-privileges).

import { useEffect } from 'react';
import { useAuth } from "@/context/AuthContext"
import { useRouter } from 'next/router'
import { 
  getFirestore, 
  doc, 
  setDoc,
  collection,
  getDoc,
  getDocs,
  query,
  QuerySnapshot,
  orderBy, 
  limit,
  QueryDocumentSnapshot,
} from 'firebase/firestore'
import { auth as firebaseAuth, db as firestoreDB } from '../firebase/firebase.config'
import {
  useUser,
  withUser,
  withUserTokenSSR,
  withUserSSR,
  AuthAction,
} from 'next-firebase-auth'

function Dashboard() {
    const router = useRouter();
    const user = useUser()
    console.log(user)
    const { logout, hasSubscription } = useAuth()
    
    useEffect(() => {
      if (user.uid && !hasSubscription) {
        router.push('/choose-plan');
      }
    }, [user, hasSubscription]);

  return (
    <div className="h-screen w-screen flex items-center justify-center flex-col">
        <span className="text-4xl text-bsecondary">dashboard</span>
    </div>
  )
}

export const getServerSideProps = withUserTokenSSR({
  whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,
})(async (context) => {
  const { req } = context;
  const uid = req.cookies.uid;
  console.log(uid)
  const firestore = getFirestore();
  // Use Firestore SDK to check the user's subscription status
  const q = query(
    collection(firestore, 'customers', uid!, 'subscriptions'), // Here, we're sure user.id is defined
    orderBy('created', 'desc'), 
    limit(1) 
  );
  const querySnapshot = await getDocs(q);
  if (querySnapshot.empty) {
    return {
      redirect: {
        destination: '/choose-plan',
        permanent: false,
      },
    };
  }
  return {
    props: {},
  };
});

export default withUser({
  whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
  whenUnauthedBeforeInit: AuthAction.RETURN_NULL,
})(Dashboard);

My question is now if that method is secure or not. If not, please show me the right way