Skip to content
Chandan Kumar

Remix Tutorial: Firebase Authentication

reactjs, firebase, remix1 min read

Remix Firebase Authentication A short video tutorial on integrating Firebase authentication in Remix. The integration process is quite similar to any other React application.

I am learning Remix, and these are my notes in this process. Implementing things in Remix has been a breeze so far.

You can read up or watch the hands-on video.

Back to the subject, we got to do the following

  1. Get FirebaseConfig from Firebase Console
  2. Install Firebase dependency
  3. Create React Component.
  4. Integrate Firebase library.

To add Firebase Auth into Remix app, we start off with a React Component, called FirebaseLogin. We wrap Firebase related calls into this component.

Note that this is not a pure component, and you may want to refactor it further.

Instead of using SignInWithEmailAndPassword we configure Google Authentication.

The heart of the implementation is

1initializeApp(firebaseConfig);
2const provider = new GoogleAuthProvider();
3const auth = getAuth();
4
5function googleLogin() {
6 signInWithPopup(auth, provider);
7}

The above lines of code initialize Firebase and GoogleAuthProvider. signInWithPopup method takes care of opening up the Google Sign-in window.

The final component would look something like below.

firebase-login.tsx
1import { initializeApp } from "firebase/app";
2import {
3 getAuth,
4 GoogleAuthProvider,
5 onAuthStateChanged,
6 signInWithPopup,
7 User,
8} from "firebase/auth";
9import { useState } from "react";
10import firebaseConfig from "~/config/firebase";
11
12initializeApp(firebaseConfig);
13const provider = new GoogleAuthProvider();
14const auth = getAuth();
15
16function googleLogin() {
17 signInWithPopup(auth, provider);
18}
19
20function logout() {
21 auth.signOut();
22}
23
24export default function FirebaseLogin() {
25 const [user, setUser] = useState<User | null>(null);
26 onAuthStateChanged(auth, (result) => {
27 result ? setUser(result) : setUser(null);
28 });
29 return (
30 <>
31 {!user && (
32 <button className="btn" onClick={googleLogin}>
33 Login
34 </button>
35 )}
36 {user && (
37 <>
38 {user.displayName}
39 <button className="btn" onClick={logout}>
40 Logout
41 </button>
42 </>
43 )}
44 </>
45 );
46}

Include FirebaseLogin component in the file where you want to link it up from. Github Source of the file. Browse all the files at https://github.com/ch4nd4n/practice/tree/remix-tailwind-firebase-auth/remix/firebase-auth

1import FirebaseLogin from "~/components/firebase-login";
2
3export default function Index() {
4 return (
5 <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
6 <h1>Firebase Authentication</h1>
7 <FirebaseLogin />
8 </div>
9 );
10}

Summary

DevEx of Remix is awesome. There are some quirks that I have run into, but, overall I love it. I am going to build a working application using Remix and keep posting follow-ups.

You may like the following

  1. Remix Run Tutorial: Mongodb connection with Mongoose

Comments

Copyleft. WTH
Theme by LekoArts