This project demonstrates how to use Firebase with Remix.
To run this example, you either need to create a Firebase project or use the emulators:
- Create a Firebase project.
- Enable Auth (with email) and Cloud Firestore.
- Add a Web App with hosting.
- Copy
.env.example
to.env
. - Set the
API_KEY
value to the Web API Key, which can be obtained on the project settings page in your Firebase admin console. - Set
SERVICE_ACCOUNT
to the contents of your service account's private key JSON file:- Go to: Project > Project Settings > Service Accounts.
- Click "Create Service Account" or "Generate New Private Key" to download the JSON file.
- Run
npm run emulators
in one terminal window - 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.
- Follow the "Run against a Firebase Project" steps above if not done already
- Log in to the CLI with
npm run firebase -- login
- Run
npm run firebase -- use --add
and choose the Firebase project you want to deploy to - Deploy with
npm run firebase -- deploy
The "Login with Google" link will only work when running against a Firebase Project.
After the steps in "Run against a Firebase Project" have been completed:
- In the Firebase Console, navigate to Authentication > Sign-in method > Add new provider > Google. Make a note of the client ID and secret and add them to the .env file as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.
- In the Google Cloud Credentials Console, select the Web client (under OAuth 2.0 Client IDs) and the following as authorised redirects:
http://localhost:3000/auth/google
http://localhost:5002/auth/google
http://127.0.0.1:3000/auth/google
http://127.0.0.1:5002/auth/google
https://<projectid>.firebaseapp.com/auth/google
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.