Home

Blog

How to Secure Your SaaS with Supabase: A Developer’s Guide

Security isn’t just about keeping hackers out—it’s about making authentication seamless for users while scaling effortlessly with your SaaS.

In Building Scalable SaaS with Next.js, we covered how robust authentication plays a crucial role in scaling your SaaS.

Now, let’s dive deeper into why Supabase is the perfect solution for handling authentication in Next.js applications i.e. without the headaches.

1. Why Supabase? The Open-Source Firebase Alternative

When building a SaaS, you need authentication that is flexible, scalable, and developer-friendly. Supabase is often called the open-source alternative to Firebase, but it goes beyond that—offering PostgreSQL as a database, built-in authentication, real-time capabilities, and serverless functions, all without vendor lock-in.

Why Choose Supabase Over Firebase?

Full PostgreSQL Support – Unlike Firebase’s NoSQL Firestore, Supabase is built on PostgreSQL, giving you SQL power with relational data.
Built-in Authentication – Supabase Auth supports email/password, magic links, social logins (Google, GitHub, etc.), and third-party providers (SAML, OAuth 2.0) out of the box.
Real-Time API – Supabase enables real-time syncing of authentication states and database updates without additional setup.
Self-Hosting Option – If you need full control, you can host Supabase on your own infrastructure instead of relying on managed services.
Easy Next.js Integration – Works seamlessly with Next.js API routes and React state management.

How to Set Up Supabase Authentication in Next.js (with Chakra UI)

Let’s go step by step on integrating Supabase Auth into a Next.js app using Chakra UI for styling.

1. Install Dependencies

To add Supabase into your existing Next.js project, install the necessary dependencies using either NPM or Yarn:

npm install @supabase/supabase-js

yarn add @supabase/supabase-js

2. Initialize Supabase in a Config File (lib/supabase.ts)

Create a new file lib/supabase.ts and initialize Supabase Client:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

And don’t forget that your .env.local file to have your Supabase API keys:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

3. Create a Login Form Using Chakra UI (components/AuthForm.tsx)

Below is an example of login form with Chakra UI and supabase for Google Sign In:

import { supabase } from '../lib/supabase';
import { Button, VStack, Text, useToast } from '@chakra-ui/react';

const LoginForm: React.FC = () => {
  const toast = useToast();

  const handleGoogleLogin = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
    });

    if (error) {
      toast({
        title: 'Login failed',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    }
  };

  return (
    <VStack spacing={4} p={5} boxShadow="md" borderRadius="lg">
      <Text fontSize="xl" fontWeight="bold">Sign in with Google</Text>
      <Button colorScheme="red" onClick={handleGoogleLogin}>
        Continue with Google
      </Button>
    </VStack>
  );
};

export default LoginForm;

4. Restrict Access to Authenticated Users (pages/dashboard.tsx)

Below is an example of TypeScript code that checks if the session is valid on the dashboard.

If the user is not authenticated, they are redirected to the home page; otherwise, the dashboard is displayed accordingly.

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { supabase } from '../lib/supabase';
import { Session } from '@supabase/supabase-js';
import { VStack, Text, Spinner, Button } from '@chakra-ui/react';

const Dashboard: React.FC = () => {
  const [session, setSession] = useState<Session | null>(null);
  const router = useRouter();

  useEffect(() => {
    // Check if the user is authenticated
    const fetchSession = async () => {
      const { data } = await supabase.auth.getSession();
      if (!data.session) {
        router.push('/'); // Redirect to home if not logged in
      } else {
        setSession(data.session);
      }
    };

    fetchSession();
  }, [router]);

  const handleLogout = async () => {
    await supabase.auth.signOut();
    router.push('/');
  };

  if (!session) {
    return (
      <VStack minH="100vh" justify="center">
        <Spinner size="xl" />
        <Text>Checking authentication...</Text>
      </VStack>
    );
  }

  return (
    <VStack spacing={4} p={5}>
      <Text fontSize="2xl">Welcome, {session.user.email}!</Text>
      <Button colorScheme="red" onClick={handleLogout}>Sign Out</Button>
    </VStack>
  );
};

export default Dashboard;

2. Setting Up Authentication in Minutes

Forget wrestling with complex OAuth flows—Supabase makes authentication fast and easy, and it’s significantly simpler than using NextAuth.

With built-in support for email/password, magic links, and social logins (Google, GitHub, etc.), you can set up authentication with just a few lines of code.

Below is an example of GitHub authentication with Supabase:

import { supabase } from '../lib/supabase';
import { Button } from '@chakra-ui/react';

const GitHubLogin = () => {
  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'github',
    });

    if (error) console.error('Login error:', error.message);
  };

  return (
    <Button colorScheme="gray" onClick={handleLogin}>
      Sign in with GitHub
    </Button>
  );
};

export default GitHubLogin;

3. Managing User Sessions in Next.js

Handling user sessions is crucial for keeping users authenticated across pages in your Next.js app. Supabase makes this easy with its real-time session management.

How It Works:

When a user logs in, Supabase stores the session, including the access token.
You can retrieve the current session using supabase.auth.getSession().
Supabase also provides an auth state listener to react to login/logout events in real time.

Below is an example of checking and listening to User Sessions in Next.js in a custom useUserSession React Hook:

import { useEffect, useState } from 'react';
import { Session } from '@supabase/supabase-js';
import { supabase } from '../lib/supabase';

const useUserSession = () => {
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    const fetchSession = async () => {
      const { data } = await supabase.auth.getSession();
      setSession(data.session);
    };

    fetchSession();

    // Listen for session changes
    const { data: authListener } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, []);

  return session;
};

export default useUserSession;

And it can be conveniently used inside any React component to check the current session:

import { Text, Button } from '@chakra-ui/react';
import useUserSession from '../hooks/useUserSession';
import { supabase } from '../lib/supabase';

const Dashboard = () => {
  const session = useUserSession();

  const handleLogout = async () => {
    await supabase.auth.signOut();
  };

  return (
    <div>
      {session ? (
        <>
          <Text>Welcome, {session.user.email}</Text>
          <Button colorScheme="red" onClick={handleLogout}>Log Out</Button>
        </>
      ) : (
        <Text>Please log in</Text>
      )}
    </div>
  );
};

export default Dashboard;

4. Role-Based Access Control (RBAC) for Multi-Tenant SaaS

When building a multi-tenant SaaS, not all users should have the same permissions. Role-Based Access Control (RBAC) ensures that:

Admins can manage the platform
Employees or users can only access their own data
Each tenant (company) has isolated access

Supabase allows you to store user roles in the database and enforce access control using PostgreSQL Row-Level Security (RLS).

Setting Up RBAC with Supabase

Add a role column to your users table (e.g., admin, user)
Define RLS policies to restrict access based on roles
Fetch and check user roles in Next.js

Below is an example of a custom React hook useUserRole, which fetches User Roles in Next.js

import { useEffect, useState } from 'react';
import { supabase } from '../lib/supabase';

const useUserRole = () => {
  const [role, setRole] = useState<string | null>(null);

  useEffect(() => {
    const fetchUserRole = async () => {
      const { data, error } = await supabase
        .from('users')
        .select('role')
        .eq('id', (await supabase.auth.getUser()).data.user?.id)
        .single();

      if (!error) {
        setRole(data?.role);
      }
    };

    fetchUserRole();
  }, []);

  return role;
};

export default useUserRole;

And the useUserRole can be used in your Next.js pages to restrict access:

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import useUserRole from '../hooks/useUserRole';

const AdminDashboard = () => {
  const router = useRouter();
  const role = useUserRole();

  useEffect(() => {
    if (role && role !== 'admin') {
      router.push('/403'); // Redirect unauthorized users
    }
  }, [role, router]);

  if (role !== 'admin') return null; // Hide UI until check is done

  return <h1>Admin Dashboard</h1>;
};

export default AdminDashboard;

Setting Up Row-Level Security (RLS)

Supabase allows you to enforce RBAC at the database level. Simply use the Supabase SQL Editor to set it up:

-- Only allow users to access their own data
CREATE POLICY "User can access own data"
ON users FOR SELECT
USING (auth.uid() = id);

-- Only allow admins to see all users
CREATE POLICY "Admins can see all users"
ON users FOR SELECT
USING (EXISTS (SELECT 1 FROM users WHERE id = auth.uid() AND role = 'admin'));

With the above setup, users can only see their own data, while admins get full access. Security is enforced both in Next.js and at the database level.

With RBAC and Supabase, your multi-tenant SaaS stays secure while allowing flexible user permissions.

5. Passwordless Authentication for Frictionless UX

Passwords can be a major friction point for users—leading to forgotten credentials, security risks, and drop-offs during sign-up.

Passwordless authentication removes this hassle by allowing users to sign in via magic links or one-time codes without needing to remember a password.

Supabase makes passwordless authentication easy to implement with built-in support for email-based magic links. This enhances security while streamlining the user experience.

How Magic Links Work

User enters their email
Supabase sends a magic link (one-time use only)
User clicks the link to authenticate (no password required)
They are redirected back to your app, logged in automatically

Below is an example code snippet for a UI that allows users to request a magic link to be sent to their email:

import { useState } from 'react';
import { supabase } from '../lib/supabase';
import { Input, Button, VStack, Text, useToast } from '@chakra-ui/react';

const MagicLinkLogin = () => {
  const [email, setEmail] = useState('');
  const toast = useToast();

  const sendMagicLink = async () => {
    const { error } = await supabase.auth.signInWithOtp({ email });

    if (error) {
      toast({
        title: 'Error sending magic link',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    } else {
      toast({
        title: 'Magic link sent!',
        description: 'Check your email to log in.',
        status: 'success',
        duration: 3000,
        isClosable: true,
      });
    }
  };

  return (
    <VStack spacing={4} p={5} boxShadow="md" borderRadius="lg">
      <Text fontSize="xl" fontWeight="bold">Sign in with Magic Link</Text>
      <Input
        placeholder="Enter your email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <Button colorScheme="blue" onClick={sendMagicLink}>
        Send Magic Link
      </Button>
    </VStack>
  );
};

export default MagicLinkLogin;

Example Of Handling the Magic Link Callback in Next.js

Once the user clicks the magic link, they need to be redirected back to your app and automatically authenticated.

In pages/auth/callback.tsx, handle the authentication response:

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { supabase } from '../../lib/supabase';

const AuthCallback = () => {
  const router = useRouter();

  useEffect(() => {
    const handleAuth = async () => {
      const { error } = await supabase.auth.getSessionFromUrl();

      if (error) {
        console.error('Authentication error:', error.message);
      } else {
        router.push('/dashboard'); // Redirect after successful login
      }
    };

    handleAuth();
  }, [router]);

  return <p>Logging in...</p>;
};

export default AuthCallback;

Why Use Passwordless Authentication?

Passwordless authentication with Supabase Magic Links simplifies user login by eliminating password fatigue, reducing the risk of credential breaches, and streamlining onboarding.

With a seamless, secure, and user-friendly authentication flow, SaaS platforms can improve user retention and enhance the overall login experience.

6. Securing APIs with Server-Side Authentication

In a SaaS platform, protecting API endpoints from unauthorized access is crucial.

Supabase provides server-side authentication using JWTs (JSON Web Tokens), ensuring that only authenticated users can access sensitive data.

It is particularly important for actions like fetching user-specific data, updating records, or handling payments.

With Next.js API routes, you can verify a user’s authentication status before processing a request. Here’s how you can secure an API endpoint in Next.js using Supabase:

Example: Protecting an API Route in Next.js (/pages/api/protected.ts)

import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const supabase = createServerSupabaseClient({ req, res });
  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  res.status(200).json({ message: 'Secure data retrieved successfully', user });
}

So the above example is the API verifies the request for a valid Supabase authentication token.

If the user is not authenticated, it returns a 401 Unauthorized response; otherwise, it processes the request and returns secure data.

It ensures only authorized users can access protected API endpoints, enhancing your SaaS platform’s security.

Reducing sign-up friction is key to user adoption. Supabase makes it easy to integrate social logins like Google, GitHub, and Facebook, as well as enterprise SSO using SAML or OAuth 2.0.

With just a few lines of code, you can offer users a seamless authentication experience, improving conversion rates and engagement.

Facebook Authentication with Supabase (TypeScript):

import { Button } from "@chakra-ui/react";
import { supabase } from "../lib/supabase";

const SignInWithFacebook = () => {
  const handleFacebookLogin = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "facebook",
    });

    if (error) {
      console.error("Facebook sign-in error:", error.message);
    }
  };

  return (
    <Button colorScheme="blue" onClick={handleFacebookLogin}>
      Sign in with Facebook
    </Button>
  );
};

export default SignInWithFacebook;

The above code example allows users to sign in with their Facebook account, making authentication seamless while improving sign-up conversions for your SaaS.

8. Real-Time Authentication Events for Dynamic UIs

Want to personalize your SaaS experience? Supabase provides real-time authentication events, allowing your UI to instantly respond when a user logs in, logs out, or updates their session.

This means you can show dynamic welcome messages, update user-specific content, or trigger custom actions without unnecessary re-renders.

Example: Listening for Auth Changes in Next.js (TypeScript)

import { useEffect, useState } from "react";
import { supabase } from "../lib/supabase";
import { Text, VStack } from "@chakra-ui/react";

const AuthStatus = () => {
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    const fetchUser = async () => {
      const { data } = await supabase.auth.getUser();
      setUser(data.user);
    };

    fetchUser();

    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user || null);
      }
    );

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, []);

  return (
    <VStack spacing={4}>
      {user ? (
        <Text fontSize="lg">Welcome back, {user.email}!</Text>
      ) : (
        <Text fontSize="lg">You're not logged in.</Text>
      )}
    </VStack>
  );
};

export default AuthStatus;

This setup ensures your UI stays in sync with authentication changes, improving user experience and engagement without extra API calls.

9. Multi-Factor Authentication (MFA) for Enhanced Security

Passwords alone aren’t enough to secure user accounts.

Multi-Factor Authentication (MFA) adds an extra layer of security by requiring a second verification step, such as a one-time password (OTP) via email or an authenticator app.

With Supabase, enabling MFA is straightforward and significantly reduces the risk of unauthorized access.

How to Implement MFA with Supabase

Supabase supports MFA through TOTP (Time-Based One-Time Passwords), which works with apps like Google Authenticator and Authy.

Below is an example of how to enroll and verify an MFA token in a Next.js app:

1. Enrolling a User for MFA

When a user opts in for MFA, generate a TOTP secret and display a QR code for them to scan:

import { useState } from "react";
import { supabase } from "../lib/supabase";
import { Button, Input, VStack, Text, useToast } from "@chakra-ui/react";

const EnableMFA = () => {
  const [otp, setOtp] = useState("");
  const [secret, setSecret] = useState<string | null>(null);
  const toast = useToast();

  const setupMFA = async () => {
    const { data, error } = await supabase.auth.mfa.enroll({
      factorType: "totp",
    });

    if (error) {
      toast({
        title: "MFA Setup Failed",
        description: error.message,
        status: "error",
        duration: 3000,
        isClosable: true,
      });
    } else {
      setSecret(data?.secret); // Store this secret safely
      toast({
        title: "MFA Setup Successful",
        description: "Scan the QR code with your authenticator app.",
        status: "success",
        duration: 3000,
        isClosable: true,
      });
    }
  };

  return (
    <VStack spacing={4} p={5} boxShadow="md" borderRadius="lg">
      <Text fontSize="lg" fontWeight="bold">Enable MFA</Text>
      <Button colorScheme="blue" onClick={setupMFA}>
        Setup MFA
      </Button>
      {secret && <Text>Your MFA Secret: {secret}</Text>}
    </VStack>
  );
};

export default EnableMFA;

2. Verifying an MFA Code at Login

Once MFA is enabled, the user must enter a one-time code along with their login credentials:

const verifyMFA = async () => {
  const { error } = await supabase.auth.mfa.verify({
    factorId: "<FACTOR_ID>",
    challengeId: "<CHALLENGE_ID>",
    otp,
  });

  if (error) {
    toast({
      title: "MFA Verification Failed",
      description: error.message,
      status: "error",
      duration: 3000,
      isClosable: true,
    });
  } else {
    toast({
      title: "MFA Verification Successful",
      description: "You are now logged in securely.",
      status: "success",
      duration: 3000,
      isClosable: true,
    });
  }
};

Enabling MFA with Supabase adds an extra layer of security, preventing unauthorized access even if passwords are compromised.

It reduces fraud risks, protects sensitive data, and builds user trust, especially for SaaS platforms handling payments or personal information.

10. Scaling Authentication Without Headaches

As your SaaS grows, authentication should scale effortlessly without introducing performance bottlenecks.

Supabase is built on Postgres, ensuring your auth system can handle thousands of users without slowing down.

It also offers edge functions, rate limiting, and automatic failover to keep your authentication system fast and reliable.

With Supabase, you don’t have to worry about maintaining complex auth infrastructure—just focus on building your product.

Example: Handling High Traffic with Edge Functions

Using Supabase Edge Functions, you can offload authentication-related tasks to the edge for faster performance:

// pages/api/login.ts
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY! // Use service role for secure backend operations
);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method Not Allowed' });
  }

  const { email, password } = req.body;
  const { data, error } = await supabase.auth.signInWithPassword({ email, password });

  if (error) {
    return res.status(401).json({ error: error.message });
  }

  res.status(200).json({ message: 'Login successful', user: data.user });
}

By leveraging Supabase’s scalable architecture and edge functions, your authentication can handle growing traffic without additional complexity.

Conclusion

Supabase makes authentication in Next.js effortless, secure, and scalable. Whether you need passwordless logins, social authentication, role-based access control, or multi-factor authentication, Supabase provides powerful yet easy-to-use solutions.

With real-time auth events, edge functions, and built-in RBAC, you can build a seamless authentication experience while ensuring security at scale.

By integrating Supabase Auth, you can focus on growing your SaaS without worrying about authentication headaches.

Spread the love — share this post with your friends!

How to Secure Your SaaS with Supabase: A Developer’s Guide

1. Why Supabase? The Open-Source Firebase Alternative

Why Choose Supabase Over Firebase?

How to Set Up Supabase Authentication in Next.js (with Chakra UI)

1. Install Dependencies

2. Initialize Supabase in a Config File (lib/supabase.ts)

3. Create a Login Form Using Chakra UI (components/AuthForm.tsx)

4. Restrict Access to Authenticated Users (pages/dashboard.tsx)

2. Setting Up Authentication in Minutes

3. Managing User Sessions in Next.js

4. Role-Based Access Control (RBAC) for Multi-Tenant SaaS

Setting Up RBAC with Supabase

Setting Up Row-Level Security (RLS)

5. Passwordless Authentication for Frictionless UX

How Magic Links Work

Example Of Handling the Magic Link Callback in Next.js

Why Use Passwordless Authentication?

6. Securing APIs with Server-Side Authentication

Example: Protecting an API Route in Next.js (/pages/api/protected.ts)

7. Social Logins & Single Sign-On (SSO) for Growth

8. Real-Time Authentication Events for Dynamic UIs

9. Multi-Factor Authentication (MFA) for Enhanced Security

How to Implement MFA with Supabase

1. Enrolling a User for MFA

2. Verifying an MFA Code at Login

10. Scaling Authentication Without Headaches

Example: Handling High Traffic with Edge Functions

Conclusion