Sample app that demonstrates how to authenticate with Firebase using Okta.
This sample has two parts:
- A Node.js backend that “exchanges” Okta access tokens for Firebase custom authentication tokens. The backend is intended to be deployed as a Cloud Function, but because its just an Express.js app, you can also run on it on your own infrastructure.
- A web frontend that signs users in with Okta, gets a Firebase custom authentication token from your backend, and authenticates with Firebase using the custom token.
Before you try the demo with the Firebase emulator suite or deploy it to Firebase Hosting and Cloud Functions, set up your Okta and Firebase projects, and install the Firebase CLI tool:
-
On the Okta Developer site:
- Sign in or sign up.
- Take note of your Org URL (top-right of the dashboard) for later.
- Create a user with a password in your Okta project. (This demo doesn't have a sign-up flow.)
- On the Applications page, add a Single-Page App:
- Set the Base URIs to
http://localhost:5000
. - Set the Login redirect URIs to
http://localhost:5000
. - Enable the Authorization Code grant type.
- Click Done. Take note of the app's Client ID for later.
- Set the Base URIs to
- In API > Trusted Origins, confirm that
http://localhost:5000
is listed, with CORS and Redirect enabled.
-
In the Firebase console:
- Create a new Firebase project. Take note of your project ID for later.
- On the Project Overview page, add a new web app. Be sure Also set up Firebase Hosting for this app is selected.
- On the Project Settings page, open the Service Accounts section and take note of your Admin SDK service account ID (it looks like an email address). If you plan to try the demo in the emulator, also generate and download a service account key file.
-
If you don't already have a Node.js 10 (or newer) environment, install Node.js.
-
If you haven't already installed the Firebase CLI tool, do it now:
$ npm install --global firebase-tools
-
Make sure the Firebase CLI tool is set to use your Firebase project:
$ cd functions-samples/okta-auth okta-auth$ firebase login okta-auth$ firebase use <YOUR_FIREBASE_PROJECT_ID>
-
Run
setup.js
from the Firebase project directory:okta-auth$ node setup.js
The script will prompt you for some of your Okta and Firebase configuration values and create configurations files from them. The script won't overwrite existing files.
-
Start the emulators:
okta-auth$ firebase emulators:start
-
Open the web app:
http://localhost:5000
.
-
Upgrade your Firebase project to the Blaze (pay as you go) plan. The Blaze plan is required to access external services (in this case, Okta) from Cloud Functions.
-
Make sure the Firebase CLI tool is set to use your Firebase project:
$ cd functions-samples/okta-auth okta-auth$ firebase login okta-auth$ firebase use <YOUR_FIREBASE_PROJECT_ID>
-
Optional: If you have configuration files from local testing, delete them:
okta-auth$ rm public/okta-config.js ; rm functions/.env ; rm .runtimeconfig.json
-
Run
setup.js -d
from the Firebase project directory. The-d
flag configures the web app and backend for deployment.okta-auth$ node setup.js -d
The script will prompt you for some of your Okta and Firebase configuration values, create configurations files from them, and set some Cloud Funcions environment settings. The script won't overwrite existing files or Cloud Functions environment settings.
-
Deploy the project:
okta-auth$ firebase deploy
-
In the Google Cloud console:
- Enable the IAM Service Account Credentials API.
- On the Cloud Functions
page,
- Click the name of your Cloud Function (
api
) to open the Function Details page. - Click Edit.
- Set the service account to your Admin SDK service account.
- Click Deploy to redeploy your Cloud Function to run as the updated service account.
- Click the name of your Cloud Function (
-
Open the web app at:
https://<YOUR_FIREBASE_PROJECT_ID>.web.app