How makers stay productive

NextJS and Firebase Auth is pretty new, so there aren’t many tutorials out there. As promised, here is my paper trail.

NextJS react authentication - https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication

The above is great if you just want to copy and paste the functionality and go. The UX follows best practices and you can’t change the UI. Since Boneyard is a real project, I’m going to have to redesign it. I thought that I should instead learn how to connect Firebase Auth to React, and since NextJS is built on React, build the functionality myself on NextJS. Also, learning it is a good thing as I can reuse the code elsewhere.

I used the following video in addition to the NextJS tutorials and by referring to firebase docs.

React, Firebase Video Tutorial -
https://www.youtube.com/watch?v=PKwu15ldZ7k

Firebase Doc, understanding Auth() methods -
https://firebase.google.com/docs/reference/js/firebase.auth.Auth

Before moving on to the signup, a little configuration has to be done to enhance the UX. When a user signs up or requests to reset password, a link will be sent to their email. Firebase provides a generic link and a generic UI, but that’s not production quality and the UX isn’t good. We can create our own one by setting our own redirect link:

To set the link, go to firebase > authentication > templates > edit template > under action url, change it to a link to your website. I’m on my development build, so I’ll be using: localhost:3000/auth/action. Once it is set, it should look something like this depending on your routing structure: http://localhost:3000/auth/action?mode=action&oobCode=code

Note that the link will be the same for both password reset and email verification. Also note that the redirect link above has 2 router queries, Mode and oobCode. We’ll use router queries to differentiate between the two for the UI, and the oobCode to verify the authenticity of the source.

(1) Signing Up

Firebase Doc, creating new users -
https://firebase.google.com/docs/auth/web/start#sign_up_new_users

I started with a simple email login. Email verification is probably needed, so here is how you do it.

Firebase Doc, sending a verification email -
https://firebase.google.com/docs/auth/web/manage-users#send_a_user_a_verification_email

Firebase Doc, verifying email using custom link redirect -
https://firebase.google.com/docs/reference/js/firebase.User#sendemailverification
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#applyactioncode

Firebase Doc, check if email is verified. It is stored as a property in the user object which we can access in the app to handle UI changes -
https://firebase.google.com/docs/reference/js/firebase.User

(2) Signing In

Firebase Doc, signing in existing users -
https://firebase.google.com/docs/auth/web/start#sign_in_existing_users

(3) Handling Password Reset

Firebase Doc, send password reset email
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#sendpasswordresetemail

Firebase Doc, confirm password reset -
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#confirmpasswordreset

That’s about it. Next up, twitter auth.