nextjs-13-next-auth-app

Showcaseing NextAuth.js + Next.js 13 with React Server Components

ISC License

Stars
53

The example repository is maintained from a monorepo. Pull Requests should be opened against nextauthjs/next-auth.

Overview

NextAuth.js is a complete open source authentication solution.

This is an example application that shows how next-auth is applied to a basic Next.js app.

The deployed version can be found at next-auth-example.vercel.app

About NextAuth.js

NextAuth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for Next.js and Serverless. Our goal is to support even more frameworks in the future.

Go to next-auth.js.org for more information and documentation.

NextAuth.js is not officially associated with Vercel or Next.js.

Getting Started

1. Clone the repository and install dependencies

git clone https://github.com/nextauthjs/next-auth-example.git
cd next-auth-example
npm install

2. Configure your local environment

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Add details for one or more providers (e.g. Google, Twitter, GitHub, Email, etc).

Database

A database is needed to persist user accounts and to support email sign in. However, you can still use NextAuth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, JSON Web Tokens will be enabled by default.

You can skip configuring a database and come back to it later if you want.

For more information about setting up a database, please check out the following links:

3. Configure Authentication Providers

  1. Review and update options in pages/api/auth/[...nextauth].js as needed.

  2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of {server}/api/auth/callback/{provider}.

e.g. For Google OAuth you would use: http://localhost:3000/api/auth/callback/google

A list of configured providers and their callback URLs is available from the endpoint /api/auth/providers. You can find more information at https://next-auth.js.org/configuration/providers/oauth

  1. You can also choose to specify an SMTP server for passwordless sign in via email.

4. Start the application

To run your site locally, use:

npm run dev

To run it in production mode, use:

npm run build
npm run start

5. Preparing for Production

Follow the Deployment documentation

Acknowledgements

License

ISC

Related Projects