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):
Apart from setting up the project… Would I need to “sync” anything afterwards?
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?
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!
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
Yes, the idea is to provide a seamless interface to help you describe your app authorization into the Studio.
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.
Thanks a lot for the answers. Would you mind clarifying two more things for me? .
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?
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?
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.
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 {
SignInWithPasswordCredentials,
createClient,
} 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
ThemeSupa,
} from "@supabase/auth-ui-shared";
import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
import { useState } from "react";
import { ensurePlasmicAppUser } from "@plasmicapp/auth-api";
const PLASMIC_AUTH_SECRET = process.env.PLASMIC_AUTH_SECRET;
const supabaseClient = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);
const credentials = {
email: "<deleted>",
password: "<deleted>",
};
async function authCallback() {
try {
// Logic to handle the callback
// After callback handling
// ...
const result = await ensurePlasmicAppUser({
email: credentials.email,
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
console.error(result.error);
// 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}>
<Auth
supabaseClient={supabaseClient}
providers={["google"]}
appearance={{ theme: ThemeSupa }}
redirectTo="/"
/>
<button
onClick={() => {
signIn(credentials);
}}
>
Sign In
</button>
<button
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
mutate(PLASMIC_AUTH_DATA_KEY);
}}
>
Mutate
</button>
<button
onClick={() => {
getAuthUser();
authCallback();
}}
>
Get Auth User
</button>
<button
onClick={async () => {
await supabaseClient.auth.signOut();
await mutate(PLASMIC_AUTH_DATA_KEY);
}}
>
Sign Out
</button>
</div>
);
};
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
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.
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?
Thanks,
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.
.