Update example with firebase auth

[0x80]

• Update readme to reflect changes in Firebase console and fix any outdated instructions.
• Remove references to obsolete database url for Firebase client config
• Add sessions folder to prevent errors on first run

[0x80]

By using the default file location for session-file-store the sessions are stored locally in the project's sessions subfolder. I've added that folder using .gitkeep to avoid the server printing errors when first started.

[github-actions]

Stats from current PR

Click to expand stats

	zeit/next.js canary	0x80/next.js topic/update-example-with-firebase-auth	Change
Build Duration	12s	12s	⚠️ +15ms
node_modules Size	45.5 MB	45.5 MB	✓
Total Bundle (main, webpack, commons) Size	206 kB	206 kB	✓
Total Bundle (main, webpack, commons) gzip Size	67.9 kB	67.9 kB	✓
Client _app Size	2.39 kB	2.39 kB	✓
Client _app gzip Size	1.08 kB	1.08 kB	✓
Client _error Size	8.22 kB	8.22 kB	✓
Client _error gzip Size	3.16 kB	3.16 kB	✓
Client pages/index Size	343 B	343 B	✓
Client pages/index gzip Size	246 B	246 B	✓
Client pages/link Size	4.08 kB	4.08 kB	✓
Client pages/link gzip Size	1.8 kB	1.8 kB	✓
Client pages/routerDirect Size	423 B	423 B	✓
Client pages/routerDirect gzip Size	306 B	306 B	✓
Client pages/withRouter Size	435 B	435 B	✓
Client pages/withRouter gzip Size	301 B	301 B	✓
Client main Size	20 kB	20 kB	✓
Client main gzip Size	6.86 kB	6.86 kB	✓
Client commons Size	184 kB	184 kB	✓
Client commons gzip Size	59.7 kB	59.7 kB	✓
Client webpack Size	1.49 kB	1.49 kB	✓
Client webpack gzip Size	770 B	770 B	✓
Base Rendered Size	1.35 kB	1.35 kB	✓
Build Dir Size	704 kB	704 kB	✓

Click to expand serverless stats

	zeit/next.js canary	0x80/next.js topic/update-example-with-firebase-auth	Change
Build Duration	13.5s	13s	-511ms
node_modules Size	45.5 MB	45.5 MB	✓
Total Bundle (main, webpack, commons) Size	206 kB	206 kB	✓
Total Bundle (main, webpack, commons) gzip Size	67.9 kB	67.9 kB	⚠️ +2 B
Client _app Size	2.39 kB	2.39 kB	✓
Client _app gzip Size	1.08 kB	1.08 kB	⚠️ +1 B
Client _error Size	8.22 kB	8.22 kB	✓
Client _error gzip Size	3.16 kB	3.16 kB	✓
Client pages/index Size	343 B	343 B	✓
Client pages/index gzip Size	246 B	246 B	✓
Client pages/link Size	4.08 kB	4.08 kB	✓
Client pages/link gzip Size	1.8 kB	1.8 kB	✓
Client pages/routerDirect Size	423 B	423 B	✓
Client pages/routerDirect gzip Size	306 B	306 B	✓
Client pages/withRouter Size	435 B	435 B	✓
Client pages/withRouter gzip Size	300 B	301 B	⚠️ +1 B
Client main Size	20 kB	20 kB	✓
Client main gzip Size	6.85 kB	6.86 kB	⚠️ +1 B
Client commons Size	184 kB	184 kB	✓
Client commons gzip Size	59.7 kB	59.7 kB	✓
Client webpack Size	1.49 kB	1.49 kB	✓
Client webpack gzip Size	770 B	770 B	✓
Serverless pages/link Size	252 kB	252 kB	✓
Serverless pages/link gzip Size	67.9 kB	67.9 kB	✓
Serverless pages/index Size	245 kB	245 kB	✓
Serverless pages/index gzip Size	65.7 kB	65.7 kB	✓
Serverless pages/_error Size	244 kB	244 kB	✓
Serverless pages/_error gzip Size	65.5 kB	65.5 kB	-1 B
Serverless pages/routerDirect Size	245 kB	245 kB	✓
Serverless pages/routerDirect gzip Size	65.7 kB	65.7 kB	✓
Serverless pages/withRouter Size	245 kB	245 kB	✓
Serverless pages/withRouter gzip Size	65.8 kB	65.8 kB	✓
Build Dir Size	1.89 MB	1.89 MB	✓

[github-actions]

Stats from current PR

Click to expand stats

	zeit/next.js canary	0x80/next.js topic/update-example-with-firebase-auth	Change
Build Duration	12s	11.9s	-96ms
node_modules Size	45.5 MB	45.5 MB	✓
Total Bundle (main, webpack, commons) Size	206 kB	206 kB	✓
Total Bundle (main, webpack, commons) gzip Size	67.9 kB	67.9 kB	⚠️ +2 B
Client _app Size	2.39 kB	2.39 kB	✓
Client _app gzip Size	1.08 kB	1.08 kB	⚠️ +1 B
Client _error Size	8.22 kB	8.22 kB	✓
Client _error gzip Size	3.16 kB	3.16 kB	✓
Client pages/index Size	343 B	343 B	✓
Client pages/index gzip Size	246 B	246 B	✓
Client pages/link Size	4.08 kB	4.08 kB	✓
Client pages/link gzip Size	1.8 kB	1.8 kB	✓
Client pages/routerDirect Size	423 B	423 B	✓
Client pages/routerDirect gzip Size	306 B	306 B	✓
Client pages/withRouter Size	435 B	435 B	✓
Client pages/withRouter gzip Size	300 B	301 B	⚠️ +1 B
Client main Size	20 kB	20 kB	✓
Client main gzip Size	6.85 kB	6.86 kB	⚠️ +1 B
Client commons Size	184 kB	184 kB	✓
Client commons gzip Size	59.7 kB	59.7 kB	✓
Client webpack Size	1.49 kB	1.49 kB	✓
Client webpack gzip Size	770 B	770 B	✓
Base Rendered Size	1.35 kB	1.35 kB	✓
Build Dir Size	704 kB	704 kB	✓

Click to expand serverless stats

	zeit/next.js canary	0x80/next.js topic/update-example-with-firebase-auth	Change
Build Duration	13.2s	12.8s	-320ms
node_modules Size	45.5 MB	45.5 MB	✓
Total Bundle (main, webpack, commons) Size	206 kB	206 kB	✓
Total Bundle (main, webpack, commons) gzip Size	67.9 kB	67.9 kB	✓
Client _app Size	2.39 kB	2.39 kB	✓
Client _app gzip Size	1.08 kB	1.08 kB	✓
Client _error Size	8.22 kB	8.22 kB	✓
Client _error gzip Size	3.16 kB	3.16 kB	✓
Client pages/index Size	343 B	343 B	✓
Client pages/index gzip Size	246 B	246 B	✓
Client pages/link Size	4.08 kB	4.08 kB	✓
Client pages/link gzip Size	1.8 kB	1.8 kB	✓
Client pages/routerDirect Size	423 B	423 B	✓
Client pages/routerDirect gzip Size	306 B	306 B	✓
Client pages/withRouter Size	435 B	435 B	✓
Client pages/withRouter gzip Size	301 B	301 B	✓
Client main Size	20 kB	20 kB	✓
Client main gzip Size	6.86 kB	6.86 kB	✓
Client commons Size	184 kB	184 kB	✓
Client commons gzip Size	59.7 kB	59.7 kB	✓
Client webpack Size	1.49 kB	1.49 kB	✓
Client webpack gzip Size	770 B	770 B	✓
Serverless pages/link Size	252 kB	252 kB	✓
Serverless pages/link gzip Size	67.9 kB	67.9 kB	⚠️ +1 B
Serverless pages/index Size	245 kB	245 kB	✓
Serverless pages/index gzip Size	65.7 kB	65.7 kB	⚠️ +1 B
Serverless pages/_error Size	244 kB	244 kB	✓
Serverless pages/_error gzip Size	65.5 kB	65.5 kB	⚠️ +1 B
Serverless pages/routerDirect Size	245 kB	245 kB	✓
Serverless pages/routerDirect gzip Size	65.7 kB	65.7 kB	⚠️ +1 B
Serverless pages/withRouter Size	245 kB	245 kB	✓
Serverless pages/withRouter gzip Size	65.8 kB	65.8 kB	✓
Build Dir Size	1.89 MB	1.89 MB	✓

[lfades]

@0x80 Thank you 💯

[technoplato]

@0x80 @Timer Is this still supposed to work without modification with now 2.0?

[lfades]

@technoplato If it doesn't, it is broken 😿

[technoplato]

@lfades Not working for me. Does it work for you?

[lfades]

@technoplato I personally haven't run this example in my environment, examples are mainly developed by the community. If it doesn't work open up an issue or a PR to fix it 🙏

[technoplato]

@lfades I am doing just that. Just having to learn a little bit as I was trying to use this as a basis for learning in itself. I'll keep working on will post any relevant PRs, certainly.

[0x80]

@technoplato @lfades I think I had it working with 2.0 but I'm not 100% sure since I moved away from this approach shortly after.

I moved to using firebase session cookies after this, which seems to be a better solution, but also ditched that after realizing that the server side auth related things were unnecessary for my app. I remember I also had trouble deploying to Now.sh because of incompatibilities between SSR and the firebase web SDK, so eventually I gave up and went with the most basic solution of not using server side auth at all. But that might not be an option for you...

Below you'll find the code I used for the server using firebase session cookies before I ditched server side auth all together. Hope it's helpful to someone.

import express from "express";
import bodyParser from "body-parser";
import cookieParser from "cookie-parser";
import next from "next";
import admin from "firebase-admin";

require("dotenv").config();

const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

const firebase = admin.initializeApp();

app
  .prepare()
  .then(() => {
    const server = express();

    server.use(bodyParser.json());
    server.use(cookieParser());

    server.post("/api/sessionLogin", async (req, res) => {
      if (!req.body) return res.sendStatus(400);

      const idToken = req.body.idToken.toString();

      // @TODO add CSRF token check
      // https://firebase.google.com/docs/auth/admin/manage-cookies

      const expiresIn = 604800000; // week
      try {
        const sessionCookie = await firebase
          .auth()
          .createSessionCookie(idToken, { expiresIn });

        // Set cookie policy for session cookie.
        const options = {
          maxAge: expiresIn,
          httpOnly: true,
          secure: true
        };
        res.cookie("session", sessionCookie, options);
        res.json({ status: "success" });
      } catch (err) {
        res.status(401).send("UNAUTHORIZED REQUEST!");
      }
    });

    server.post("/api/sessionLogout", (req, res) => {
      res.clearCookie("session");
      res.json({ status: "success" });
    });

    /**
     * First handle the public routes that do not require auth session check
     */
    server.get("/", (req, res) => {
      return handle(req, res);
    });

    server.get("/login", (req, res) => {
      return handle(req, res);
    });

    server.get("/_next/*", (req, res) => {
      return handle(req, res);
    });

    /**
     * Then a catch all for the remaining routes which all require auth
     */
    server.get("*", (req, res) => {
      const sessionCookie = req.cookies.session || "";

      admin
        .auth()
        .verifySessionCookie(sessionCookie, true)
        .then(decodedClaims => {
          console.log("decodedClaims", decodedClaims);
          /**
           * @TODO check if user is admin using claims
           */
          return handle(req, res);
        })
        .catch(() => {
          // console.error(error.message);
          console.log("Failed to verify session cookie, redirect to login");
          // Session cookie is unavailable or invalid. Force user to login.
          res.redirect("/login");
        });
    });

    server.listen(port, err => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
  })
  .catch(err => console.error(err));