March 29, 2020

Implemented SSR-Auth

Paul Rondeau @parondeau

What the heck is SSR-Auth??

Let me tell you by giving a bit of background. The auth flows on Forty are handled via Firebase, when you sign into the website the first time a private Firebase cookie is stored in the browser. When you visit the website again, that cookie is retrieved by the Firebase SDK and automatically logs you in (all on the client side). Now this is super handy for SPAs (single-page apps). However, when we're using modern frameworks like Next.js, we want to pre-render pages on the server for the first page load, which isn't possible if we can only log a user in on the client-side. Now, because the Firebase SDK writes/manages that private cookie, we actually don't have access to it whatsoever (good for security 🔒).

So how can we enable server-side rendering for an already logged in user? Let's create our own cookie! This cookie needs to be something we can validate as a valid user credential on the server. We can store a short-lived user token, from the Firebase SDK, in the cookie, which we will validate using the Firebase SDK in the backend. As long as we send this cookie to the backend during the initial page load, we should be able to pre-render the entire application for the user, with all of their data (no screen flashes!).

Long story short, Forty now supports server-side authentication using cookies! I plan on following up this post with a blog post with some code snippets. Happy to dive into the details in the comments :)

  1. 2

    Super clever Paul! I was just fighting this very challenge all day today. Never figured it out. I ended up wrapping the auth checks in a component then dynamically importing the component with ssr disabled. Thanks so much for this post! 🔥

  2. 1

    Hey Paul,

    When you login on the client side using Firebase, firebase returns uuid, token in the response along with some other fields. You can actually pass these two things to your server and ask Firebase to validate the token.

    Please correct me if I am wrong here but probably you won't need more than this if it works for you.

    1. 1

      Hey Sachin,

      So that is sort of what I am doing. The only reason I need the server to authenticate users is on the initial page load (which is SSR automatically via Next.js). Because it is rendered on the server, there is not access to the client-side Firebase cookie/auth credential. So to get around this problem, I create a cookie myself using the Firebase token (short-lived) and save that to the browser. Now when the user closes the tab and reopens https://forty.app, that cookie is sent to the server which the server then validates, if it is a valid cookie, we can pre-render the entire application with their user data.

      Does that make sense?

      • Paul
Today's Top Milestones
  • First customer interview 🤗
    We're building SEOly to become the one-stop-shop solution for Indie Hackers looking to improve their SEO. We'll cover On-Page SEO (Technical Checks an
  • Better Shirts
    Maker Threads and Better Sheets have come together to make Better Shirts. Better shirts than your mom can sew for ya, at least. Launched on product hu
  • 🤑September breakdown
    I am a bit late, because October is already coming to an end. But here are my figures for September :) Ads revenue: 125€ In-App purchases: 52,61€ Tota
  • First $5 in Revenue!!!
    Out of the blue I received my first contribution on Buy Me a Coffee. I've been heads down on adding guides and improving my site design, so I haven't
  • Monthly Text Expansion, Subscriptions
    It's been a while! Typing Hero now helps 20K+ monthly active users expanding text 12M+ times each month! As for the subscription, it currently has 67
  • Finished Beta version of the MVP
    After a lot of hours spend in my code editor, I finally have a version ready for first tests. I developed it using tools I already knew, using cloud s
  • Open Life & Open Startups
    > “you can't manage what you can't measure.” - Peter Drucker One thing that I've done consistently for the past three years is making sure that I trac
  • Swish.ink Update #4: End of Beta
    This was sent out as a Newsletter, subscribe here. It's been 4 weeks since the last update, and this update officially marks the end of the beta for S
  • Added legal pages
    I’m so happy that I finally accomplished this milestone! Especially, because it is such a dull one! 🥵 In past projects I procrastinated this part alm
  • New Landing Page
    Today I released the new landing page in hope of a better conversion. Quite frankly the old landing page was a bit of a mess since I released the MVP