{
    "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js",
    "path": "/blog/supertokens-extensions",
    "result": {"data":{"markdownRemark":{"html":"<blockquote>\n<p><em>It’s like config overrides on steroids—with actual reuse and structure.</em> - Internal Tester</p>\n</blockquote>\n<p>Today, we’re launching something we’ve been quietly working on for months: the SuperTokens Extensions System —our new plugin-based customization layer designed to make authentication extensibility powerful, consistent, and <em>finally</em> reusable.</p>\n<h2 id=\"why-we-built-it\" style=\"position:relative;\"><a href=\"#why-we-built-it\" aria-label=\"why we built it permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why we built it?</h2>\n<p>SuperTokens has always been flexible. Need to override a function? Go ahead. Want to tweak a recipe? Dive into the config. But as teams scale and customizations pile up, this model breaks down fast. Logic gets tangled inside initialization files. Sharing overrides becomes impossible. And worse, you end up re-implementing the same tweaks across projects.</p>\n<p>We asked ourselves: what if customizations could be <strong>modular</strong>, <strong>shareable</strong>, and <strong>cleanly separated</strong>?</p>\n<p>That’s what Extensions aim to solve.</p>\n<h2 id=\"what-are-supertokens-extensions\" style=\"position:relative;\"><a href=\"#what-are-supertokens-extensions\" aria-label=\"what are supertokens extensions permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What are SuperTokens Extensions?</h2>\n<p>Think of Extensions as plugins, but for auth.</p>\n<p>They let you:</p>\n<ul>\n<li>Override any function, API, or UI component in SuperTokens</li>\n<li>Inject custom routes or interface logic</li>\n<li>Intercept and transform configurations</li>\n<li>Define inter-plugin dependencies and compatibility</li>\n</ul>\n<p>No more wrestling with sprawling config files. With Extensions, you write code once, and reuse it everywhere.</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"16460799124188164000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied!\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`\nSuperTokens.init({\n\n// ...\n\nexperimental: {\n\nplugins: [emailDeliveryPlugin, captchaPlugin, auditLogger],\n\n},\n\n});`, `16460799124188164000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                <svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\">\nSuperTokens<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n\n<span class=\"token comment\">// ...</span>\n\nexperimental<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n\nplugins<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>emailDeliveryPlugin<span class=\"token punctuation\">,</span> captchaPlugin<span class=\"token punctuation\">,</span> auditLogger<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h2 id=\"-testing-the-system-what-we-learned\" style=\"position:relative;\"><a href=\"#-testing-the-system-what-we-learned\" aria-label=\" testing the system what we learned permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🧪 Testing the System: What We Learned</h2>\n<p>We invited developers—both seasoned SuperTokens users and complete newcomers—to put the system through its paces. Here’s what we learned from their feedback:</p>\n<h3 id=\"-what-worked\" style=\"position:relative;\"><a href=\"#-what-worked\" aria-label=\" what worked permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>✅ What Worked</h3>\n<ul>\n<li>\n<p><strong>Basic overrides are rock solid</strong>: Testers were able to override <code class=\"language-text\">signIn</code>, <code class=\"language-text\">signUp</code>, and other functions cleanly, using the new plugin structure.</p>\n</li>\n<li>\n<p><strong>Before/After execution pattern</strong> felt natural and powerful.</p>\n</li>\n</ul>\n<p>“It gives me the opportunity to do something before triggering a function and also after.” - Internal Tester</p>\n<ul>\n<li>\n<p><strong>Clean separation of logic</strong>: Developers appreciated moving override logic out of <code class=\"language-text\">SuperTokens.init</code> and into self-contained plugins. One tester remarked that it made the config “more readable and maintainable.”</p>\n</li>\n<li>\n<p><strong>Initial setup via CLI was smooth for most users</strong>:</p>\n<blockquote>\n<p>“Straightforward and convenient.” – Internal Tester</p>\n</blockquote>\n</li>\n</ul>\n<h2 id=\"next-steps-the-things-we-need-to-improve-on\" style=\"position:relative;\"><a href=\"#next-steps-the-things-we-need-to-improve-on\" aria-label=\"next steps the things we need to improve on permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Next Steps: The things we need to improve on</h2>\n<p>Despite the positive response, the launch surfaced a few key pain points:</p>\n<h3 id=\"1-documentation-needs-work\" style=\"position:relative;\"><a href=\"#1-documentation-needs-work\" aria-label=\"1 documentation needs work permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. Documentation Needs Work</h3>\n<ul>\n<li>\n<p>The initial guide suggested a trial by fire approach of “Try implementing a plugin”. This was not a real guide—it’s but more of a prompt.</p>\n</li>\n<li>\n<p>Multiple testers internal testers found our examples too complex with no proper onboarding.</p>\n</li>\n<li>\n<p>Inconsistency in terminology led to confusion. Terms like “plugin” and “extension” were used interchangeably.</p>\n</li>\n</ul>\n<p>“It was a ‘draw the rest of the owl’ moment.” – Internal Tester</p>\n<p><strong>Fixes underway</strong>:</p>\n<ul>\n<li>\n<p>We’re working on focused “before/after” code examples</p>\n</li>\n<li>\n<p>We’ll simplify plugin examples and add step-by-step walkthroughs</p>\n</li>\n<li>\n<p>Terminology is being standardized across the docs</p>\n</li>\n</ul>\n<h3 id=\"2-a-better-onboarding-experience\" style=\"position:relative;\"><a href=\"#2-a-better-onboarding-experience\" aria-label=\"2 a better onboarding experience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. A better onboarding experience</h3>\n<p>Many users didn’t know what to build or how to start. Even though the system worked, the entry point wasn’t clear.</p>\n<blockquote>\n<p>“Without prior SuperTokens knowledge, I had no idea what a plugin should do.” – Internal Tester</p>\n</blockquote>\n<p>We hear you—and we’re shipping onboarding tasks like:</p>\n<ul>\n<li>\n<p>“Build a captcha plugin from scratch”</p>\n</li>\n<li>\n<p>“Log all failed sign-ins to a database”</p>\n</li>\n<li>\n<p>“Inject custom UI components for password reset”</p>\n</li>\n</ul>\n<h3 id=\"3-simplifying-our-example-plugins\" style=\"position:relative;\"><a href=\"#3-simplifying-our-example-plugins\" aria-label=\"3 simplifying our example plugins permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. Simplifying our example plugins</h3>\n<p>Testers reported that the example plugins were a little obtuse and followed a paradigm that didn’t seem intuitive.</p>\n<p>We’re rewriting these examples to match what people expect: concise, instructional, and minimal.</p>\n<h2 id=\"-dev-experience-scores\" style=\"position:relative;\"><a href=\"#-dev-experience-scores\" aria-label=\" dev experience scores permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🔍 Dev Experience Scores</h2>\n<p>Here’s how testers scored the new system:</p>\n<table>\n<thead>\n<tr>\n<th>Category</th>\n<th>Avg. Score (out of 5)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Initial Setup Experience</td>\n<td>3.8</td>\n</tr>\n<tr>\n<td>Documentation Clarity</td>\n<td>2.6</td>\n</tr>\n<tr>\n<td>TypeScript Support</td>\n<td>5.0</td>\n</tr>\n<tr>\n<td>Error Handling</td>\n<td>4.0</td>\n</tr>\n<tr>\n<td>API Intuitiveness</td>\n<td>3.9</td>\n</tr>\n<tr>\n<td>API Flexibility</td>\n<td>4.8</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"-whats-next\" style=\"position:relative;\"><a href=\"#-whats-next\" aria-label=\" whats next permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🚧 What’s Next?</h2>\n<ul>\n<li>\n<p>📚 Launching guided plugin tasks for common use cases</p>\n</li>\n<li>\n<p>🛠️ Improving plugin typing and reference docs</p>\n</li>\n<li>\n<p>📦 Publishing more plugins to showcase the system</p>\n</li>\n<li>\n<p>🧪 Opening up for more real-world testing</p>\n</li>\n</ul>\n<hr>\n<h2 id=\"-want-to-help\" style=\"position:relative;\"><a href=\"#-want-to-help\" aria-label=\" want to help permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>🤝 Want to Help?</h2>\n<p>You can still be part of shaping this system. Whether you’re a power user or just curious, we’d love your feedback:</p>\n<ul>\n<li>\n<p>Try building a plugin</p>\n</li>\n<li>\n<p>Integrate an existing one</p>\n</li>\n<li>\n<p>Tell us what’s confusing, broken, or awesome</p>\n</li>\n</ul>\n<p>You can find our quick get <a href=\"https://gist.github.com/DBozhinovski/5e0cacb90e3507eb1444b394e8432568\" target=\"_blank\" rel=\"nofollow\">started guide here</a></p>\n<p>Please reach out to us if you have any questions through Discord.</p>\n<p>Let’s build the future of modular auth—together. 🔌</p>","frontmatter":{"date":"June 30, 2025","title":"SuperTokens Extensions: Customize Auth Your Way","cover":"supertokens-extensions.png","author":"Joel Coutinho","description":"Discover how SuperTokens Extensions bring modular, reusable, and powerful customization to authentication with a new plugin-based system."},"fields":{"slug":"/supertokens-extensions/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"18316c13-2a98-533c-b2f5-f70d2abd00d0","fields__slug":"/supertokens-extensions/","__params":{"fields__slug":"supertokens-extensions"}}},
    "staticQueryHashes": []}