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

Overview

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


NextAuth.js Example App

Open Source. Full Stack. Own Your Data.

npm Bundle Size Downloads TypeScript

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

Powered By Vercel

Thanks to Vercel sponsoring this project by allowing it to be deployed for free for the entire NextAuth.js Team

License

ISC

You might also like...
React-firebase-mui-insta-reels - React Firebase Material-UI insta reels app
React-firebase-mui-insta-reels - React Firebase Material-UI insta reels app

React Firebase Material-UI insta reels app Website link : here P.S :- Open the w

React-native-wordle - A simple re-implementation of wordle using react native

react native wordle A simple re-implementation of wordle. guess the randomly cho

React-native-esbuild: The fastest bundler for React Native

Fast bundler and dev server for react-native using esbuild

React Native Firebase Authentication Starter, manage user authentication in React Native app with firebase

Sign up and sign in screens for mobile using React Native. This is an example of how to use Firebase Authentication in React Native application, how to let users create an account or log in to an existing account.

react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/portal
react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/portal

react-native-tooltiplize react native tooltip like never before, using leading packages like react-native-reanimated v2, framer-motion, and @gorhom/po

🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.

React Native Firebase React Native Firebase is a collection of official React Native modules connecting you to Firebase services; each module is a lig

React Native Local and Remote Notifications

React Native Push Notifications React Native Local and Remote Notifications for iOS and Android 🎉 Version 7.x is live ! 🎉 Check out for changes and

Device Information for React Native iOS and Android

react-native-device-info Device Information for React Native. TOC Installation Linking Usage API Troubleshooting Release Notes react-native-dom / reac

Native filesystem access for react-native

react-native-fs Native filesystem access for react-native IMPORTANT For RN 0.57 and/or Gradle 3 you MUST install react-native-fs at version @2.11.

Comments
Owner
Balázs Orbán
JS developer, open-sourcerer, hobby photographer, Hungarian by blood, Norwegian by culture.
Balázs Orbán
Ruy Armando 3 Jun 26, 2021
An opinionated template to bootstrap your next React Native app with all the time-wasting packages you need to have.

?? React Native Template TypeScript with Goodies An opinionated template to bootstrap your next React Native app with all the time-wasting packages yo

Gabriel Moncea 125 Nov 16, 2022
Twitter-Clone-Nextjs - Twitter Clone Built With React JS, Next JS, Recoil for State Management and Firebase as Backend

Twitter Clone This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm

Basudev 0 Feb 7, 2022
🚀 Aplicação mobile com React Native produzida durante o Next Level Week #05

✨ Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Native Typescript Expo ?? Projeto Aplicativo para lhe ajudar a lembrar

Danilo Alexandrino 11 May 28, 2022
It's hard to find your next online race. So I created a calendar of races from multiple leagues so people could just find new places to race on their favourite sims.

A listing tool that allows me to add races into a Firebase database, and then lets users filter by their favourite simracing game. This project was bo

Alex Lillo 0 Oct 11, 2021
Sms - WebProgrammingLab with next.js and chakra-ui

School Management System This work is meant for WebProgramming Lab This project

Ali Mehasin 1 Jan 12, 2022
Redux bindings for Firebase. Includes React Hooks and Higher Order Components.

react-redux-firebase Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React. Usage Note If you are starting a new proje

Scott Prue 2.5k Dec 3, 2022
Alarm clock functionality for react native ios and android using react-native-push-notification and react-native-community/async-storage

react-native-simple-alarm Alarm clock functionality for react native ios and android built using react-native-push-notification and react-native-commu

Jordan Daniels 70 Nov 30, 2022
A barcode scanner component for react native - not maintained anymore - use react-native-camera

react-native-barcodescanner - not maintained anymore - use react-native-camera Version 0.4.0 of react-native-camera includes barcode scanning for andr

Idea Creation / E-GUMA 540 Oct 31, 2022
React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native WebRTC 120 Nov 21, 2022