An example app using Firebase authentication in React & Express.
-
Set up a Firebase project at
https://console.firebase.google.com/
-
Select
Authentication
from the left hand menu and enableEmail/Password
- Obtain the necessary client credentials from Firebase. On the left hand Firebase menu, click the โ๏ธ(settings icon), then select
Project Settings
. In theYour apps
card, select a web app</>
, provide an app nickname and then copy the generated credentials. The credentials should have the form:
apiKey: "XXXX",
authDomain: "XXXX",
databaseURL: "XXXX",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX",
appId: "XXXX"
- Create a new file named
firebaseConfig.js
in the/client/src/config/
folder. Assign the credentials to a variable and export it asfirebaseConfig
. For example:
const firebaseConfig = {
// credentials here!
};
export default firebaseConfig;
-
The file is imported in
/client/src/App.js
on line 7. If the above instructions are followed, there is no need to change this line. -
Run the React app:
npm install
npm start
React app will be available on
localhost:3000
- Obtain the necessary server credentials from Firebase. On the left hand Firebase menu, click the โ๏ธ(settings icon), then select
Project Settings
and then theService accounts
tab. In theFirebase Admin SDK
click toGenerate new private key
. The credentials should have the form:
{
"type": "XXXX",
"project_id": "XXXX",
"private_key_id": "XXXX",
"private_key": "XXXX",
"client_email": "XXXX",
"client_id": "XXXX",
"auth_uri": "XXXX",
"token_uri": "XXXX",
"auth_provider_x509_cert_url": "XXXX",
"client_x509_cert_url": "XXXX"
}
These credentials contain a private key that should be kept secret (i.e. not shared or committed to Git)
-
Create a file named
firebaseKey.json
in/server/config/
and store the above credentials. -
In
/server/server.js
the credentials are required on line 15. If the above instructions are followed, there is no need to change this line. -
On line 20, the database URL will need to be updated. This URL will be available in the previously generated Firebase
Admin SDK configuration snippet
. -
Run the server
npm install
node server.js
Server will run on
localhost:3001
The server route '/
' will not be accessible without authenticating.