DEV Community

Cover image for Remix Firebase Google Auth
Hosenur Rahaman
Hosenur Rahaman

Posted on

Remix Firebase Google Auth

Authentication is a very important part of any app. In this tutorial we are going to integrate Firebase Google Authentication in a Remix app.
Users when authenticated can like posts, post comments under posts.

Setting Up Our Project 🚀

Create a new Remix project

Create a new Remix project by running the following command on your terminal:

npx create-remix@latest
Enter fullscreen mode Exit fullscreen mode

Choose your preferred Hosting Platform, Language and navigate to the projects directory.
Install required packages

npm install firebase
Enter fullscreen mode Exit fullscreen mode

Configuring Firebase in our project 🔥

Connect Firebase

Create a new firebase project in the firebase console, or use an existing one, and follow the steps below.

  • Provide App Nickname.
  • Click on Register app.
  • You will be provided with the Add Firebase SDK screen.
  • Copy the firebaseConfig object variable.
  • Create a folder names contexts inside the app folder.
  • Create a new firebase.js file in the contexts folder and copy and paste the snippet given below and replace your firebaseConfig.
// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  authDomain: "",
  storageBucket: "",
  messagingSenderId: "XXXXXXXXXXX",

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
Enter fullscreen mode Exit fullscreen mode
  • Return to the Firebase console and click on Authentication, then click on Sign-in Method and enable Google under Additional Providers tab and click on Save. If you have a custom domain , you can add that in the authorized domains section.

Creating the AuthProvider

Create a AuthContext.js file in the contexts folder and paste the following code snippet.

import React, { useContext, useState, useEffect } from "react";
import { auth } from "./firebase";
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  const signInWithGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider)
      .then((res) => {
      .catch((err) => {

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
    return unsubscribe;
  }, []);

  const value = {

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
Enter fullscreen mode Exit fullscreen mode

Wrapping the App with the AuthProvider

Modify your root.jsx file like given below, by wrapping the Outlet component with the AuthProvider component.

import {
} from "remix";
import styles from "./tailwind.css";
import { AuthProvider } from "./contexts/AuthContext";
import Header from "./components/Header";

export function links() {
  return [{ rel: "stylesheet", href: styles }];

export function meta() {
  return { title: "New Remix App" };

export default function App() {
  return (
    <html lang="en">
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
          <Header />
          <hr />
          <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
Enter fullscreen mode Exit fullscreen mode

We have completed the setup, and now we can use firebase authnetication in our project.
In my case I will have the Login Button on my Page Header. You can follow along with the code snippet below.
Note my Header component is present in app/components folder and I am using TailWind for styling.

// Header.js present in app/components folder
import { useAuth } from "~/contexts/AuthContext";

export default function Header() {
  const { signInWithGoogle, currentUser } = useAuth();
  return (
    <div className="max-w-3xl mx-auto p-5 flex justify-between items-center">
      {currentUser ? (
          className="border rounded-full h-10"
      ) : (
        <div onClick={signInWithGoogle}>Login</div>
Enter fullscreen mode Exit fullscreen mode

Now on clicking the Login button the user will be redirected to the Google sign in pop up page, and after signing in the user will be redirected to the Home page.

You can console.log the currentUser object to see the user details.

Top comments (1)

ats1999 profile image
Rahul kumar

I have built a tool for content creators to generate open graph images for social media posts.

see ->

Must check it out