AngularFire with token authentication on Node backend server
- Run these commands to add the project locally:
$ git clone https://github.com/LukeSchlangen/nodeFire
$ cd nodeFire
$ npm install
-
Create a free Firebase account at https://firebase.google.com
-
Create a project from your Firebase account console
-
Add a connection to firebase on your front end
- Click the “Add Firebase to your web app” icon
- Copy the contents WITHOUT SCRIPT TAGS or the CDN from the resulting popup into
public/scripts/config.js
. It should look like this:
// Initialize Firebase
var config = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXX.firebaseapp.com",
databaseURL: "https://XXXXXXXXXXXX.firebaseio.com",
storageBucket: "XXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXX"
};
firebase.initializeApp(config);
-
Add a firebase service account to you node project
- Navigate to the Service Accounts tab in your project's settings page.
- Select your Firebase project.
- Copy your
databaseURL
from theAdmin SDK configuration snippet
. The line you need will look like this:databaseURL: "https://XXXXXXXXX.firebaseio.com"
. - Navigate to the
server/modules/decoder.js
file in the node project and replace the databaseURL. Only replace that line. It is inside of theadmin.initializeApp
:
admin.initializeApp({ credential: admin.credential.cert("./server/firebase-service-account.json"), databaseURL: "https://XXXXXXXXX.firebaseio.com" // replace this line with your URL });
- Return to firebase Service Accounts. Navigate to your project again if you have left it.
- Click the Generate New Private Key button at the bottom of the Firebase Admin SDK section of the Service Accounts tab.
- Rename the new JSON file to
firebase-service-account.json
and save it in theserver
folder of your application.
-
Return to Firebase console. Configure Google as an authentication provider for your Firebase project.
- In the Firebase console for your project (you may already be there from the previous step), click "Authentication" in left panel
- Click "Set Up Sign-In Method" button
- Select "Google"
- Click the "edit" icon
- Toggle Google to
on
-
Run
npm start
to run your application onlocalhost:5000
This is incredibly tedious the first time, but will automatically deploy your application with every future change. In order to deploy this project publicly, you will likely need to add your service account properties as environment variables. Here is how to do that with Heroku:
-
Convert
firebase-service-account
to.env
variables-
Add
dotenv
to you project throughnpm install --save dotenv
. -
Add a
.env
file to the root folder of your project. Copy this text into that file (note that there are no commas):FIREBASE_SERVICE_ACCOUNT_TYPE="XXXXXXXXX" FIREBASE_SERVICE_ACCOUNT_PROJECT_ID="XXXXXXXXX" FIREBASE_SERVICE_ACCOUNT_PRIVATE_KEY_ID="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" FIREBASE_SERVICE_ACCOUNT_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nA Whole lot of XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n-----END PRIVATE KEY-----\n" FIREBASE_SERVICE_ACCOUNT_CLIENT_EMAIL="XXXXXXXXXXXXXXXX@XXXXXXXXX.iam.gserviceaccount.com" FIREBASE_SERVICE_ACCOUNT_CLIENT_ID="##################" FIREBASE_SERVICE_ACCOUNT_AUTH_URI="https://accounts.google.com/o/oauth2/auth" FIREBASE_SERVICE_ACCOUNT_TOKEN_URI="https://accounts.google.com/o/oauth2/token" FIREBASE_SERVICE_ACCOUNT_AUTH_PROVIDER_X509_CERT_URL="https://www.googleapis.com/oauth2/v1/certs" FIREBASE_SERVICE_ACCOUNT_CLIENT_X509_CERT_URL="https://www.googleapis.com/XXXXXXXXXXX.iam.gserviceaccount.com"
Replace every value from the right hand side of the equal sign inside of quotes in the
.env
file with the corresponding secret key from yourfirebase-service-account.json
file:{ "type": "XXXXXXXXX", "project_id": "XXXXXXXXX", "private_key_id": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "private_key": "-----BEGIN PRIVATE KEY-----\nA Whole lot of XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n-----END PRIVATE KEY-----\n", "client_email": "XXXXXXXXXXXXXXXX@XXXXXXXXX.iam.gserviceaccount.com", "client_id": "##################", "auth_uri": "https://accounts.google.com/o/oauth2/auth", "token_uri": "https://accounts.google.com/o/oauth2/token", "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", "client_x509_cert_url": "https://www.googleapis.com/XXXXXXXXXXX.iam.gserviceaccount.com" }
-
Navigate to
server/modules/decoder.js
. Replace the reference to yourfirebase-service-account.json
with an object that refers to all of your.env
variables.admin.initializeApp({ credential: admin.credential.cert("./server/firebase-service-account.json"), databaseURL: "https://my-firebase-app.firebaseio.com" // you replaced this line earlier });
Now becomes
admin.initializeApp({ credential: admin.credential.cert({ "type": process.env.FIREBASE_SERVICE_ACCOUNT_TYPE, "project_id": process.env.FIREBASE_SERVICE_ACCOUNT_PROJECT_ID, "private_key_id": process.env.FIREBASE_SERVICE_ACCOUNT_PRIVATE_KEY_ID, "private_key": process.env.FIREBASE_SERVICE_ACCOUNT_PRIVATE_KEY, "client_email": process.env.FIREBASE_SERVICE_ACCOUNT_CLIENT_EMAIL, "client_id": process.env.FIREBASE_SERVICE_ACCOUNT_CLIENT_ID, "auth_uri": process.env.FIREBASE_SERVICE_ACCOUNT_AUTH_URI, "token_uri": process.env.FIREBASE_SERVICE_ACCOUNT_TOKEN_URI, "auth_provider_x509_cert_url": process.env.FIREBASE_SERVICE_ACCOUNT_AUTH_PROVIDER_X509_CERT_URL, "client_x509_cert_url": process.env.FIREBASE_SERVICE_ACCOUNT_CLIENT_X509_CERT_URL }), databaseURL: "https://my-firebase-app.firebaseio.com" });
-
In the
server/app.js
file, addrequire('dotenv').config();
near the top of the file (as the first line is ideal)
-
-
Deploy to Heroku
- Create an Heroku account.
- Create a new Heroku Application.
- Under the
Settings
tab, in theConfig Variables
section, selectReveal Config Vars
. Here you will need to add every configuration variable to the list (everything on the left side of the equals sign in your.env
file is the key, everything on the right side is the value) - Under the
Deploy
tab, in theDeployment Method
section, selectGithub
. Connect to the Github repository with your application. - In the
Manual Deploy
section, clickDeploy Branch
to deploy for the first time.
-
Update firebase to allow another domain
- Return to the firebase console and select your current project.
- If the link from the step above doesn't navigate you there automatically, navigate to authentication in the left hand navigation and select
SIGN-IN MMETHOD
- Scroll down to the
OAuth redirect domains
section and click theADD DOMAIN
button - Add the new domain that your site is being hosted on, likely something like
https://rushing-waterfall.herokuapp.com/
- The repository is open to contribution from all interested developers. Kindly send us Pull Requests with explanation as to what changes you have done.
- Also, you can write to us by opening an Issue and also solve a current issue if possible.
- The software is registered under the MIT License