This project demonstrates how to use Firebase with Remix.

See the screen recording at ./screen_recording.gif or Open this example on CodeSandbox:

To run it, you need to either:

1. Create a Firebase Project
2. Enable Auth (with email) and Firestore
3. Add a Web App
4. Get the admin-sdk and Web API Key
5. Save them to SERVICE_ACCOUNT and API_KEY in the .env-file

1. Run npm run emulators in one terminal window
2. Run npm run dev in a second

When the SERVICE_ACCOUNT and CLIENT_CONFIG environment variables have not been set, npm run dev will default to using the local emulator.

When you run npm run emulators, an initial user is created with credentials [email protected]:password. This can be configured in firebase-fixtures/auth/accounts.json or via the emulator UI.

1. Follow the "Run against a Firebase Project" steps above if not done already
2. Install the Firebase CLI with npm i -g firebase-tools
3. Log in to the CLI with firebase login
4. Run firebase use --add and choose the Firebase project you want to deploy to
5. Deploy with firebase deploy

signIn returns a Firebase session-cookie-string, when sign-in is successfull. Then Remix cookieSessionStorage is used to set, read and destroy it.

signUp creates a user and calls sign-in to receive the session cookie.

requireAuth uses firebase-admin to verify the session cookie. When this check fails, it throws a redirect to the login page. Use this method to protect loaders and actions. The returned UserRecord can be handy to request or manipulate data from the Firestore for this user.

Requests to the Firestore are made using the firebase-admin-SDK. You need to check validity of your requests manually, since firestore.rules don't apply to admin requests.

converter and datapoint are utilities to allow typed Firestore data reads and writes.

• Firestore Data Converters for typing
• Firebase Session Cookies
• Remix cookieSessionStorage