Custom Authentication and Plasmic

Developer Support
1

Hello, I want to integrate Plasmic into an existing Nextjs codebase utilizing Appwrite authentication. Can I pass my Appwrite users and session tokens into Plasmic to use for routing and dynamic data? The authentication system works in the existing codebase, but how do I get it to communicate with Plasmic?

Long live Plasmic.

2

Hi @a_vaughn

You can register a global context that reads your Appwrite session and exposes the user data through a DataProvider. You can then use $ctx.user in Studio for dynamic text, conditional visibility, etc.

  1. Protected routes: You can add page metadata (e.g. requiresAuth) in Page settings, and check it against the Appwrite session in your catch-all page to redirect logged-out users. Something like this
 const pageMeta = plasmicData.entryCompMetas[0];
  if (pageMeta.metadata?.requiresAuth === "true" && !(await getAppwriteUser(context))) {
    return { redirect: { destination: "/login", permanent: false } };
  }
  1. Any other per-user data you fetch from Appwrite in your own code and want to expose to Plasmic, you can do it using code components.

Thanks

3

Thanks for the reply, that helps a lot. Is there an code example of a global context reading a session from a third party like Appwrite? I see the example in the global context documentation link but I don’t see how it relates to a third party session? And sorry if I’m just missing something.

4

Hi @a_vaughn, here’s an example repo using Prisma: GitHub - plasmicapp/plasmic-prisma-starter · GitHub

The global context is here: plasmic-next-auth-example/components/CodeComponents/GlobalContexts/UserSession.tsx at master · plasmicapp/plasmic-next-auth-example · GitHub

Hope this helps!