Convert server side authentication to Next.js middleware

[elliotBraem]

In order to protect routes from unauthorized users, protected pages have this code snippet:

export const getServerSideProps = async (ctx) => {
  try {
    const admin = getFirebaseAdmin();
    const cookies = parseCookies(ctx);
    await admin.auth().verifyIdToken(cookies.__session);

    return {
      props: {},
    };
  } catch (err) {
    // either the `__session` cookie didn't exist
    // or token verification failed
    // either way: redirect to the login page
    return {
      redirect: {
        permanent: false,
        destination: "/login",
      },
      props: {},
    };
  }
};

This is duplicated on every page that is protected (almost all pages...)

Next.js 12 introduces middleware which should be able to replace this duplicate code and move it to its own _middleware.js file.

Note: Relevant YouTube snippet that inspired this issue.

The following routes should be protected:

• /collect
• /request
• /organize
• /profile