{"id":21590253,"url":"https://github.com/corbado/nextjs-login-page","last_synced_at":"2025-07-23T15:37:25.340Z","repository":{"id":248155831,"uuid":"823709422","full_name":"corbado/nextjs-login-page","owner":"corbado","description":"Next.js app that shows how to create a Next.js login page and handle authentication. Covers passwords, email / SMS OTP, Google social login (OAuth) and TOTP (authenticator apps).","archived":false,"fork":false,"pushed_at":"2024-07-15T16:09:09.000Z","size":118,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-24T16:17:12.538Z","etag":null,"topics":["authentication","google-login","javascript","nextauth","nextjs","oauth","otp","passkeys","passwordless","react","totp","typescript"],"latest_commit_sha":null,"homepage":"https://www.corbado.com/passkeys/nextjs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/corbado.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-03T14:53:15.000Z","updated_at":"2024-11-19T04:35:22.000Z","dependencies_parsed_at":"2024-07-13T11:07:55.182Z","dependency_job_id":null,"html_url":"https://github.com/corbado/nextjs-login-page","commit_stats":null,"previous_names":["corbado/nextjs-authentication-methods","corbado/nextjs-login-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fnextjs-login-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fnextjs-login-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fnextjs-login-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corbado%2Fnextjs-login-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corbado","download_url":"https://codeload.github.com/corbado/nextjs-login-page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235466137,"owners_count":18994726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","google-login","javascript","nextauth","nextjs","oauth","otp","passkeys","passwordless","react","totp","typescript"],"created_at":"2024-11-24T16:17:15.607Z","updated_at":"2025-01-24T16:20:55.634Z","avatar_url":"https://github.com/corbado.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1070\" alt=\"GitHub Repo Cover\" src=\"https://github.com/corbado/corbado-php/assets/18458907/aa4f9df6-980b-4b24-bb2f-d71c0f480971\"\u003e\n\n# Next.js Login Page and Authentication\n\nThis repository contains various authentication methods for a Next.js login page with TypeScript. It demonstrates how to integrate different authentication methods such as password-based login, OTP (one-time passcode) via email and SMS, Google OAuth, and TOTP (time-based one-time passcode) via authenticator app.\n\n## Table of Contents\n- [Important Directories and Files](#important-directories-and-files)\n  - [src/app/](#srcapp)\n  - [src/components/](#srccomponents)\n  - [src/lib/](#srclib)\n  - [src/models/](#srcmodels)\n  - [src/pages/api/auth/](#srcpagesapiauth)\n  - [Configuration Files](#configuration-files)\n- [Setup](#setup)\n  - [Prerequisites](#prerequisites)\n  - [Setting Up MongoDB](#setting-up-mongodb)\n  - [Configure Environment Variables](#configure-environment-variables)\n- [Usage](#usage)\n  - [Run the project locally](#run-the-project-locally)\n- [Authentication Methods](#authentication-methods)\n  - [Password-Based Authentication](#password-based-authentication)\n  - [OTP (One-Time Password)](#otp-one-time-password)\n  - [Google OAuth](#google-oauth)\n  - [TOTP (Time-based One-Time Password)](#totp-time-based-one-time-password)\n- [Conclusion](#conclusion)\n\n## Important Directories and Files\n\n### `src/app/`\nThis directory contains the main application pages and their components.\n\n- `googleLogin/page.tsx`: The main page for Google OAuth login.\n- `otp/page.tsx`: The main page for OTP (One-Time Password) authentication.\n- `password/login/page.tsx`: The login page for password-based authentication.\n- `password/signup/page.tsx`: The signup page for password-based authentication.\n- `totp/page.tsx`: The main page for TOTP (Time-based One-Time Password) authentication.\n\n### `src/components/`\nContains reusable React components used across different authentication methods.\n\n### `src/lib/`\nContains utility functions and configurations.\n\n- `mongodb.ts`: Sets up the MongoDB connection.\n\n### `src/models/`\nContains Mongoose models for MongoDB collections.\n\n- `Otp.ts`: Defines the schema for storing OTPs.\n- `Totp.ts`: Defines the schema for storing TOTP-related data.\n- `User.ts`: Defines the schema for storing user data for password-based authentication.\n\n### `src/pages/api/auth/`\nContains API route handlers for authentication.\n\n- `otp/generate.ts`: API route to generate and send OTP.\n- `otp/verify.ts`: API route to verify the OTP.\n- `password/login.ts`: API route to handle user login.\n- `password/register.ts`: API route to handle user registration.\n- `totp/generate.ts`: API route to generate TOTP secrets and QR codes.\n- `totp/status.ts`: API route to check TOTP status.\n- `totp/verify.ts`: API route to verify TOTP.\n- `[...nextauth].ts`: Configuration for NextAuth.js to handle Google OAuth.\n\n### Configuration Files\n- `.env.local`: Environment variables for local development.\n\n## Setup\n\n### Prerequisites\n\nBefore running this project, ensure you have the following installed:\n- Node.js\n- npm (Node Package Manager)\n- MongoDB\n\n### Setting Up MongoDB\n\n#### Install MongoDB\n\n1. **Download MongoDB:**\n   - Go to the [MongoDB Download Center](https://www.mongodb.com/try/download/community) and download the Community Server version suitable for your operating system.\n\n2. **Install MongoDB:**\n   - Follow the installation instructions for your operating system:\n     - **Windows:** Run the downloaded `.msi` file and follow the setup wizard.\n     - **macOS:** Run the downloaded `.tgz` file and follow the installation steps using Homebrew:\n       ```sh\n       brew tap mongodb/brew\n       brew install mongodb-community@4.4\n       ```\n     - **Linux:** Follow the specific instructions for your distribution from the [MongoDB installation documentation](https://docs.mongodb.com/manual/administration/install-on-linux/).\n\n#### Start MongoDB\n\n1. **Start the MongoDB server:**\n   - **Windows:** Run `mongod` from the Command Prompt.\n   - **macOS:** Use Homebrew to start the MongoDB service:\n     ```sh\n     brew services start mongodb/brew/mongodb-community\n     ```\n   - **Linux:** Run `mongod` from the terminal.\n\n2. **Verify MongoDB is running:**\n   - Open another terminal window and run:\n     ```sh\n     mongo\n     ```\n   - This command starts the MongoDB shell and connects to the running MongoDB instance. You should see the MongoDB shell prompt if the server is running correctly.\n\n### Configure Environment Variables\n\nCreate a `.env.local` file in the root of your project and add the following environment variables:\n\n```plaintext\nMONGODB_URI=your_database_connection_string\nGOOGLE_CLIENT_ID=your_google_client_id\nGOOGLE_CLIENT_SECRET=your_google_client_secret\nTWILIO_ACCOUNT_SID=your_twilio_account_sid\nTWILIO_AUTH_TOKEN=your_twilio_auth_token\nTWILIO_PHONE_NUMBER=your_twilio_phone_number\n```\n\n## Usage\n\n### Run the project locally\n1. Clone the repository\n   ```sh\n   git clone https://github.com/corbado/nextjs-login-page.git\n   cd nextjs-auth-methods\n   \n2. Install all the dependencies\n   ```sh\n   npm install\n\n3. Run the project locally\n   ```sh\n   npm run dev\n\n## Authentication Methods\n\n### Password-Based Authentication\nThis method allows users to register and log in using an email and password.\n\n- Signup Page: `src/app/password/signup/page.tsx`\n- Login Page: `src/app/password/login/page.tsx`\n- API Routes:\n  - Register: `src/pages/api/auth/password/register.ts`\n  - Login: `src/pages/api/auth/password/login.ts`\n- Database Model: `src/models/User.ts`\n\n### OTP (One-Time Passcode)\nThis method uses a one-time password sent to the user's email or phone for authentication.\n\n- OTP Page: `src/app/otp/page.tsx`\n- API Routes:\n  - Generate OTP: `src/pages/api/auth/otp/generate.ts`\n  - Verify OTP: `src/pages/api/auth/otp/verify.ts`\n- Database Model: `src/models/Otp.ts`\n\n### Google Social Login (OAuth)\nThis method allows users to log in using their Google account.\n\n- Google Login Page: `src/app/googleLogin/page.tsx`\n- NextAuth.js Configuration: `src/pages/api/auth/[...nextauth].ts`\n\n### TOTP (Time-based One-Time Passcode) via Authenticator App\nThis method uses TOTP for user authentication.\n\n- TOTP Page: `src/app/totp/page.tsx`\n- API Routes:\n  - Generate TOTP: `src/pages/api/auth/totp/generate.ts`\n  - Verify TOTP: `src/pages/api/auth/totp/verify.ts`\n  - Check TOTP Status: `src/pages/api/auth/totp/status.ts`\n- Database Model: `src/models/Totp.ts`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbado%2Fnextjs-login-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorbado%2Fnextjs-login-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorbado%2Fnextjs-login-page/lists"}