Getting a 502 on deployed project; Localhost runs fine

[Vikram]

On my localhost project, I am able to get the skeleton state briefly while the data loads so it gives that nice transition. For some reason on my deployed project on Vercel, it never gets past the skeleton stage. On further inspection of the deployed site, I get a 502 console error that I can't figure out why. Looking to just be pointed in the right direction please and thank you!

Dashboard.js

export default function Dashboard() {
  const { user } = useAuth();
  const { data } = useSWR(user ? ['/api/trails', user.token] : null, fetcher);

  if (!data) {
    return (
      <DashboardShell>
        <TrailTableSkeleton />
      </DashboardShell>
    );
  }

  return (
    <DashboardShell>
      {data?.trails?.length ? (
        <TrailsTable trails={data.trails} />
      ) : (
        <EmptyState />
      )}
    </DashboardShell>
  );
}

Trails.js (Sites.js in tutorial)

import { auth } from '../../lib/firebase-admin';
import { getUserTrails } from '../../lib/db-admin';

export default async (req, res) => {
  try {
    const { uid } = await auth.verifyIdToken(req.headers.token);
    const { trails } = await getUserTrails(uid);

    res.status(200).json({ trails });
  } catch (error) {
    res.status(500).json({ error });
  }
};

[Lee Robinson]

👋 Did you add the environment variables for Firebase to Vercel? Can you hit the API directly if you remove the ID token check?

[Vikram]

@leerob Hey Lee, I don't deserve this tutorial. That was it. Thank you haha.

[Lee Robinson]

You absolutely DO deserve this tutorial! Happy to help!