gatsby-theme-firebase
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    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

    Install

    npm i gatsby-theme-firebase

    DownloadsWeekly Downloads

    58

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    43.4 kB

    Total Files

    47

    Last publish

    Collaborators

    • epilande