Hi!
So I have been banging my head on this for a while now and I am not making any progress, so I will just ask here!
I am trying to setup a custom auth with supabase auth, and I have followed the codegen installation with javascript.
However, I don’t understand why when I am running npm run dev, my index page gets me an error when I go on localhost:3000
Here is my pages/ssr/index.jsx
import * as React from 'react';
import {
PlasmicComponent,
extractPlasmicQueryData,
PlasmicRootProvider,
} from "@plasmicapp/react-web";
import { supabase } from "../../utils/supabaseClient";
import { getPlasmicAuthData } from "../../utils/plasmic-auth"; // Your helper file
import { PLASMIC } from "../../plasmic-init";
import { createPagesServerClient } from "@supabase/auth-helpers-nextjs";
import "@supabase/auth-helpers-nextjs";
import Error from "next/error";
import { useRouter } from "next/router";
export default function IndexPage({ plasmicData, queryCache, plasmicUser, plasmicUserToken }) {
const router = useRouter();
if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
return <Error statusCode={404} />;
}
const pageMeta = plasmicData.entryCompMetas[0];
return (
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
prefetchedQueryData={queryCache}
pageParams={pageMeta.params}
pageQuery={router.query}
user={plasmicUser}
userAuthToken={plasmicUserToken}
>
<PlasmicComponent component="Index" />
</PlasmicRootProvider>
);
}
export const getServerSideProps = async (context) => {
const supabaseServerClient = createPagesServerClient(context);
// Fetch the authenticated user and auth token from Supabase
const { plasmicUser, plasmicUserToken } = await getPlasmicAuthData(supabaseServerClient);
// Fetch Plasmic data
const plasmicData = await PLASMIC.maybeFetchComponentData("Index");
if (!plasmicData) {
return { props: {} };
}
// Cache any necessary data for the page
const queryCache = await extractPlasmicQueryData(
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
user={plasmicUser}
userAuthToken={plasmicUserToken}
>
<PlasmicComponent component="Index" />
</PlasmicRootProvider>
);
return {
props: {
plasmicData,
queryCache,
plasmicUser,
plasmicUserToken,
},
};
};
And here is my plasmic-init.js file
import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
import { AuthButton } from "./components/AuthButton";
import { AuthForm } from "./components/AuthForm";
export const PLASMIC = initPlasmicLoader({
projects: [
{
id: "4WayTwhC5fXHbkHxbvoXQQ", // Replace with your actual Plasmic project ID
token: "YesIHaveUpdatedThat", // Replace with your actual Plasmic project token
},
],
preview: true,
});
// Register the custom authentication components
PLASMIC.substituteComponent(AuthButton, "AuthButton");
PLASMIC.substituteComponent(AuthForm, "AuthForm");
My Token I take it from here:
Now it is true that I am not sure that I put the right PLASMIC_AUTH_SECRET in my .env.local cause I essentially take the same token and put it there
Any idea what could be wrong?
Relevant links:
- My project: Plasmic