firebase.server.tsx

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();

export const logOut = () => signOut(auth);

export const getLoggedUser = () => {
  return new Promise((res, rej) => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        res(user);
      } else {
        rej(null);
      }
    });
  });
};

export const loginWithEmail = (email: string, password: string) => {
  return signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => userCredential.user)
    .catch((err) => console.error(err));
};

export default app;

login.tsx

import { ActionFunction, redirect } from '@remix-run/node';
import { loginWithEmail } from '~/utils/firebase.server';

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const email = formData.get('email');
  const password = formData.get('password');
  if (!email || !password) {
    return null;
  }
  const user = await loginWithEmail(email as string, password as string);
  if (user) {
    return redirect('/protected');
  }
  return null;
};

export default () => {
  return (
    <section
      style={{
        display: 'grid',
        placeItems: 'center',
        height: '95vh',
      }}
    >
      <form method="post">
        <label htmlFor="email" style={{ display: 'block' }}>
          <input id="email" name="email" placeholder="Escribe tu email" />
        </label>
        <label htmlFor="password" style={{ display: 'block' }}>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="Escribe tu contraseña"
          />
        </label>
        {/* default of a button is submit */}
        <button>submit</button>
      </form>
    </section>
  );
};

protected.tsx

import { ActionFunction, LoaderFunction, redirect } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getLoggedUser, logOut as signOut } from '~/utils/firebase.server';

export const loader: LoaderFunction = async () => {
  const user = await getLoggedUser();
  if (!user) {
    return redirect('/login');
  } else {
    return { user };
  }
};

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const logOut = formData.get('logOut');
  if (logOut) {
    await signOut();
    return redirect('/login');
  }
  return null;
};

export default () => {
  const { user } = useLoaderData();
  return (
    <section>
      <h2>Bienvenido {user.email}</h2>
      <form method="post">
        <button name="logOut" value="logOut">
          Cerrar sesión
        </button>
      </form>
    </section>
  );
};