Plasmic NextAuth Starter

Plasmic NextAuth Starter is a Next.js demo project that shows how to connect Plasmic, a visual builder for pages and content, with next-auth (now Auth.js) to implement authentication, including Google OAuth sign-in. It runs on Next.js, is bootstrapped with create-plasmic-app, and is designed to be deployed to Vercel in a few steps.

What is Plasmic NextAuth Starter?

Plasmic NextAuth Starter is an example template demonstrating how to wire Plasmic page-building into a Next.js app that uses next-auth for user authentication. It takes a Plasmic project ID and public API token plus Google OAuth credentials, and produces a working Next.js application with authenticated pages rendered from Plasmic designs. The project is published by Plasmic and ships with a live Vercel demo and a linked Plasmic Studio project.

Key Features

• Next.js framework — a Next.js application bootstrapped with the create-plasmic-app scaffolding tool.
• Plasmic integration — the app is configured through a plasmic-init file that points at your Plasmic project ID and public API token, so pages and content come from Plasmic.
• next-auth / Auth.js authentication — connects the app to next-auth (renamed Auth.js) to add sign-in flows.
• Google OAuth provider — sign-in is demonstrated with Google credentials, requiring AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET values.
• Secret generation — the README instructs running npx auth secret to generate the AUTH_SECRET value next-auth needs.
• One-click Vercel deploy — a Deploy with Vercel button clones the repository and prompts for the required environment variables.
• Local development — dependencies install with yarn, and yarn dev serves the app at http://localhost:3000.

Who is it for?

• Next.js developers adding auth: developers who want a ready-made reference for attaching next-auth to a Next.js app without building the setup from scratch.
• Plasmic users teaming with developers: teams using Plasmic who need their non-developers' published pages gated behind a login.
• Prototypers: anyone who wants to stand up a Google-authenticated demo quickly via the Vercel deploy button.

What can you do with Plasmic NextAuth Starter?

• Deploy a working auth demo: clone the repo to your own GitHub account through Vercel and supply the AUTH_SECRET and Google OAuth keys to get a running login-enabled site.
• Connect your own Plasmic project: point plasmic-init at your own project ID and public API token to render your designs inside an authenticated Next.js app.
• Learn the integration pattern: use the code as a reference for combining Plasmic's visual editing with next-auth's session handling.

How does it work?

The template is deployed from the Vercel button, which creates a separate repository for you. You then configure plasmic-init with your project ID and public API token, run npx auth secret to generate the auth secret, add Google OAuth API keys, install dependencies with yarn, and start the app with yarn dev.

FAQ

Is Plasmic NextAuth Starter free?

The repository is a public open-source example on GitHub, so you can clone and use the code freely; you still need to supply your own Plasmic project credentials and Google OAuth keys. Deployment is done through your own Vercel account.

Which auth providers does it support out of the box?

The README documents Google OAuth specifically, with AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET environment variables and a link to Google's client-ID setup guide. Adding other providers beyond Google is not described in the source content.

What environment variables are required?

The Vercel deploy prompt lists AUTH_SECRET, AUTH_GOOGLE_SECRET, and AUTH_GOOGLE_ID. The README also instructs generating the secret with npx auth secret and configuring Plasmic's project ID and public API token.