<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rahat Ali</title>
    <description>The latest articles on DEV Community by Rahat Ali (@rahat0942_).</description>
    <link>https://dev.to/rahat0942_</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4171707%2F60edbee9-20d1-4b58-94c7-275bb869cc92.webp</url>
      <title>DEV Community: Rahat Ali</title>
      <link>https://dev.to/rahat0942_</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rahat0942_"/>
    <language>en</language>
    <item>
      <title>Stop Rebuilding Auth: A Django + Vue 3 SaaS Starter Walkthrough</title>
      <dc:creator>Rahat Ali</dc:creator>
      <pubDate>Thu, 08 Oct 2026 16:03:59 +0000</pubDate>
      <link>https://dev.to/rahat0942_/stop-rebuilding-auth-a-django-vue-3-saas-starter-walkthrough-405o</link>
      <guid>https://dev.to/rahat0942_/stop-rebuilding-auth-a-django-vue-3-saas-starter-walkthrough-405o</guid>
      <description>&lt;p&gt;Every SaaS I've ever started began the same way: two weeks of login screens, password resets, CRUD endpoints, and permission checks — before writing a single line of the actual product. So I finally packaged my starter into a kit. Here's a walkthrough of the decisions inside it, with real code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this stack
&lt;/h2&gt;

&lt;p&gt;Django REST Framework on the backend, Vue 3 on the frontend. Not Next.js, not a full SPA build pipeline. The reasoning is boring on purpose: DRF is the fastest way to ship a correct API, and Vue via CDN means the frontend is one HTML file with zero build step. You can read the entire frontend in ten minutes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Email as the username
&lt;/h2&gt;

&lt;p&gt;Django's default &lt;code&gt;username&lt;/code&gt; field is a relic for SaaS. Every project I start, I replace it with email on day one — so the kit does it from the start:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;AbstractUser&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;username&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;None&lt;/span&gt;
    &lt;span class="n"&gt;email&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;EmailField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;email address&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;unique&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;full_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;full name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;150&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;blank&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;USERNAME_FIELD&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;email&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
    &lt;span class="n"&gt;REQUIRED_FIELDS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;full_name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

    &lt;span class="n"&gt;objects&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;UserManager&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Do this on day one or you'll be migrating it on day ninety — I've done both, day one is better.&lt;/p&gt;

&lt;h2&gt;
  
  
  Token auth, not sessions
&lt;/h2&gt;

&lt;p&gt;For a decoupled frontend talking to an API, DRF token auth is the pragmatic choice: the frontend stores the token, sends it as &lt;code&gt;Authorization: Token &amp;lt;key&amp;gt;&lt;/code&gt;, no CSRF dance, no session store to scale. For v1 of a SaaS it's the fewest moving parts that are still correct.&lt;/p&gt;

&lt;h2&gt;
  
  
  The pattern that actually matters: per-user permissions
&lt;/h2&gt;

&lt;p&gt;Every model gets an &lt;code&gt;owner&lt;/code&gt; foreign key to the user, and every viewset filters to &lt;code&gt;request.user&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ProjectViewSet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;viewsets&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;ModelViewSet&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;serializer_class&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;ProjectSerializer&lt;/span&gt;
    &lt;span class="n"&gt;permission_classes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;IsAuthenticated&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_queryset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;Project&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;owner&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;perform_create&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;serializer&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;serializer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;save&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;owner&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;get_queryset&lt;/code&gt; filters so a user can never even see another user's objects; &lt;code&gt;perform_create&lt;/code&gt; stamps ownership server-side so a malicious client can't claim someone else's records. Copy these two methods for every multi-tenant model. Sixteen passing tests cover the isolation, so you can refactor with confidence.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Vue 3 frontend: one file, zero build
&lt;/h2&gt;

&lt;p&gt;The whole frontend is a single &lt;code&gt;index.html&lt;/code&gt; with Vue 3 from a CDN: login/signup screens and a notes dashboard. No Vite, no build step. For an MVP dashboard, that's the right trade — when you outgrow it, the API is already decoupled.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's NOT in v1 (honest scope)
&lt;/h2&gt;

&lt;p&gt;No Stripe. No teams/organizations. No async. SQLite by default (Postgres-ready). V1 is the foundation every SaaS needs — auth, API, permissions, frontend, tests.&lt;/p&gt;

&lt;h2&gt;
  
  
  The kit
&lt;/h2&gt;

&lt;p&gt;I packaged all of this as &lt;strong&gt;DjangoVue Launchpad&lt;/strong&gt;: $29 one-time, unlimited projects, 30-day refund. &lt;a href="https://rahatalikhan.gumroad.com/l/djangovue-launchpad" rel="noopener noreferrer"&gt;https://rahatalikhan.gumroad.com/l/djangovue-launchpad&lt;/a&gt;&lt;/p&gt;

</description>
      <category>django</category>
      <category>vue</category>
      <category>python</category>
      <category>saas</category>
    </item>
  </channel>
</rss>
