Cloudflare Pages and Workers with Firebase Authentication

This is a long note for Cloudflare’s Pages and Workers with Firebase authentication. They are impressive tools that can speed up development processes. You must have background on Cloudflare Pages and Workers and also Firebase Authentication for this note.

Cloudflare Pages is a JAMStack Frontend. You can learn from here.

Cloudflare Pages

Cloudflare Workers is a serverless service from Cloudflare.

Cloudflare Workers®

Firebase Authentication is authentication service from Firebase. This can save your time for your authentication module.

Firebase

Diagram will be like this.

There will be 6 parts in this articles. 1. Firebase, 2. Cloudflare Pages, 3. Cloudflare Worker, 4. Local Test, 5. Pages Deployment, 6. Workers Deployment

Part 1 Firebase

Starting with set up Firebase Authentication. You can follow the tutorial in FIrebase Website.

Add Firebase to your JavaScript project | Firebase Documentation

Create Project in Firebase.

Select Authentication

Enable Email/Password and Google Sign-in providers in Firebase Project Setting.

Get configuration in Project Setting page.

Select WebApp

Copy firebaseConfig. You need this config later in your code.

Part 2 Cloudflare Pages

You need to create project in Github. Cloudflare only support deploy from Github or Gitlab. For easily setup process, you can clone from my Project.

GitHub - krisadas/pages: cloudflare pages test

After download example project from Github, go to project folder and run npm install to get all dependencies.

npm install

Then add firebase config. Your firebaseConfig should be in authentication.js in example project. Replace example config with the one you copy from firebase project.

authentication.js contains all the code to connect to firebase.

You can test your Pages project by run npm. You will see the site at http://localhost:3000/

npm run start

Part 3 Cloudflare Workers

Next step is setting up your Workers. Workers is unlike Pages. It does not deploy from Github when commit your code. It uses wrangler to build and deploy. You can study more from these links.

https://developers.cloudflare.com/workers/examples

https://github.com/cloudflare/worker-template-router

First create Cloudflare Workers service.

Set up your service name. In this article is black-math-6702

You will get Workers URL here.

Go to your Workers Overview Page and copy your account id. You will need it to config in wrangler.toml file.

You can download the example from my repo.

GitHub - krisadas/workers: Cloudflare Workers

After download my workers example, go to wrangler.toml file. Change the config to yours.

You can create your own webpack config file and use it, if you want.

You must install wrangler before go to next step. You can follow the tutorial below.

https://developers.cloudflare.com/workers/get-started/guide

You can test your config by run wrangler dev.

wrangler dev

Then go to http://localhost:8787 to see the result.

index.js use itty-router for routing request. It has validateToken() function to validate pass in token with google public key.

When user request at GET /users we extract token from header. Then, we pass token to function validateToken(). The function return decoded jwt if token is valid.

You can try access http://localhost:8787/users

Without token in headers, you will find this error.

Part 4 Local Test

Start Pages with command “npm run start” at Pages path.

npm run start

Start Workers with command “wrangler dev” at Workers path.

wrangler dev

Go to http://localhost:3000

Try to register and login to see if it work.

If you register success, it will appear in your firebase project.

You can test login.

At “Home” you can see, It will validate token. If pass, it will display user info from token.

Part 5 Pages Deployment

Create project on Cloudflare Pages.

Select your Github account and project.

Set Project name and branch to build. Select framework. I use Create React App in this note.

Add Environment Variables. In this article, you must set Cloudflare Workers URL.

After you Save and Deploy, Cloudflare will load your project from Github and build.

If built success, Cloudflare will generate URL for your pages. You can access your pages from this URL. You might need to wait for several minutes before access your site.

Next time when you commit your code, Cloudflare will automatically build for you.

You can test your site at the link that Cloudflare Pages generate for you. But wait! we need to deploy Workers.

Part 6 Workers Deployment

You can deploy to Cloudflare Workers by wrangler command “wrangler publish” at your worker path

wrangler publish

I hope it work out for you. Thank you for reading til the end.

This note might not be thoroughly explain Pages, Workers and Firebase Authentication. You need background in all these systems before try these integration.