2021-06-01
2137
#firebase#nextjs
Marie Starck
50940
Jun 1, 2021 ⋅ 7 min read

Implementing authentication in Next.js with Firebase

Marie Starck Marie Starck is a fullstack software developer. Her specialty is JavaScript frameworks. In a perfect world, she would work for chocolate. Find her on Twitter @MStarckJS.

Recent posts:

Exploring Stylex And The New Generation Of Styling Libraries

Exploring StyleX and the new generation of styling libraries

StyleX is a build-time, type-safe CSS-in-JS library recently open sourced by Meta. Explore StyleX and the evolution of styling libraries.

Ibadehin Mojeed
Feb 29, 2024 ⋅ 9 min read
Building High Performance Ecommerce Sites With Astro

Building high-performance ecommerce sites with Astro

Learn to set up a completely custom Astro ecommerce implementation that’s also highly performant and type-safe in this straightforward guide.

Onuorah Bonaventure
Feb 28, 2024 ⋅ 64 min read
Implementing Vector Search With Open Ai, Next Js, And Supabase

Implementing vector search with OpenAI, Next.js, and Supabase

Let’s build a Next.js app that implements vector search using Supabase and OpenAI to offer better search experiences for users.

Peter Ekene Eze
Feb 27, 2024 ⋅ 11 min read
Comparing React Native BLE libraries

Comparing React Native BLE libraries

Discover the most popular libraries for enabling Bluetooth Low Energy (BLE) in React Native apps, allowing them to interact with Bluetooth hardware on iOS and Android platforms.

Fimber Elemuwa
Feb 26, 2024 ⋅ 4 min read
View all posts

27 Replies to "Implementing authentication in Next.js with Firebase"

  1. I think this blog will be more helpful if you mention the files and directories in which we have to copy + paste/ add these code snippets 🙂

      1. Hey Omib! In one of the previous comments, from back in June 2021, I added a comment and linked a git repository. Joel also added a comment on how to handle the newer version (aka 9) which should be very helpful.

    1. I had been trying to set up firebase. I had no idea that it was the latest version, Version 9. I could not for the life of me figure out why I was running into so many bugs. I had used the same set up numerous times.

      Finally, I dove deeper into the docs.

      For version 9 plus

      import firebase from ‘firebase/compat/app’;
      import ‘firebase/compat/auth’;
      import ‘firebase/compat/firestore’;

      Then it worked like a charm

      Just don’t want to see anyone else burn a day banging their head against the wall wondering why it was running into so many bugs.

  2. Thanks for this post but i have a question: if in situation the app has multiple page which is need to auth. Will you duplicate code of useEffect? 😀

    1. Unfortunately, Next.js doesn’t have an elegant way to handle auth and non-auth routes (or at least not one that I know of). The best way would be to create an isAuthenticated hook that does the listening on rendering. It’s not ideal but it’s all I got.

  3. Hi Marie,

    I must say that your blog is really helpful. I found it helpful in context of a regular react project.
    I am now learning NEXT JS and was reading the pre-rendering documentation, getStaticProps and getStaticPages. This made me wonder how pages will be pre-rendered if we have some sections to render that depend on authentication.
    Can you also add an ‘advanced’ section to your blog that covers authentication and pre-rendering.
    Thanks.

  4. This is an excellent post. An important note though that it’s based on version 8.3.3 of the Firebase libraries. Lots of breaking changes in 9.x with respect to how to locate and call the auth functions.

    npm uninstall firebase
    npm install [email protected] —save

    Thanks for such a well written and informative piece!

    1. Please refer to my answer to Nguyen back in July 7th (aka third posts above you). He asked a similar question and I replied there.

  5. Hello Marie, Really awesome guide! Thought I’m getting an issue where createUserWithEmailAndPassword() runs, logs as success and the same function inside useFirebaseAuth() never gets executed (= no user actually gets created). Any chance you’ve come across a similar issue? Appreciate it!

    1. Hey Ruben! Glad to hear you liked it. As for your issue, it doesn’t ring a bell but there could be a thousand reason why it is not working and it’s hard to tell why without seeing the code. If you are having some issues debugging, I suggest you post a question with a link to your code on StackOverflow and tagged it firebase. Good luck!

  6. How to use this for conditional routing? My index page is marketing page. I want to automatically redirect the user to home page if he loggedin. How to do that?

    1. Unfortunately, Next.js isn’t like React (and React Router) where you can easily define routes and redirect when needed. The only workaround would be to have a check in your index.js if the user is authenticated and redirect if he is. Something like this:

      const { authUser, loading } = useAuth();
      const router = useRouter();

      // Redirect if user is authenticated
      useEffect(() => {
      if (!loading && authUser)
      router.push(‘/homepage’)
      }, [authUser, loading])

  7. Thanks for the project. I am just learning nextjs, firebase, and react and this nailed it for me. I updated the project to firebase v9 and I would be more than happy to submit a PR. I didn’t see these comments until today so I created an issue against the project in github.

    1. Hey Dan! Thanks for the comment and glad this article was helpful. I am replying to your issue on the PR. 🙂

  8. Hi Marie,
    But I have a question, why use jsx suffixed files instead of js?( useFirebaseAuth.jsx, logged_in.jsx , sign_up.jsx )
    I am a beginner T-T

  9. Hey,

    Great lessen! I just need to know some basic details. How would I actually code the app to only accept certain emails? Say I have 2 admin for a blog site. How would I set it to deny some emails. Thanks in advance.

  10. I like this a lot! Thank you for posting and the write up.

    Especially compared to all the pieces still missing in gladly-team/next-firebase-auth. I do like react-firebase-hooks for seeing live updates to documents, but I didn’t get it integrated into a login auth flow yet.

    I ended up adding a basic navbar and layout and a forgot password page to this within the first hour of using this, and using the fork by https://github.com/dan-sproutward/nextjs-auth-with-firebase that uses firebase v9.

Leave a Reply