This is a demo showing a basic (and probably full of errors) implementation of Supabase authentication with Plasmic integration and using Auth UI on top of that. It is a Next.js project bootstrapped with create-plasmic-app and based on the Github example from the Plasmic team.
[!NOTE] It is assumed that you know how to do the basics; setting up Plasmic, setting up supabase, etc. The purpose of this project is showing a boilerplate of Supabase, Plasmic auth and Auth UI working altogether.
In Plasmic, get your project ID (from the URL) and the API token (clicking the "Code" button at the upper right corner). Paste both of them in plasmic-init. Run your server and check that everything is ok.
npm i
npm run devOpen your browser to see the result.
Now get your auth info from supabase (URL and anonkey) and paste it in your environment variables
Go back to Plasmic and set your App Host (this project is using http://localhost:3000/plasmic-host). Also, enable authentication and copy the secret token to environment variables.
In this example, there are two ways of signing in: mail and Google. You need to set both of them up in Supabase. Also, you can choose if you want mail confirmation before sign in or not (you can set the the email template).
I have also created a demo project in Plasmic
[!NOTE] Be aware that in order to run this example project from Plasmic, you will have to set and run your localhost project first. Refer to
Plasmic Docs for more infoKey files
With Plasmic, you can enable non-developers on your team to publish pages and content into your website or app.
To learn more about Plasmic, take a look at the following resources:
You can check out the Plasmic GitHub repository - your feedback and contributions are welcome!