Supabase Auth integration with Plasmic failing.

I’ve been working on trying to make supabase auth play nice with plasmic auth for a few hours and thus far I have two issues I can’t resolve:

  1. After following all the instructions in; when I sign up a new user, that user correctly registers in plasmic and supabase, but then I’m unable to view the “protected” page despite the fact that user is registered in plasmic with the role “normal user” and the protected page is only restricted to min role “normal user”.
  2. I’m unable to sync my copy of the supabase headless auth example ( to my local setup via: plasmic sync -p MYPROJID without breaking everything. It overwrites AuthForm.tsx and AuthButton.tsx and even if I say yes to that prompt in the CLI but then copy paste over what it puts in those files with what the code had originally, I still get this error when I run yarn dev:
Error: You cannot define a route with the same specificity as a optional catch-all route ("/" and "/[[...catchall]]").
    at UrlNode._smoosh (C:\Users\willi\Projects\plasmic-supabase\node_modules\next\dist\shared\lib\router\utils\sorted-routes.js:42:23)
    at UrlNode.smoosh (C:\Users\willi\Projects\plasmic-supabase\node_modules\next\dist\shared\lib\router\utils\sorted-routes.js:16:21)
    at getSortedRoutes (C:\Users\willi\Projects\plasmic-supabase\node_modules\next\dist\shared\lib\router\utils\sorted-routes.js:167:17)
    at Watchpack.<anonymous> (C:\Users\willi\Projects\plasmic-supabase\node_modules\next\dist\server\dev\next-dev-server.js:584:70)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
error Command failed with exit code 1.

Ok, GPT4 has helped me get through some of the issues. The CLI’s sync command adds an index.tsx file and an auth.tsx file. The index.tsx file corresponds to the “/” route but the prior repo was using a [[…catchall]].tsx file for that route, creating a conflict. Deleting index.tsx and auth.tsx makes http://localhost:3000 and http://localhost:3000/auth work but http://localhost:3000/protected still doesn’t work. Prior to the sync with the CLI it was showing an error message saying I didn’t have access, now it’s just blank.

- warn Duplicate page detected. pages\ssr.tsx and pages\ssr\index.tsx resolve to /ssr
warning ..\package.json: No license field
- event compiled client and server successfully in 220 ms (18 modules)
- wait compiling...
- warn Duplicate page detected. pages\ssr.tsx and pages\ssr\index.tsx resolve to /ssr
- warn Duplicate page detected. pages\ssr.tsx and pages\ssr\index.tsx resolve to /ssr
- event compiled client and server successfully in 102 ms (18 modules)
- wait compiling /[[...catchall]] (client and server)...
- event compiled client and server successfully in 432 ms (356 modules)
- warn Duplicate page detected. pages\ssr.tsx and pages\ssr\index.tsx resolve to /ssr
- warn Duplicate page detected. pages\ssr.tsx and pages\ssr\index.tsx resolve to /ssr
- warn Duplicate page detected. pages\ssr.tsx and pages\ssr\index.tsx resolve to /ssr

Aannd… I’m getting closer. Looks like I also needed to delete the protected.tsx file so the catchall tsx file gets called. So now I’m back to getting the same error I was with the original repo “You don’t have access to this page”

And then to make the plasmic cli’s sync command not mess everything up every time, I’ve adjusted the

"importSpec": {
            "modulePath": "../pages/[[...catchall]].tsx"

For "path": "/protected" as well as for "/auth" and "/"

Hi Willian, are you using loader or codegen? The example in uses loader, but plasmic sync -p MYPROJID is a codegen command.

Ah, I’m trying to use the loader

So I don’t need to sync anything if I’m not using codegen?

Yes, if you are using codegen it doesn’t require you to perform any sync, the updates that you do in the studio will be reflected in your application through the loader api, if you are using loader in preview: true just refreshing your page will make you be able to see your content, this page has a bit of description on it

Got it, I will restart things without running the sync command then

But any thoughts on why the /protected page isn’t working as expected?

I’m also generally curious if I could use codegen mode to use plasmic to edit existing pages in a starter template not built for use with plasmic (like this one:

But from searching the forum I got the impression I could only use plasmic to create new pages using components in an existing project but wouldn’t be able to use it to edit existing pages. It’s also clear from this exercise that I would have to write some custom logic to make plasmic auth play nice with the auth setup in that existing repo.

But my main curiosity is if I could make the already created pages in that other app appear in plasmic studio via a codegen setup.

I will check if there is some step missing in the example instructions that would make the /protected page be blocked, did you saw the email that you sign in with in the top left ?

Yeah I’m able to get this to show up:

And it’s correctly displaying my email

But the /protected route just says: “You don’t have access to this page”

Also the url: doesn’t load correctly for me. So I had to dig it up via the way back machine. But from what was last there in the docs, it looks like I could customize components in plasmic and use them elsewhere in my code. But otherwise I can’t use plasmic studio to edit an existing page created outside of plasmic

Does your plasmic-init file points to your copied project or is still pointing to the one present in the github example ?

About bringing non plasmic content inside plasmic, it’s possible through code components ( you can register components from your own codebase allowing you to use it in the studio, you can customize your components by exposing props that you want to control, code components are available both in loader as in codegen

Correct, but seeing pages already constructed with those components in an existing project that already has a dashboard for example and editing that already made dashboard in plasmic, is a no go, correct?

Also, it looks like I need to change the id in plasmic-init where do i get the correct token value?
Edit: and I assume the id should be my project id