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:

7 TUI Libraries For Creating Interactive Terminal Apps

7 TUI libraries for creating interactive terminal apps

When writing applications, a good user interface is just as important as the actual app’s functionality. A good user interface […]

Yashodhan Joshi
Jun 14, 2024 ⋅ 18 min read
Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 min read
Superglue Vs. Hotwire For Modern Frontend Development

Superglue vs. Hotwire for modern frontend development

Explore how Superglue and Hotwire revolutionize frontend development with HTML over the wire, enhancing performance, flexibility, and ease of use.

Frank Joseph
Jun 12, 2024 ⋅ 7 min read
Using Pocketbase To Build A Full Stack Application

Using PocketBase to build a full-stack application

PocketBase is a performant Go-based tool that comes with essential features like user auth, file uploads, access control rules, and more.

Rahul Padalkar
Jun 11, 2024 ⋅ 18 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