Skip to content

epilande/gatsby-theme-firebase

Repository files navigation

gatsby-theme-firebase πŸ”₯

A Gatsby Theme for adding Firebase to your application.

GitHub npm Netlify Status

Why?

You want to add Firebase to your Gatsby application. You want a login page that "Just Works". You want to make life easier with React Hooks and you want a solution that's simple and extendable.

This Gatsby Theme gives you all of that and more! Take full advantage of Firebase + Gatsby without the hassle of setting it up!

What's in the box?

DEMO

Installation

$ npm install --save gatsby-theme-firebase

Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-firebase",
      options: {
        credentials: {
          apiKey: process.env.FIREBASE_API_KEY,
          authDomain: process.env.FIREBASE_AUTH_DOMAIN,
          databaseURL: process.env.FIREBASE_DATABASE_URL,
          projectId: process.env.FIREBASE_PROJECT_ID,
          storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
          messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
          appId: process.env.FIREBASE_APP_ID,
        },
        loginPath: "/login",
        loginRedirectPath: "/dashboard",
        socialLogins: ["google", "twitter", "facebook", "github"],
      },
    },
  ],
};

Theme options

Key Default Required Description
credentials undefined true Configure Firebase credentials.
loginPath undefined false Set login page path. If undefined, no login page will be created.
loginRedirectPath / false On successful login, redirect to this path.
socialLogins [] false Enable social logins in the login form. e.g. ['google', 'twitter', 'facebook', 'github']

Just want the login form?

Don't like the login page layout?

No problem! Don't set the loginPath theme option (this will prevent the page from being created). Then use the <FormState.Provider /> and <Form /> component and embed it in any page/layout.

import { Form, FormState } from "gatsby-theme-firebase";

const CustomLogin = () => (
  <Layout>
    <h1>Custom Login</h1>
    <FormState.Provider>
      <Form
        onLoginSuccess={user => {
          navigate("/profile");
        }}
        onSignUpSuccess={user => {
          saveUserToDatabase(user).then(() => {
            navigate("/welcome");
          });
        }}
        onResetSuccess={() => {
          setMessage("Email sent!");
        }}
      />
    </FormState.Provider>
  </Layout>
);

To see an example, check out the login modal: demo site | demo/src/components/LoginModal.tsx

Just want the social login buttons?

Don’t need a full login form and only need social logins?

No problem! Use the <SocialLogins /> component:

import { SocialLogins } from "gatsby-theme-firebase";

<SocialLogins
  onSuccess={user => {
    doSomethingWith(user);
  }}
/>;

To see an example, check out social logins: demo site | demo/src/pages/social-logins.tsx

Hooks

useAuth

const { isLoading, isLoggedIn, profile } = useAuth();

Example:

import { auth, useAuth } from "gatsby-theme-firebase";

export default () => {
  const { isLoading, isLoggedIn, profile } = useAuth();
  return (
    <div>
      {isLoading && <p>Loading..</p>}
      {profile && <p>Hello {profile.displayName}</p>}
      {isLoggedIn && <button onClick={() => auth.signOut()}>Sign Out</button>}
    </div>
  );
};

source: gatsby-theme-firebase/src/hooks/useAuth.ts

useFirestoreDoc

const [data, isLoading, error] = useFirestoreDoc(docRef);

Example:

import { firestore, useFirestoreDoc } from "gatsby-theme-firebase";

export default () => {
  const [data, isLoading] = useFirestoreDoc(
    firestore.collection("tasks").doc("abc"),
  );
  return (
    <div>
      {isLoading && <p>Loading..</p>}
      {data && <div>{data.task}</div>}
    </div>
  );
};

source: gatsby-theme-firebase/src/hooks/useFirestoreDoc.ts

useFirestoreQuery

const [data, isLoading, error] = useFirestoreQuery(query);

Example:

import { firestore, useFirestoreQuery } from "gatsby-theme-firebase";

export default () => {
  const [tasks, isLoading] = useFirestoreQuery(
    firestore.collection("tasks").orderBy("priority", "asc"),
  );
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ol>
          {tasks.map(task => task && <li key={task._id}>{task.task}</li>)}
        </ol>
      )}
    </div>
  );
};

source: gatsby-theme-firebase/src/hooks/useFirestoreQuery.ts

Shadowing

Gatsby Themes has a concept called Shadowing, which allow users to override a file in a gatsby theme.

To start shadowing, create a folder with the theme name gatsby-theme-firebase in your project's src directory.

Now you're able to override any file in the theme.

For example, if you want to override the handleSignUpSuccess function, create a file:

src/gatsby-theme-firebase/firebase/auth/handleSignUpSuccess.js

Then do whatever you want in that file (i.e. save the user to the database). Just make sure the return type is the same as the original, which in this case is a function.

// Shadowing handleSignUpSuccess.js
import { navigate } from "gatsby";

export default async ({ user, loginRedirectPath, setErrorMessage }) => {
  try {
    await saveUserToDatabase(user);
    navigate(loginRedirectPath);
  } catch (error) {
    setErrorMessage(error.message);
  }
};

Now the login page will pick up the shadowed file and use that handler instead of the default one.

Here's a demo of handleLoginSuccess being shadowed: demo/src/gatsby-theme-firebase/firebase/auth/handleLoginSuccess.js

Demos

Dev

Set up env variables

Go to the demo application directory, copy the .env.example -> .env.development. Fill in the required environment variables before starting up the client dev server.

Quick start

This project uses yarn workspaces. Once you've set up the env variables, you can run the following to start the dev server.

$ yarn && yarn dev

Available Scripts

$ yarn dev

This will run the demo app in development mode.

Navigate to http://localhost:8000 to view it in the browser.

$ yarn build

This will build the demo app for production.

Outputs to the demo/public folder.

Credits