Remix Tutorial: Firebase Authentication
— reactjs, firebase, remix — 1 min read
New post on server side
You can read up or watch the hands-on video.
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
- Get FirebaseConfig from Firebase Console
- Install Firebase dependency
- Create React Component.
- 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.
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 Login34 </button>35 )}36 {user && (37 <>38 {user.displayName}39 <button className="btn" onClick={logout}>40 Logout41 </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