DEV Community: Ahmed Sulaiman

Cookie-based login for Chrome extensions with Supabase

Ahmed Sulaiman — Wed, 18 Jun 2025 16:59:09 +0000

I recently built a Chrome extension for Katalog, the audio-first read-it-later app. It's similar to Pocket, but focused on listening to the articles you save. When users find an interesting piece of content, they can save it with the extension. Katalog then parses it and generates optimised audio narration.

I needed the extension to recognize users who were already logged into the web app, without making them log in again. I also wanted to avoid duplicating the authentication flow or storing tokens in multiple places. Here's how I approached it, what worked, and what I'd do differently next time.

1. Why I chose cookie-based auth

I tried a few different approaches before settling on cookie-based authentication. At first, I considered integrating the Supabase SDK directly into the extension, or building a custom login flow inside the extension. Both options felt too heavy and required me to manage tokens separately from the web app.

Instead, I realized I could just check for the presence of the Supabase auth cookies that are set when a user logs into the web app. If those cookies exist, the extension can assume the user is authenticated. This way, I could reuse the existing login flow and avoid building extra UI or logic.

2. Architecture overview

Here’s a simple diagram of how things fit together:

+-------------------+         +-------------------+         +-------------------+
|                   |         |                   |         |                   |
|   Chrome          |  <----> |   Web App         | <-----> |   Supabase        |
|   Extension       |         |   (React, Magic   |         |   (Auth, DB)      |
|                   |         |    Link Auth)     |         |                   |
+-------------------+         +-------------------+         +-------------------+
        |                              ^
        |                              |
        |   (Checks for Supabase       |
        |    cookies on web app        |
        |    domain)                   |
        +------------------------------+

The extension checks for Supabase cookies on the web app’s domain.
If authenticated, it calls a web app endpoint (e.g., /api/parse-article) to perform actions.
The web app handles authentication and talks to Supabase.

3. Setting up Supabase auth in the web app

I use Supabase's Magic Link authentication in the web app that I built with React Router v7 (framework mode). The web app also uses server-side rendering, so I handle authentication with middleware that intercepts requests and checks for Supabase cookies in the headers.

You can set up Supabase authentication for SSR with this guide. The important part is that Supabase sets its own cookies when a user logs in. You don't need to do anything special in the extension to create or manage these cookies.

4. Chrome extension: cookie detection

The core of the authentication check happens in the background script. Here’s the function I use to check for the presence of Supabase’s auth cookies:

// background.ts
async function hasAuthCookies(domain: string): Promise<boolean> {
  const cookies = await browser.cookies.getAll({ domain });
  const authCookies = cookies.filter((cookie) =>
    // These env vars are set to the standard Supabase cookie names
    cookie.name.includes(import.meta.env.VITE_KATALOG_AUTH_TOKEN_COOKIE) ||
    cookie.name.includes(import.meta.env.VITE_KATALOG_AUTH_TOKEN_CODE_VERIFIER_COOKIE)
  );
  return authCookies.length > 0;
}

I rely on environment variables for the cookie names, but these are just the defaults from Supabase. You can inspect these cookies in the browser's storage after logging in. Since I'm using Vite Web Extension plugin, I store these variables in a .env file. Vite automatically loads any environment variables prefixed with VITE_, making them available through import.meta.env in your code.

# .env
VITE_KATALOG_AUTH_TOKEN_COOKIE=sb-access-token
VITE_KATALOG_AUTH_TOKEN_CODE_VERIFIER_COOKIE=sb-refresh-token

5. Manifest and permissions

Here’s the relevant part of my manifest.json for Chrome:

{
  "manifest_version": 3,
  "name": "Katalog - Save any article to listen later",
  "version": "0.0.3",
  "permissions": ["activeTab", "tabs", "cookies"],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "background": {
    "service_worker": "src/background.ts"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["src/content.ts"]
    }
  ]
}

⚠️ An important note: I ran into issues when I tried to restrict host_permissions to just my web app’s domain. Chrome wouldn’t return the cookies I needed. Only after allowing access to all domains did it work. This feels like a bug in Chrome’s extension API. I couldn’t find any alternatives. However, as long as you describe the intent for using such broad host_permissions clearly when submitting the extension, I haven’t had any issues with publishing updates.

6. The login flow

When a user clicks the extension icon, the extension checks for the auth cookies. If they’re missing, it opens the login page in a new tab. I added a query parameter so the login page can show a message specific to extension users.

// background.ts
if (!hasAuth) {
  await browser.windows.create({
    url: import.meta.env.VITE_KATALOG_BASE_URL + "login?browser-extension=true",
    focused: true,
    type: "normal",
  });
}

Right now, there’s no way for the extension to know immediately when the user finishes logging in. You have to click the extension icon again after logging in to save the current URL. I’d like to improve this in the future, maybe by using browser messaging or a custom event.

7. Content script and UX

When the extension is used on a page, it injects a content script that displays a floating element. This shows the progress as the article is being parsed and saved. I kept this UI minimal on purpose—no extra popups or login prompts.

8. Server-Side: CORS and Credentials

On the server side (web app), I had to make sure that credentials are allowed in CORS headers. Here’s a snippet from my Express server setup:

// server.js
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Credentials", "true");
  // ...other headers
  next();
});

This is important so that the extension can make authenticated requests to the web app’s API endpoints.

9. Security and limitations

There are a few things to keep in mind with this approach:

The extension can only access cookies that aren’t HttpOnly. Supabase’s cookies are accessible in this way, but if you use a different auth provider, check their cookie settings.
By allowing access to all domains in host_permissions, you’re giving the extension broad access. This is something to be aware of, and you might want to review the permissions model if you’re building something more sensitive.
There’s no real-time notification to the extension when the user logs in. The user has to click the extension again after logging in.

10. What I’d improve next

I’d like to add a way for the extension to know when the user has finished logging in, maybe by using browser messaging or a custom callback.
I’d also like to tighten up the permissions if Chrome’s API allows it in the future.

11. Conclusion

This approach let me keep the extension simple and avoid duplicating authentication logic. I didn’t have to build a separate login UI or manage tokens in two places. If you’re already using Supabase (or any provider that uses cookies for auth), this is a lightweight way to add authentication to your extension.

Would you use cookie-based authentication for Chrome extensions? I'd love to hear your thoughts and feedback 🙌

13 places to find Beautiful Free Illustrations

Ahmed Sulaiman — Wed, 08 Jan 2020 10:31:31 +0000

I believe, engineers can make a beautiful design.

I’m an iOS\macOS developer by the background and also make all the designs in my company. Mostly I focus on the product design: defending users’ needs, finding the best solutions, initial prototyping, UX flow, screens. It’s all about making usable products and experiences.

Sometimes, I need to work with marketing design: banners for Christmas, gifs for Black Friday deals, illustration for our open-sources projects (like Awesome Design Tools) or new visuals to test on our marketing landing page… Oh, wow! That’s a lot of work. Luckily, I can grab some free SVG images & illustrations from very kind and talented people in our community. Then make custom changes and use them.

Thanks to all those designers, who allow engineers like me to overcome the struggle with creating custom illustrations.

I’m sure, readers of dev.to will find these illustrations sites very useful for the day-to-day work:

Open Doodles, Humaaans and Buttsss
It’s amazing free illustrations by Pablo Stanley. Let’s talk more about them.

Open Doodles is a set of hand-drawn vector illustrations. You can download the source files or play with the generator to create your own. While Humaaans is a library to mix-&-match illustrations of people. And you can also customize their positions, clothing, colors, and hairstyle.

Buttsss is the most daring collection of butt illustrations. Just have fun and use them on your pitch deck, presentations or marketing campaigns.

LukaszAdam Illustrations
It’s a weekly updated collection of vector art illustrations and icons. Made with love by a very kind and talented independent web designer, Lukasz Adam.

unDraw
I’m sure you heard about unDraw, a constantly updated collection of svg images made by Katerina Limpitsouni. You can find the images that fit your needs and download them in one click. On-the-fly color image generation is also available.

IRA Design
It will help you to create amazing illustrations, using hand-drawn sketch components. You can mix &match five available color gradients, customize different components (like characters, objects, and backgrounds) and download everything for free.

DrawKit
A cool collection of svg illustrations ever. All of them are made in two different styles, bright color & simple sketch. Free to use on your website, app, or project.

Freepik
A search engine that helps to locate high-quality photos, vectors, icons, illustrations and PSD files for their creative projects.

Ouch
This site helps creators who don’t draw overcome the lack of quality graphics. Just take a look at these unique illustrations in 20 different styles made by top Dribbble artists.

Pngtree
The largest png free resource platform. It has a million graphics resources made in different styles, like images, backgrounds, text effects and illustrations.

Wannapik
A huge collection of free illustrations, vector images, photos, and animations for any use. Just take a look!

Open source illustrations kit
This project was a #100daysChallenge for Vijay Verma, who was designing cool illustrations since 2016. Then Vijay decided to share it with all the design community!

Absurd Design
A series of illustrations that paradoxically combine absurdity and a deep sense of childishness and naivety. The main idea is to give people a chance to think and spark their creative imagination and artistic vision. I am sure, it’ll be interesting to use on your website or app :)

Final words

Let’s be good citizens on the tech community and make the wise use of prepared illustrations. So when you work with free illustration, follow these simple rules:

Make the illustration consistent with your brand voice.
Be open to check for inspiration in other designers’ work. Sites like Dribbble, Awwwards, or Mobbin can be very helpful.
Be brave. Combine illustrations, stock photos, frames (here you can find dozens of free stock photos). Sometimes it can give fast and good results:
Check for copyright. While most of the free illustration sites are copyright-free, it’s better to double-check.
Give the original author credit somewhere on your site. You can leave a link, put image source or just a mention in Twitter designers, who helped you:

// Detect dark theme var iframe = document.getElementById('tweet-1206670211862188033-636'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1206670211862188033&theme=dark" }

Thanks for reading and let’s support this great movement of open design.

The ultimate guide for mobile developers, who want to design

Ahmed Sulaiman — Thu, 26 Dec 2019 14:08:50 +0000

As a startup founder, one of the most common questions I'm asked is:

How can you do both design and development, as well as business tasks?

I'm an iOS & macOS developer first, having been coding since I was 13 y.o. However, currently, I'm doing all the design tasks for my startup — Flawless App. It's a tool for iOS developers to compare original designs with the real app in Xcode's iOS simulator. So I do UX research, website mockups, onboarding screens, ads, emails, presentations, and many other design-related things. 😱

A long time ago, we did have two brilliant designers working with us but unfortunately, it didn't work out for many reasons. Therefore, I decided to learn the basics of UX design back then. I didn't expect to become a UX and UI magician or usability research expert overnight. Rather I wanted to develop the essential skill-set for creating designs fast and efficiently enough to make users happy.

So, can a developer learn UX and UI design?

Well yes, we can learn anything we want. To help you get started, I will share some resources that helped me at the beginning of my journey: books, case studies, and tutorials.

Get the taste of design thinking

Everything in the world around us is designed by somebody. You sit on a chair, that somebody designed. You work on the laptop, where every corner has a reason to be that specific shape. You read Medium, which has a UI that was crafted by a team of designers. Every element of the real or virtual world was designed to make you carry out a specific action.

My dive into design started with the following classical articles and books. They will teach you to focus on design as a method of solving problems:

📕 Dieter Rams: 10 principles for good design

I wasn't even born when Dieter Rams, German iconic industrial designer, wrote this. It's a manifesto of design mission for any product or service.

Read every line carefully. Does your design meet those principles? Dieter Rams is 85 now and he is the man, who designed Braun coffeemaker, shaver, stereo, calculator, speakers, alarm clock, Oral-B toothbrush and many more.

Design should not dominate things, should not dominate people. It should help people. That's its role.

– Dieter Rams

📕 "The Design of Everyday Things" by Don Norman.

It's so popular, that you can even find Swift talk about clean code and API design articles based on ideas from this book!

The book covers design methodologies, basic psychological concepts, and usability. Norman deals mostly with the design of physical objects. He explores what makes the use of buildings, appliances, and technology easy or complicated. Norman shows the basic patterns, which are very well applied to the virtual touch screen of today's UIs.

Originally the book was published in 1988. If you decide to read the first edition, you'll find a lot of ancient tech stuff there (I loved it!). Back then, Norman predicted the success of iPads, tablet devices, and smartphones. You can also find updated versions, as Norman constantly adds to it. Alternatively, check out this brief Udacity course, "Intro to the Design of Everyday Things with Norman".

Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.

― Donald A. Norman, The Design of Everyday Things

📕 "100 Things Every Designer Needs to Know About People" by Susan Weinschenk

This is a light overview read of neuroscience and behavioral psychology from a designer's perspective. The book is divided into short chapters about how people see, read, remember, think, feel and form mental models. I found many new insights there! It's relatively fresh (2011), well-written and contains practical advice on using these 100 principles in your designs. However, reserve the time for research after reading the book.

📕 Last but not least is "Don't Make Me Think" by Steve Krug
It is an easy read with a focus on a common-sense approach to web usability. Some of the stuff may be obvious or also found published around different UX blogs (the book was republished & updated in 2013). But if you are a total newbie, you will enjoy it. You can read it in over a weekend or two, as Krug's writing style is really enjoyable!

Don't make me think. Make things obvious and self-evident, or at least self-explanatory. People scan; they don't read. People choose the first reasonable option. People muddle through things rather than figure them out.

― Steve Krug's Laws of Usability

Do you wish to learn more on how to hack a user's brain with a product design? Then I strongly recommend you read these articles too:

Mental Models and User Experience (2016). It's a great overview of mental models, why they are important for design and how we used to construct them. There are some links to "Design of Everyday Things" by Don Norman. So I would suggest you to read Norman's book first.
How Technology Hijacks People's Minds - from a Magician and Google's Design Ethicist (2016). I loved this cool article on how technology affects our daily life, what psychological principles are behind it and how we can fix it with good design. Beside interesting insights, this article proves how it is important to take every detail of your design seriously!
A behavioral approach to product design: Four steps to designing products with impact (2015). Step by step overview of behavior design principles with real-world examples. Also, you can find a lot of practical techniques how to achieve specific behavioral tasks with the design in this article.
Ask Less, Get More: The Behavioral Science of Limiting User Behavior (2016). I enjoyed this article a lot! It's a comprehensive study on how limits in your product can drive more users to do a specific action, complete a specific task or encourage a specific behavior. You can also find plenty of real-world examples there.
Why Product Thinking is the next big thing in UX Design (2015). Importance of product thinking and why it's so crucial to constantly talk to your users in order to understand their true needs.
Design for Humanity (2016). The article describes the emotional aspect of design decisions. And why we need to see the design through the emotional prism as well (instead of focusing on a practical part only).
Mobile UX Design - Best Practices, Constraints, and Working with Developers.

The design process starts with a good understanding of people and their needs. Overall, this was just a small collection of excellent resources, which you can use to understand the design before drawing your first UI. I will come back to you in a few weeks with the next part of this guide. Thanks for reading and happy learning!

There's no learning without trying lots of ideas and failing lots of times.

– Jonathan Ive

Special thanks to our friends & great designers, Alex Kukharenko and Anton Diatlov, for giving useful advice on our guide.