---
title: "Plasmic NextAuth Starter"
description: "A Plasmic-based Next.js template that integrates with Auth.js to enable authentication using Google."
url: "https://vercel.com/templates/next.js/plasmic-nextauth-starter"
links:
  repository: "https://github.com/plasmicapp/plasmic-next-auth-example"
  demo: "https://plasmic-next-auth-example.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Plasmic+NextAuth+Starter&demo-description=A+Plasmic-based+Next.js+template+that+integrates+with+Auth.js+to+enable+authentication+using+Google.&demo-url=https%3A%2F%2Fplasmic-next-auth-example.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FHJbfA1DokVsJXnvLXBDLu%2Ffc9446fd537bbf27db7d45bb0ddb60fe%2Fk3u3yCPw1fWN.png&project-name=Plasmic+NextAuth+Starter&repository-name=plasmic-nextauth-starter&repository-url=https%3A%2F%2Fgithub.com%2Fplasmicapp%2Fplasmic-next-auth-example&from=templates&skippable-integrations=1"
---

# Plasmic NextAuth Starter

A Plasmic-based Next.js template that integrates with Auth.js to enable authentication using Google.

<p align="center">
  <a href="https://www.plasmic.app">
    <img alt="Plasmic" role="img" src="https://cdn-images-1.medium.com/max/176/1*D1nV2o_le9dJEO3G80P4xg@2x.png" width="120">
  </a>
</p>

# Plasmic example: authentication using next-auth

This is a demo of how you can connect Plasmic with [next-auth](https://authjs.dev) (recently renamed to auth.js) to implement authentication.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fplasmicapp%2Fplasmic-next-auth-example&env=AUTH_SECRET,AUTH_GOOGLE_SECRET,AUTH_GOOGLE_ID&envDescription=You%20would%20need%20to%20set%20up%20.env%20keys%20for%20next-auth%20to%20work%20properly&envLink=https%3A%2F%2Fgithub.com%2Fplasmicapp%2Fplasmic-next-auth-example%2Fblob%2Fmaster%2FREADME.md)

Demo link - https://plasmic-next-auth-example.vercel.app/

Project - https://studio.plasmic.app/projects/21yfH8a5FQ3G5YYAEZCSx

## Getting Started

1. Hit the Deploy with Vercel, that should create a separate repo for you

1. Configure the `plasmic-init` to use use project id and public api token

1. Run `npx auth secret` to generate a secret for next-auth

1. [Get the API keys from google](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid) to setup the Google OAuth.

1. Run `yarn` to install dependencies

1. Run the development server: `yarn dev`

1. Open your browser to see the result at http://localhost:3000

## Learn More

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:

- [Plasmic Website](https://www.plasmic.app/)
- [Plasmic Documentation](https://docs.plasmic.app/learn/)
- [Plasmic Community Forum](https://forum.plasmic.app/)

You can check out [the Plasmic GitHub repository](https://github.com/plasmicapp/plasmic) - your feedback and contributions are welcome!

Note: This Next.js project was bootstrapped with [`create-plasmic-app`](https://www.npmjs.com/package/create-plasmic-app).

## Related Templates

### [Plasmic Split Content Starter Kit](https://vercel.com/templates/next.js/plasmic-split-content-starter-kit)

A Plasmic-based Next.js template which allows you to create landing pages and websites with support for A/B Testing and user segmenting.

### [Next.js with Checkly](https://vercel.com/templates/next.js/nextjs-checkly)

A lightweight Next.js × Checkly CLI setup to get you started with unified testing, monitoring, and observability.

### [Wix CMS: Next.js CMS starter](https://vercel.com/templates/next.js/wix-cms)

Next.js template with create-next-app, using Wix Headless for managing content via Wix CMS

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.