This is a simple plugin for workbox strategies which adds an Authorization: Bearer
header with the return value from firebase.User.getIdToken(true)
to the Request if a firebase User is authenticated (i.e. firebase.auth.Auth.onAuthStateChanged()
returns a firebase.User
).
CAUTION: Be aware that request authorization happens before the response is passed to the caching strategy.
Please plan accordingly (e.g. a cache first strategy might serve authorized content to non authorized users).
Use the module if you are building your service worker using a bundler.
-
Add the dependency:
npm i workbox-firebase-auth // or yarn add workbox-firebase-auth
-
Import the initialization helper and use it to initialize firebase in the service worker.
Import the plugin and use it for your strategies.Example:
import { registerRoute } from 'workbox-routing/registerRoute.mjs'; import { NetworkFirst } from 'workbox-strategies/NetworkFirst.mjs'; import { initializeFirebase, Plugin as FirebaseAuthPlugin } from 'workbox-plugin-firebase-auth'; initializeFirebase({ config: { /* your firebase config */ }, services: ['messaging'] }) // `firebase` is now available in worker scope firebase.auth() firebase.messaging() registerRoute( /\/api\/.*/, new NetworkFirst({ cacheName: 'authorizedApi', plugins: [ new FirebaseAuthPlugin(), ], }), );
If you are using workbox-sw to import workbox, you can use the unpkg CDN to import the plugin.
It will then be available under the global variable WorkboxFirebaseAuth
.
Example:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js',
'https://unpkg.com/[email protected]/lib/plugin.umd.js'
)
WorkboxFirebaseAuth.initializeFirebase({
config: { /* your firebase config */ },
services: ['messaging']
})
// `firebase` is now available in worker scope
firebase.auth()
firebase.messaging()
workbox.routing.registerRoute(
/\/api\/.*/,
new workbox.strategies.NetworkFirst({
cacheName: 'authorizedApi',
plugins: [
new WorkboxFirebaseAuth.Plugin(),
],
}),
)
If your service worker is hosted firebase hosting, associated with the firebase app you use to authorize users, you don't have to specify any options (the helper will load the firebase SDK from reserved URLs).
Otherwise the config
parameter is REQUIRED.
Type: object
Required: If your service worker is NOT hosted on firebase hosting or if you use a different app to authorize users.
The firebase config object from the app that you use to authorize your users.
Type: string
(Firebase version)
Default: 7.19.1
This option can be used to specify the firebase version to use.
Type: string[]
Default: []
This option can be use to load additional firebase services.
Available services are: (see: Reserved URLs)
'auth'
(always included)'analytics'
'firestore'
'functions'
'messaging'
'storage'
'performance'
'database'
'config'
Type: boolean
Default: false
If true the plugin will await the fetch to go through and check if the response has a 401 status before attaching the authorization and resending the request.
Note: Please make sure your server responds to unauthorized requests with a 401 status code, so that the plugin can correctly identify authorization failures.
This key can be used to specify additional constraints on top of the route matcher.
Type: string | string[]
Default: ['*']
This can be used to authorize only requests that accept certain types of responses (e.g. application/json
)
Note: This simply matches the entries from the
Accept
request header against the passed array/string.
Group matching is supported (e.g.text/*
will matchtext/html
,text/plain
andtext/csv
)
Type: boolean
Default: false
Only allow requests to secure origins (https://
or localhost
) to be authorized.
Type: boolean
Default: true
Only allow requests to the same origin as the service worker to be authorized.
Type: (string | RegExp)[]
Default: []
Paths to ignore when authorizing requests.
Note: Checks against the pathname of the request (e.g.
/api/some-resource
)
If the argument is astring
a request will be ignored if the pathname starts with thatstring
.
If the argument is aRegExp
a request will be ignored if the pathname matches theRegExp
.