https://github.com/clerk/clerk-firebase-starter

Official guide on how to use Clerk.dev with Firebase
https://github.com/clerk/clerk-firebase-starter

authentication clerk firebase react

Last synced: 3 months ago
JSON representation

Official guide on how to use Clerk.dev with Firebase

• Host: GitHub
• URL: https://github.com/clerk/clerk-firebase-starter
• Owner: clerk
• Archived: true
• Created: 2021-06-24T15:12:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-28T15:23:22.000Z (over 2 years ago)
• Last Synced: 2024-04-26T01:34:11.944Z (7 months ago)
• Topics: authentication, clerk, firebase, react
• Language: TypeScript
• Homepage: https://fir-clerk.web.app/
• Size: 654 KB
• Stars: 10
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Clerk - Firebase example repo



This repo shows an example use case for how you can setup Firebase with [Clerk](https://clerk.dev) as a custom authentication provider.

[![Open in VS Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/clerkinc/clerk-firebase-starter)

## Premium Recipes App

The **Premium Recipes App** allows only authenticated users to add their favorite recipes on the site to be shared with all other logged in members.

The app is live at https://fir-clerk.web.app/. Check it out!



## Under the hood

This example app uses:

- [Clerk](https://clerk.dev) as an authentication provider.

- [Cloud Firestore](https://firebase.google.com/products/firestore) for data storage.

Reading the `/recipes` collection is only possible for authenticated users based on Firebase rules.

## Where the magic happens

The Clerk integration works by providing a custom authentication token to the Firebase `signInWithCustomToken` auth method. The only thing you need to do on the application level can be seen at [the useRecipes file](./client/hooks/useRecipes.ts#16).

To get a better understanding of the integration, you can check out our [documentation](https://docs.clerk.dev/frontend/integrations/firebase) on the integration.

## Running the starter

To run the example locally you need to:

1. Sign up for a Clerk account at http://clerk.dev/.

2. Turn on and [configure the integration](https://docs.clerk.dev/frontend/integrations/firebase) on your Clerk dashboard.

3. Setup the required Clerk Frontend API variable from your Clerk project as shown at [the example env file](./.env.example).

4. Replace the Firebase [configuration file](./config/firebase.web.ts) with you own project settings file.

5. Check the instructions on how to setup your Firebase project for a similar setup at the specific [setup document](./docs/firebase_setup.md).

6. `yarn` to install the required dependencies.

7. `yarn dev` and you are good to go.

## Contact

If you have any specific use case or anything you would like to ask, please reach out!