NextAuth Session Modal Timeout

animation-modal-logout.mp4

• Tailwind Responsive Utility Class Design
  With responsive utility classes, you can ensure your logout countdown session timer modal adapts smoothly to different screen sizes.

• Seamless Integration with NextAuth NextAuth is a popular authentication library for Next.js applications, allowing you to add OAuth providers like Google, Facebook, and Twitter, among others. The logout countdown session timer modal can be easily integrated with NextAuth's session management capabilities, ensuring a seamless experience for users when they sign in or out.

• Real-time Countdown Timer Real-time countdown that shows users the time remaining until their session expires. This allows users to be aware of their session status and make informed decisions about extending or ending their sessions.

• Session Extension Functionality Another functional highlight of the logout countdown session timer modal is the ability for users to extend their sessions with a single click. This feature ensures that users don't get logged out unintentionally, preserving their work and maintaining a seamless user experience.

• Secure Logout Option To further enhance security, the logout countdown session timer modal provides users with a clear and straightforward logout option. By clicking the "Logout" button, users can end their session and ensure that their account is secure, especially when using shared devices.

  
  

  

  
  

  NextAuth.js - Example App

  Open Source. Full Stack. Own Your Data.

  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-modal.vercel.app

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

Getting Started

1. Clone the repository and install dependencies

git clone https://github.com/evanmeeks/next-auth-example-modal.git
cd next-auth-example-modal
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:

• Docs: next-auth.js.org/adapters/overview

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

3. 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 or deploy the example instantly using Vercel

Acknowledgements

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