Supabase Auth and Plasmic


I’m new to Plasmic and I have to say I’m really really impressed. There’s only one thing I’m finding way too difficult which is the Supabase integration. I understood choosing Plasmic over other low code builders would mean dealing with more technical things, although I think something as widely used as Supabase should be more easily integrated in Plasmic.

Anyways, after researching the Auth part of Plasmic-Supabase integration I have a few questions about the loader example with NextJS that would love some confirmation on before deciding to continue with Plasmic Auth or Supabase Auth (which I’d love but don’t want to deal with extra technical details diminishing development speed)(plasmic/examples/supabase-auth-nextjs-pages-loader at master · plasmicapp/plasmic · GitHub):

  1. Apart from setting up the project… Would I need to “sync” anything afterwards?
  2. Once I do the final clone and start editing in Plasmic, can I use all the Roles/Permissions/User features available in Plasmic as if I were using Plasmic Auth?
  3. Does this add any extra step to the deployment of the app or can I use the one click button to have my app live through Plasmic hosting?

If you someday achieve a full integration with Supabase with just a few clicks without abandoning your platform, etc, you’re gonna have a killer product.
I do understand all of this is complex technically, but it’s the only part of the product I see lacking (problem is, it’s a very important part of an app).

But you’ve truly truly built something impressive. Congrats and thank you!

Hi @jacobo_garcia thanks for the great feedback

Here are the answer for your questions:

  1. If you are using the loader API version, you won’t need to perform any syncs afterwards, this is one of the benefits of using loader, if you are using codegen than you need to incrementally sync the changes of your project into your repository. I recommend reading Headless API vs. Codegen | Learn Plasmic
  2. Yes, the idea is to provide a seamless interface to help you describe your app authorization into the Studio.
  3. If you are using custom auth, you won’t be able to use Plasmic Hosting, but you should be able to deploy to a service of your preference and invoke a webhook through the publish button.

Let me know if this helps you.

Hey @fmota!

Thanks a lot for the answers. Would you mind clarifying two more things for me? :sweat_smile:.

  1. With the Supabase-Next.js project, I assume I’ll always have to spin up the local dev environment before editing in Plasmic editor, am I right?

  2. I guess with Supabase auth, even if it’s integrated through the NextJS sample app, any roles that I define in Plasmic auth settings aren’t synced to Supabase in any way, right?

Thanks a ton!

  1. It’s not necessary, you only need to spin the project if you are using a plasmic host for code components Using code components in Plasmic Studio | Learn Plasmic in a local version, but if you publish your host page to production, you no longer will need to spin the project in local dev to perform edits in the Studio. For the supabase next.js project it’s being used component substitution to attach specific handlers for the auth/business logic, so it doesn’t require to spin the local dev environment.
  2. Yes, currently, the mirroring of roles has to be manually performed.

Hi everyone,
I have been struggling for hours without success, I need some help here…
Me, as @jacobo_garcia, I have been making some tests with the Supabase & Plasmic Next.js example from Github. Everything works nice but next step is trying to use another Auth UI. I have been trying the React Auth UI from Supabase and here is where I am hitting a wall again and again. In that example, SWR is used to update the requests after being logged in / out. I, for the love of all gods, cannot make it work like I am doing with the substituted Plasmic components. Whenever I try to get the Plasmic data after looging in to Supabase (that is working fine) I get null objects. And if I try to run the ensurePlasmicAppUser method, I get a “Unhandled Runtime Error TypeError: Failed to fetch”. I have also tried with simple buttons. It looks like it’s something related to the fact that my component is not wrapped into a tag, like the substituted ones? If you could please help me, @fmota …I have spent too many hours with this. I know it’s dirty and messy, just trying things.

import {
} from "@supabase/supabase-js";
import { mutate } from "swr";
import { PLASMIC_AUTH_DATA_KEY } from "@/utils/cache-keys";

import { Auth } from "@supabase/auth-ui-react";
import {
  // Import predefined theme
} from "@supabase/auth-ui-shared";
import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
import { useState } from "react";
import { ensurePlasmicAppUser } from "@plasmicapp/auth-api";


const supabaseClient = createClient(
const credentials = {
  email: "<deleted>",
  password: "<deleted>",

async function authCallback() {
  try {
    // Logic to handle the callback

    // After callback handling
    // ...

    const result = await ensurePlasmicAppUser({
      appSecret: PLASMIC_AUTH_SECRET!,

    // Check if there's an error in the result
    if (result.error) {
      // If there's an error, log it and handle it accordingly
      // Optionally, you can throw the error to stop further execution
      throw new Error("Error occurred while ensuring Plasmic app user.");

    const { user: plasmicUser, token: plasmicUserToken } = result;
    console.log("Result: ", result);

    // Store the token in a cookie or session
    // ...
  } catch (error) {
    // Catch any errors that occur within the try block or are thrown explicitly
    console.error("An error occurred:", error);
    // Handle the error as needed, such as displaying a user-friendly message
    // or performing additional error logging or cleanup

async function getAuthUser() {
  const { data, error } = await supabaseClient.auth.getUser();
  if (error || !data?.user) {
    console.log("Error", error);
  } else {
    console.log("User: ", data?.user);
    return data?.user;
async function signIn(credentials: SignInWithPasswordCredentials) {
  await supabaseClient.auth.signInWithPassword(credentials);
  await mutate(PLASMIC_AUTH_DATA_KEY);

const AuthUi = ({ className }: { className?: string }) => {
  const [supabaseClient] = useState(() => createPagesBrowserClient());
  return (
    <div className={className}>
        appearance={{ theme: ThemeSupa }}
        onClick={() => {
        Sign In
        onClick={() => {
          // set the cookie as expired
          document.cookie =
            "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

          // tell all SWRs with this key to revalidate
        onClick={() => {
        Get Auth User
        onClick={async () => {
          await supabaseClient.auth.signOut();
          await mutate(PLASMIC_AUTH_DATA_KEY);
        Sign Out
export default AuthUi;


I struggled with similar things. What I ended up is:

  • deactivating the plasmic auth completely and build it myself via codegen
  • using the auth component from asim (below)
  • implementing a simple middleware to ensure users are logged in
  • working with supabase ssr

Asim has some good indepth videos. In the whatsapp video he has a good approach to authentication with supabase, although using a little older api. I used that auth form as it is a super version.
Repo: GitHub - asimkhan73301/plasmic-whatsapp-clone

Amongst all the supabase documentation I found this to be the most helpful
Creating a Supabase client for SSR | Supabase Docs

For Middleware I use
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
I think the server client from ssr didn’t work for me, but not so sure anymore.

1 Like

OK, @gabriel_grohmann, thanks a lot for your answer. I will dig into that.
But, for the rest of the @support team from Plasmic, it can’t be that hard, right? I mean, I am already communicating correctly between a custom component and Plasmic auth. I just need to wrap my own custom component with the needed context to make it work, don’t I?

OK guys, I just wanted to let you all know that I finally managed to integrate Plasmic with Supabase auth using the Auth UI. I made a Github repo for future reference. I hope it helps people to figure everything out.

1 Like