Guess what I did today? I planned the features for the MVP, set up a Next.js app and its GitHub repository, and I merged the first PR for the No-Code Overlays Web App! If you'd like to read all of the details in the PR, you can do so here, but I'll give you a quick run down.
So, when you arrive at the app, you need to log in with an email and password. Having a login keeps everyone's information separate and private. I don't want anyone to be able to edit my streaming overlay, and no one wants me to edit theirs either! Here's a preview of that page:
To put all of this together, I added a couple of pages to the app, installed the Firebase npm package, set up a new Firebase project, added a test user for logging in, and set up some functions for interacting with Firebase auth in this API file. This part was a little tedious, but pretty straightforward!
The last step was to handle redirects to the login page when a page that requires a logged in user is trying to be reached. Next's router makes it very easy to redirect, so the hardest part was checking with Firebase for a logged in user. In the API file I mentioned, I wrote a function for getting the current user. If there's no current user, then there's a redirect to the login page.
I'm thinking about writing a blog post on this for my personal site, but no promises. This project has me pretty busy at the moment! Stay tuned for the next update! :)
Top comments (1)
Nice progress! I have to confess I've never set up authentication before because it really intimidates me. D: