Lack of Auth-API documentation with Supabase

Developer Support
1

Some better documentation around how to proceed with auth after running @plasmicapp/auth-api would be much appreciated - specifically looking for how to do this with Supabase but it feels like I’ve arrived at a dead end

Screenshot 2023-07-02 at 13.30.02.png
Screenshot 2023-07-02 at 13.30.02.png1426×900 94.7 KB

2

At the moment I’m considering one of the following:

  1. Installing supabase via manual config but I’m not sure if I need to install the helpers library, environment variables, middleware file, code exchange or just one or more of the above. Also not sure if this would even appear in Plasmic auth UI
  2. Abandoning my project (no big deal as it’s still fresh) and starting from scratch with an automatic supabase install and then running plasmic in codegen mode
  3. Switching to plasmic for Auth and just using Supabase for database. But then I can’t tell if I can customize verification emails in Plasmic and there doesn’t seem to be a guide to learn about connecting users in plasmic to access rights in supabase
3

Hi @romantic_termite for integrating with supabase you can use any of the options provided by them, the only thing that you have to be sure is to fetch plasmic auth data from the server.

For example there is a simple way to integrate it with the example project in the link that you sent. You can add the following code to fetch the plasmicUser metadata.

const PLASMIC_AUTH_SECRET = process.env.PLASMIC_AUTH_SECRET;

async function getPlasmicAuthData() {
  const supabase = createServerComponentClient({ cookies })
  const {
    data: { user },
  } = await supabase.auth.getUser();
    
  if (user?.email && user?.email_confirmed_at) {
    const result = await createPlasmicAppUser({
      email: user?.email,
      appSecret: PLASMIC_AUTH_SECRET!
    });

    if (result.error) {
      throw new Error("Error creating user: " + result.error);
    }

    const { user: plasmicUser, token: plasmicUserToken } = result;

    return {
      plasmicUser,
      plasmicUserToken,
    };
  }

  return {}
}

That’s going to run in the server and check if the current supabase session has a registered email that was verified, then create a plasmic user for it (It’s not an issue to call create multiple times for the same user). This code performance can be improved, but it’s a simple example to explain the concept. After that you can pass this data into the PlasmicRootProvider.

export default async function Index() {
  const {
    plasmicUser,
    plasmicUserToken
  } = await getPlasmicAuthData();

  const plasmicData = await PLASMIC.fetchComponentData('Homepage');
  const compMeta = plasmicData.entryCompMetas[0];
  return (
    <PlasmicClientRootProvider
      prefetchedData={plasmicData}
      pageParams={compMeta.params}
      user={plasmicUser}
      userAuthToken={plasmicUserToken}
    >
      <PlasmicComponent component={compMeta.displayName} />
    </PlasmicClientRootProvider>
  );
}

You would have to add login/logout somewhere, but once your session is set it will be providing a plasmicUser to the PlasmicRootProvider. I will be looking into adding examples of custom auth, but feel free to ping me in any question about it.

4

Currently there’s no way to customize the verification emails in Plasmic, they follow the same pattern by using your app name.

5

@fmota Thank you! So would you suggest continuing in headless mode instead of codegen? Where exactly would I add the examples you provided? Appreciate as much detail as possible as I’m a beginner :slightly_smiling_face:

6

It’s not required to be in headless, if you prefer codegen you can still use it. You only have to change a bit the imports for the <PlasmicRootProvider/> instead of using @plasmicapp/loader-nextjs you would use @plasmicapp/react-web . You can put the getPlasmicAuthData in a separated file as it’s a helper function, you can call it from any page that requires auth.

7

Will try to stay in headless for now - so my understanding is:

  1. Follow Supabase docs and install + configure all of the following:
    a. The helpers library
    b. Environment variables
    c. Middleware file
    d. Code exchange
  2. Add the getPlasmicAuthData function to a separate file
  3. Call it from any page that requires auth (another code example would be helpful here)
8

@fmota does this look correct? did I miss anything?

9

Yes, by following the manual configuration in the link you sent and adding getPlasmicAuthData you should be ready to go, I will be looking into adding one example in plasmic examples too, I will ping you after being added

10

@fmota found https://github.com/plasmicapp/plasmic/tree/master/examples/supabase-auth-nextjs-pages-loader :star-struck:

11

Yes, another one with codegen and app dir of NextJs is coming out soon too

12

How are things on your end ?

13

I’m thinking of just starting from scratch again, clearing my folders, git clone on the above repo, editing env.local. and then cloning the corresponding plasmic project. both to attempt to reduce chances of other things going wrong on my end from what I’ve tried previously and also to “user test” your guide. do you think it’s ready? :sweat_smile:

14

You dont need to clear your files, you can clone it update the env.local and play with it

15

dumb question - I assume I have to clone the repo in vscode and clone the plasmic project?

16

Are you able to access the project in the example ? Because you can clone both the repo as the plasmic project, so that you can edit in plasmic and see the changes locally

17

ah, so just clone the plasmic project?

18

Yeah cloning both should be the best

19

Once you clone the plasmic project you should update the credentials in plasmic-init

20

Perfect, will get to it