Token-Based Authentication using Service Workers and Workbox
A detailed guide for Service Workers auth with example
Service Workers give you many awesome capabilities like client-side caching, offline access, pushing notifications, and others you couldn’t imagine before. But definitely, their main feature is proxying HTTP requests.
In other words, using Service Workers it’s possible to intercept and mutate any request with Javascript in the browser.
Securing access to media files, such as images or videos can be done using a JSON Web Token (JWT). In this article, I’ll explain how to implement token-based authentication using Service Workers and Workbox.
Service Workers Auth
First, we’ll create a Service Worker file, sw.js. It’s recommended to put Service Workers files in the root directory, together with index.html . This file should be registered using the navigator.serviceWorker.register() method:
The Service Worker file is registered! In the next step, we have to proxy the request to the media files and inject the token. You are allowed to have two options:
- Use pure Service Worker setup
- Use Workbox setup
Pure Service Worker setup:
However, I suggest choosing the Workbox setup, as it provides a variety of powerful built-in features that you can leverage in your application.
Workbox Auth
Workbox is a set of JavaScript libraries that simplifies the process of building Progressive Web Apps (PWAs). It’s built on top of Service Workers and became the most common library for making PWA. The popularity of Workbox quickly grows:
This powerful library helps with service worker-based caching and offline functionality for web applications. It provides a set of pre-built service worker strategies, which can be customized to meet specific needs.
Workbox setup:
While there are multiple ways to integrate the library into your project, we will go with the easiest approach that does not require a build process. Also, we’ll create a custom plugin for authentication to reuse in other projects.
Perfect! I used a hardcoded string as the token value in my previous example but in the real application usually, we get this token from the server and put it somewhere in the browser.
Where to store token?
The main problem is that Workers have strong limitations in using browser storages. However, IndexedDB, a browser database, supports Service Workers. To simplify requests to IndexedDB, we’ll use idb-keyval , small, super simple, promise-based IndexedDB keyval store:
Firstly, define the token and put it into IndexedDB storage. Service Worker should be registered only after the token is added to storage:
Then import idb-keyval to the Service Worker file and pass the token value to auth request header:
Nicely done! The access token protects the image and video on this page!
Final example
Conclusion
Service Workers with Workbox it’s a great tool for creating PWA applications. Furthermore, you can proxy HTTP requests with it and authenticate any request, for example, with a JWT token.
🙏 Hope that you just read an interesting and helpful story.
👏 If you like it just send a clap, I’ll be very excited to see your reaction!
👆Follow me to be the first who will see my new articles.
Thanks and BR Oleksandr
