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:
After following all the instructions in https://github.com/plasmicapp/plasmic/tree/master/examples/supabase-auth-nextjs-pages-loader; 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”.
I’m unable to sync my copy of the supabase headless auth example (https://studio.plasmic.app/projects/2gYaa1FsuykK8CmmDLsakd) 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
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 https://docs.plasmic.app/learn/nextjs-quickstart/
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: https://github.com/usebasejump/basejump)
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 ?
Also the url: https://docs.plasmic.app/learn/minitwitter-tutorial/ 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
About bringing non plasmic content inside plasmic, it’s possible through code components (https://docs.plasmic.app/learn/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?
