Learn how to implement a Next.js login page with passwords, email OTP, SMS OTP, Google social (OAuth), TOTP (authenticator app) & passkeys in this tutorial.
Amal
Created: July 16, 2024
Updated: February 17, 2025
Our mission is to make the Internet a safer place, and the new login standard passkeys provides a superior solution to achieve that. That's why we want to help you understand passkeys and its characteristics better.
2.1 Prerequisites
2.2 Create a New Next.js Project
2.3 Start the Development Server
2.4 Set Up Environment Variables
5.1 Set Up Password-Based Project
5.2 Installing the Relevant Dependencies
5.3 Creating the Auth Component
5.4 Creating the Signup Component
5.5 Creating the Login Component
5.6.1 Register API Route
5.6.2 Login API Route
5.7.1 Setting Up MongoDB Locally
5.7.2 Database Connection File
5.8 Testing the Authentication Flow
5.8.1 Testing the Signup Flow
5.8.2 Testing the Login Flow
6.1 Set Up OTP-Based Authentication Project
6.2 Installing the Relevant Dependencies
6.3 Set Up MongoDB for OTP Storage
6.4 Implement Backend API Route for Generating OTPs via Email and SMS
6.5 Implement Backend API Route for Verifying OTP
6.6 Create Frontend OTP Authentication Component
6.7 Testing the OTP Authentication Flow
6.7.1 Testing OTP Authentication via Email
6.7.2 Testing OTP Authentication via SMS
7.1 Set Up Google-Based Authentication Project
7.2 Google Cloud Setup for OAuth 2.0 Credentials
7.3 Installing the Relevant Dependencies
7.5 Creating Authentication Components
7.5.1 Creating SignInButton Component
7.5.2 Creating LogoutButton Component
7.5.3 Creating ClientProvider Component
7.6 Configuring the Root Layout
7.7 Creating Google Authentication Page
7.8 Testing the Google Authentication Flow
8.1 Set Up TOTP-Based Authentication Project
8.2 Installing the Relevant Dependencies
8.4 Implement API Route For Generating the TOTP Secret and QR Code
8.5 Implement API Route For Checking the TOTP Authentication Status
8.6 Implement API Route For Verifying the TOTP
Next.js is a powerful framework that allows developers to build fast and user-friendly web applications. One of the most critical aspects of any web application is user authentication.
In this guide, we'll walk you through the process of implementing a login page in Next.js, covering various authentication methods including:
If you want to see the complete code, please check out our Next.js login page repository on GitHub.
Recent Articles
Before we jump into the specific authentication methods, we need to perform some general project setup steps.
To follow this guide, we require some basic understanding of
Open your terminal and run the following command to create a new Next.js project:
npx create-next-app@latest nextjs-auth-methods
In the installation guide steps, we select the following:
Navigate to your project directory:
cd nextjs-login
Ben Gould
Head of Engineering
I’ve built hundreds of integrations in my time, including quite a few with identity providers and I’ve never been so impressed with a developer experience as I have been with Corbado.
10,000+ devs trust Corbado & make the Internet safer with passkeys. Got questions? We’ve written 150+ blog posts on passkeys.
Join Passkeys CommunityTo verify that your Next.js project is set up correctly, start the development server:
npm run dev
Open your browser and navigate to http://localhost:3000
. You should see the default Next.js welcome page.
Create a .env.local
file in the root of your project to store environment variables. Add your variables here:
MONGODB_URI=your_database_connection_string GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret TWILIO_ACCOUNT_SID=your_twilio_account_sid TWILIO_AUTH_TOKEN=your_twilio_auth_token TWILIO_PHONE_NUMBER=your_twilio_phone_number
In 2024, there are several ways to securely authenticate your users. Every application has a different user base and thus different requirements. The following table should help you find your best authentication method:
Approach | Security | Biggest risk | Methods |
---|---|---|---|
Password-based | Low | Credential stuffing | Password |
Password-less | Medium | Phishing | Email OTP, SMS OTP, social login |
Multi-factor authentication (MFA) | High | Spear phishing | Combination of two of the following methods: Password, email OTP, SMS OTP, TOTP (via authenticator apps) |
Phishing-resistant MFA | Highest | Weak fallbacks | Passkeys |
The Next.js login page repository covers various authentication methods, all implemented in the same project:
Each method has its own directory structure and relevant files, which will be detailed in the sections below.
Let’s start with password-based authentication as the first authentication method we’ll implement. We will guide you step-by-step through creating password-based authentication using Next.js and Tailwind CSS. Whether you're building a new app or enhancing an existing one, you'll learn how to implement sign-up and login features with responsive design.
The following steps are required to implement Password-based authentication:
In this section, we'll dive into the specific files and structure needed for password-based authentication. Here's a clear overview of the relevant directory structure and files:
Key Files and Their Roles:
app/password/login/page.tsx
: Contains the login form component.app/password/signup/page.tsx
: Contains the signup form component.components/AuthForm.tsx
: Reusable form component for login and signup.lib/mongodb.ts
: Sets up the MongoDB connection.models/User.ts
: Defines the user schema.pages/api/auth/password/login.ts
: API route to handle login requests.pages/api/auth/password/register.ts
: API route to handle signup requests.To set up password-based authentication, you need to install the following dependencies:
bcryptjs: This library allows you to hash passwords securely.
mongoose: This library helps you model your data in MongoDB. It provides a straightforward, schema-based solution to model your application data. You can install these dependencies using npm:
npm install bcryptjs mongoose
In this section, we will create a reusable Auth component that will be used for both the login and signup forms. This component will handle the form structure, styling, and state management.
This component will be reused in both the login and signup components, reducing code duplication and making the forms easy to manage and style.
AuthForm
component in the components
directory.AuthForm
component takes mode
, onSubmit
, and resetForm
as props. mode
is used to differentiate between login and signup forms, onSubmit
handles form submission, and resetForm
resets the form fields after submission.useState
to manage email and password input states.handleSubmit
function prevents the default form submission, gathers the input data, and calls the onSubmit
function passed as a prop.Here's the complete code for the AuthForm
component:
"use client"; import { useState, FormEvent, useEffect } from "react"; interface AuthFormProps { mode: "Signup" | "Login"; onSubmit: (data: { email: string, password: string }) => void; resetForm?: boolean; } const AuthForm: React.FC<AuthFormProps> = ({ mode, onSubmit, resetForm }) => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); useEffect(() => { if (resetForm) { setEmail(""); setPassword(""); } }, [resetForm]); const handleSubmit = (e: FormEvent) => { e.preventDefault(); onSubmit({ email, password }); }; return ( <form onSubmit={handleSubmit} className="space-y-6"> <h2 className="text-2xl font-bold mb-4 text-center">{mode}</h2> <div> <label className="block text-gray-700 dark:text-gray-300">Email</label> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="mt-1 p-2 w-full border rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600" /> </div> <div> <label className="block text-gray-700 dark:text-gray-300"> Password </label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="mt-1 p-2 w-full border rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600" /> </div> <button type="submit" className="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300" > {mode} </button> </form> ); }; export default AuthForm;
In this section, we will detail how to create the Signup component for user registration. This component will handle user input, submission, and display relevant messages.
Signup
component in the app/password/signup
directory.useState
to manage the message and success states.handleSignup
function manages the form submission, sends a POST request to the server, and updates the state based on the response.Here's the complete code for the Signup component:
"use client"; import { useState } from "react"; import AuthForm from "../../../components/AuthForm"; import Link from "next/link"; const Signup: React.FC = () => { const [message, setMessage] = useState(""); const [isSuccessful, setIsSuccessful] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const handleSignup = async (data: { email: string, password: string }) => { const res = await fetch("/api/auth/password/register", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data), }); const result = await res.json(); setMessage(result.message); if (res.status === 201) { setIsSuccessful(true); setIsSuccess(true); } else { setIsSuccess(false); } }; return ( <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900"> <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-md"> {isSuccessful ? ( <> <p className="text-green-500 text-center text-lg font-semibold"> Welcome! </p> </> ) : ( <AuthForm mode="Signup" onSubmit={handleSignup} /> )} {message && ( <p className={`text-center mt-4 ${ isSuccess ? "text-green-500" : "text-red-500" }`} > {message} </p> )} {isSuccessful && ( <Link href="/password/login"> <p className="text-center text-blue-500 font-bold underline py-4"> Back to login </p> </Link> )} </div> </div> ); }; export default Signup;
Next, we will create the Login component for user authentication. This component will handle user input, submission, and display relevant messages.
Login
component in the app/password/login
directory.useState
to manage the message and success states.handleLogin
function manages the form submission, sends a POST request to the server, and updates the state based on the response.Here's the complete code for the Login
component:
import type { NextApiRequest, NextApiResponse } from "next"; import dbConnect from "@/lib/mongodb"; import User from "@/models/User"; import bcrypt from "bcryptjs"; export default async function handler( req: NextApiRequest, res: NextApiResponse ) { await dbConnect(); const { email, password } = req.body; if (!email || !password) { return res.status(400).json({ message: "Email and password are required" }); } const user = await User.findOne({ email }); if (!user) { return res.status(400).json({ message: "Invalid credentials" }); } const isValidPassword = bcrypt.compareSync(password, user.password); if (!isValidPassword) { return res.status(400).json({ message: "Invalid credentials" }); } return res.status(200).json({ message: "Login successful" }); }
In this section, we will create API endpoints to handle user registration and login requests. The API routes handle incoming HTTP requests for user registration and login.
register.ts
file in the pages/api/auth/password
directory.bcryptjs
.import type { NextApiRequest, NextApiResponse } from "next"; import dbConnect from "@/lib/mongodb"; import User from "@/models/User"; import bcrypt from "bcryptjs"; export default async function handler( req: NextApiRequest, res: NextApiResponse ) { await dbConnect(); const { email, password } = req.body; if (!email || !password) { return res.status(400).json({ message: "Email and password are required" }); } const existingUser = await User.findOne({ email }); if (existingUser) { return res.status(400).json({ message: "User already exists" }); } const hashedPassword = bcrypt.hashSync(password, 10); const newUser = new User({ email, password: hashedPassword }); await newUser.save(); return res.status(201).json({ message: "Signup successful!" }); }
login.ts
under src/pages/api/auth/password
directoryimport type { NextApiRequest, NextApiResponse } from "next"; import dbConnect from "@/lib/mongodb"; import User from "@/models/User"; import bcrypt from "bcryptjs"; export default async function handler( req: NextApiRequest, res: NextApiResponse ) { await dbConnect(); const { email, password } = req.body; if (!email || !password) { return res.status(400).json({ message: "Email and password are required" }); } const user = await User.findOne({ email }); if (!user) { return res.status(400).json({ message: "Invalid credentials" }); } const isValidPassword = bcrypt.compareSync(password, user.password); if (!isValidPassword) { return res.status(400).json({ message: "Invalid credentials" }); } return res.status(200).json({ message: "Login successful" }); }
In this section, we will set up a connection to MongoDB, which is crucial for handling user data in our authentication system.
mongodb://localhost:27017
).Create a new database named user_management
.
- Create a new collection within this database named `users`.
Here is a high-level description of the
users
collection relevant for the password-based authentication method:
import mongoose from "mongoose"; const MONGODB_URI: string | undefined = process.env.MONGODB_URI; if (!MONGODB_URI) { throw new Error("Please define the MONGODB_URI environment variable"); } interface MongooseCache { conn: mongoose.Connection | null; promise: Promise<mongoose.Connection> | null; } declare global { var mongoose: MongooseCache; } let cached = global.mongoose; if (!cached) { cached = global.mongoose = { conn: null, promise: null }; } async function dbConnect(): Promise<mongoose.Connection> { if (cached.conn) { return cached.conn; } if (!cached.promise) { const opts = { bufferCommands: false }; cached.promise = mongoose .connect(MONGODB_URI as string, opts) .then((mongoose) => { return mongoose.connection; }); } cached.conn = await cached.promise; return cached.conn; } export default dbConnect;
To avoid TypeScript errors regarding the global cache, add the following to a global.d.ts
file for Global Type Declarations
import mongoose from "mongoose"; declare global { var mongoose: { conn: mongoose.Connection | null; promise: Promise<mongoose.Connection> | null; }; }
In this section, we'll guide you on how to start the application and test the signup and login flows.
Route: http://localhost:3000/password/signup
Steps:
Screenshot of Signup Form:
Route: http://localhost:3000/password/login
Steps:
Screenshot of Login Form:
If the user enters invalid credentials (incorrect email or password), the system provides an error message.
You've successfully implemented a password-based authentication system with Next.js and Tailwind CSS.
Let’s now have a look at the passwordless authentication methods.
Passwordless authentication eliminates traditional passwords by using a unique, time-sensitive OTP sent to a user's email or phone. This enhances security by reducing the risk of breaches, improves user experience by removing the need to remember passwords, and cuts support costs by minimizing password-related issues.
OTP authentication is a widely used security mechanism for verifying user identity by generating a unique passcode valid for a one-time usage. In this section, we will guide you through implementing One-Time Passcode.
The following steps are required to implement OTP-based authentication:
Good to Know: Understanding the OTP Flow
Implementing OTP authentication in your application involves several key steps. To ensure you have a clear understanding of this process, let's break down each step:
In this section, we'll analyze the specific files and structure needed for OTP-based authentication via email and SMS. Here's an overview of the relevant directory structure and files:
Key Files and Their Roles:
src/app/otp/page.tsx
: Contains the user interface for OTP authentication, including form for entering contact information and OTPs.src/models/Otp.ts
: Defines the MongoDB schema for storing OTPs, including fields for email, phone number, OTP, and creation date.src/pages/api/auth/otp/generate.ts
: API route to handle generating OTPs, including generating, hashing, storing OTPs, and sending them via email or SMS.src/pages/api/auth/otp/verify.ts
: API route to handle verifying OTPs, including retrieving, comparing, validating, and deleting OTPs from the database.To set up OTP authentication, you need to install the following dependencies:
Please note that you will need to create a Twilio account and obtain the relevant credentials (Account SID, Auth Token, and Twilio phone number) and add them to the environment variables file.
You can install these dependencies using the following command:
npm install nodemailer twilio
To store OTPs, we need to set up a MongoDB schema. In this section, we will guide you through the creation of an OTP model in MongoDB.
models/Otp.ts
in your project directory.email
: An optional string field to store the user's email.phoneNumber
: An optional string field to store the user's phone number.otp
: A required string field to store the OTP.createdAt
: A date field with a default value of the current date. This field has an index with an expiration time of 10 minutes, meaning the document will be automatically deleted after 10 minutes.Otp
is a model created from the OtpSchema
. If the model already exists in mongoose.models, it uses the existing model; otherwise, it creates a new one.Here is a high-level description of the otps
collection relevant for the OTP-based authentication method:
Here's the complete code for the OTP model:
import mongoose, { Document, Schema } from "mongoose"; // Interface defining the OTP document structure export interface IOtp extends Document { email?: string; // Optional email field phoneNumber?: string; // Optional phone number field otp: string; // OTP value createdAt: Date; // Creation timestamp } // Define the OTP schema const OtpSchema: Schema<IOtp> = new Schema({ email: { type: String }, // Email field phoneNumber: { type: String }, // Phone number field otp: { type: String, required: true }, // OTP field (required) createdAt: { type: Date, default: Date.now, index: { expires: "10m" } }, // Creation timestamp with 10-minute expiry }); // Ensure at least one of email or phoneNumber is provided OtpSchema.path("email").validate(function (value) { return this.email || this.phoneNumber; }, "Email or phone number is required"); // Create or reuse the OTP model const Otp = mongoose.models.Otp || mongoose.model<IOtp>("Otp", OtpSchema); export default Otp;
To generate OTPs and send them via email or SMS, we need to implement an API route. In this section, we will guide you through creating an API route that handles OTP generation and delivery.
pages/api/auth/otp/generate.ts
in your project directory. bcrypt
to hash the OTP for security.Nodemailer
to send the OTP via email.For testing purposes, we use an Ethereal email account to preview the email link in the console (this is implemented in the Generate API route). After clicking the Generate OTP
button, check the console for the Email Preview URL. Copy and paste this link into your browser to view your OTP code.
Copy and paste this link into your browser to view your OTP code.
- Send OTP via SMS: After setting up your Twilio account and adding the necessary credentials (Account SID, Auth Token, and Twilio phone number), the OTP will be sent to the entered phone number using Twilio's API.
This API route handles generating, hashing, and storing OTPs, and sends them to users via email or SMS based on the specified delivery method. Combine all the steps into the Generate API route:
import type { NextApiRequest, NextApiResponse } from "next"; import nodemailer from "nodemailer"; import bcrypt from "bcryptjs"; import Otp from "@/models/Otp"; import dbConnect from "@/lib/mongodb"; import twilio from "twilio"; // Function to generate a 6-digit OTP const generateOtp = () => Math.floor(100000 + Math.random() * 900000).toString(); // Function to create an Ethereal email account for testing purposes const createEtherealAccount = async () => { // Create a test account using Ethereal let testAccount = await nodemailer.createTestAccount(); // Configure the transporter using the test account return nodemailer.createTransport({ host: testAccount.smtp.host, port: testAccount.smtp.port, secure: testAccount.smtp.secure, auth: { user: testAccount.user, pass: testAccount.pass, }, }); }; // Function to send an email with the OTP const sendEmail = async (email: string, otp: string) => { // Create the transporter for sending the email let transporter = await createEtherealAccount(); // Define the email options const mailOptions = { from: "[app@test.com](mailto:app@test.com)", // Sender address to: email, // Recipient address subject: "Your OTP Code", // Subject line text: `Your OTP code is ${otp}`, // Plain text body }; // Send the email and log the preview URL let info = await transporter.sendMail(mailOptions); console.log("Email Preview URL: %s", nodemailer.getTestMessageUrl(info)); }; // Function to send an SMS with the OTP const sendSms = async (phoneNumber: string, otp: string) => { // Create a Twilio client const client = twilio( process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN ); // Send the OTP via SMS await client.messages.create({ body: `Your OTP code is ${otp}`, // Message body from: process.env.TWILIO_PHONE_NUMBER, // Sender phone number to: phoneNumber, // Recipient phone number }); }; // API route handler for generating and sending OTP export default async function handler( req: NextApiRequest, res: NextApiResponse ) { // Connect to the MongoDB database await dbConnect(); // Extract email, phone number, and delivery method from the request body const { email, phoneNumber, deliveryMethod } = req.body; // Validate input if (!email && !phoneNumber) { return res .status(400) .json({ message: "Email or phone number is required" }); } if (!deliveryMethod || !["email", "sms"].includes(deliveryMethod)) { return res .status(400) .json({ message: "Valid delivery method is required" }); } // Generate a 6-digit OTP and hash it const otp = generateOtp(); const hashedOtp = bcrypt.hashSync(otp, 10); // Create a new OTP record in the database const newOtp = new Otp({ email: deliveryMethod === "email" ? email : undefined, // Store email if the delivery method is email phoneNumber: deliveryMethod === "sms" ? phoneNumber : undefined, // Store phone number if the delivery method is SMS otp: hashedOtp, // Store the hashed OTP }); await newOtp.save(); // Send the OTP via the selected delivery method if (deliveryMethod === "email" && email) { await sendEmail(email, otp); // Send OTP via email } else if (deliveryMethod === "sms" && phoneNumber) { await sendSms(phoneNumber, otp); // Send OTP via SMS } else { return re.status(400).json({ message: "Invalid delivery method or missing contact information", }); } // Respond with a success message return res.status(200).json({ message: "OTP sent successfully" }); }
To verify OTPs sent via email or SMS, we need to implement an API route. In this section, we will guide you through creating an API route that handles OTP verification.
pages/api/auth/otp/verify.ts
in your project directory.Combine all the steps into the Verify API route. Here’s the complete code:
import type { NextApiRequest, NextApiResponse } from "next"; import bcrypt from "bcryptjs"; import dbConnect from "@/lib/mongodb"; import Otp from "@/models/Otp"; // API route handler for verifying OTP export default async function handler( req: NextApiRequest, res: NextApiResponse ) { // Connect to the MongoDB database await dbConnect(); // Extract email, phone number, and OTP from the request body const { email, phoneNumber, otp } = req.body; // Validate input: Ensure either email or phone number, and OTP are provided if ((!email && !phoneNumber) || !otp) { return res .status(400) .json({ message: "Email or phone number and OTP are required" }); } // Find OTP record by email or phone number const otpRecord = email ? await Otp.findOne({ email }) // Find by email if email is provided : await Otp.findOne({ phoneNumber }); // Find by phone number if phone number is provided // Check if OTP record exists if (!otpRecord) { return res.status(400).json({ message: "OTP not found or expired" }); } // Compare provided OTP with the hashed OTP in the database const isMatch = bcrypt.compareSync(otp, otpRecord.otp); // If OTP does not match, return an error if (!isMatch) { return res.status(400).json({ message: "Invalid OTP" }); } // Delete the OTP record after successful verification if (email) { await Otp.deleteOne({ email }); } else if (phoneNumber) { await Otp.deleteOne({ phoneNumber }); } // Respond with a success message return res.status(200).json({ message: "OTP verified successfully" }); }
To create the user interface for OTP authentication via email and SMS, we need to implement a component that handles OTP generation and verification. In this section, we will guide you through creating a user-friendly interface for this purpose.
src/app/otp/page.tsx
in your project directory.validateContactInfo
: Is a function to validate the contact information based on the selected delivery method.handleGenerateOTP
: Is a function to handle OTP generation. It validates the email and phone number and sends a request to generate an OTP.handleVerifyOtp
: A function to handle OTP verification. It sends a request to verify the OTP.Here's the complete code for the OTP auth component:
"use client"; import React, { useState } from "react"; const OtpPage: React.FC = () => { const [contactInfo, setContactInfo] = useState(""); const [deliveryMethod, setDeliveryMethod] = useState("email"); const [otp, setOtp] = useState(""); const [message, setMessage] = useState(""); const [isOtpSent, setIsOtpSent] = useState(false); const [isOtpVerified, setIsOtpVerified] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const validateContactInfo = (info: string): boolean => { if (deliveryMethod === "email") { // Regular expression for email validation const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(info); } else if (deliveryMethod === "sms") { // Regular expression for phone number validation const re = /^\+?[1-9]\d{1,14}$/; return re.test(info); } return false; }; const handleGenerateOtp = async () => { if (!contactInfo) { setMessage("Contact information is required"); setIsSuccess(false); return; } if (!validateContactInfo(contactInfo)) { setMessage( deliveryMethod === "email" ? "Invalid email format" : "Invalid phone number format" ); setIsSuccess(false); return; } const res = await fetch("/api/auth/otp/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: deliveryMethod === "email" ? contactInfo : undefined, phoneNumber: deliveryMethod === "sms" ? contactInfo : undefined, deliveryMethod, }), }); const result = await res.json(); setMessage(result.message); if (res.status === 200) { setIsOtpSent(true); setIsSuccess(true); } else { setIsSuccess(false); } }; const handleVerifyOtp = async () => { const res = await fetch("/api/auth/otp/verify", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: deliveryMethod === "email" ? contactInfo : undefined, phoneNumber: deliveryMethod === "sms" ? contactInfo : undefined, otp, }), }); const result = await res.json(); setMessage(result.message); if (res.status === 200) { setIsOtpVerified(true); setIsSuccess(true); } else { setIsSuccess(false); } }; return ( <div className="flex items-center justify-center min-h-screen bg-gray-100"> <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full"> <h1 className="text-2xl font-semibold mb-6 text-center"> OTP Authentication </h1> {!isOtpSent ? ( <> <div className="mb-4"> <label className="block text-gray-800">OTP Delivery Method</label> <select value={deliveryMethod} onChange={(e) => setDeliveryMethod(e.target.value)} className="w-full p-3 border border-gray-300 rounded" > <option value="email">Email</option> <option value="sms">SMS</option> </select> </div> <input type={deliveryMethod === "email" ? "email" : "text"} placeholder={ deliveryMethod === "email" ? "Enter your email" : "Enter your phone number" } value={contactInfo} onChange={(e) => setContactInfo(e.target.value)} required className="w-full p-3 border border-gray-300 rounded mb-4" /> <button onClick={handleGenerateOtp} className="w-full bg-blue-500 text-white p-3 rounded hover:bg-blue-600" > Generate OTP </button> </> ) : ( <div> {!isOtpVerified ? ( <div> <input type="text" placeholder="Enter OTP" value={otp} onChange={(e) => setOtp(e.target.value)} required className="w-full p-3 border border-gray-300 rounded mb-4" /> <button onClick={handleVerifyOtp} className="w-full bg-blue-500 text-white p-3 rounded" > Verify OTP </button> </div> ) : ( <div className="text-center"> <h2 className="text-xl font-semibold">Welcome</h2> </div> )} </div> )} {message && ( <p className={`text-center mt-4 ${isSuccess ? "text-green-500" : "text-red-500"}`}> {message} </p> )} </div> </div> ); }; export default OtpPage;
To ensure the OTP authentication works correctly via both email and SMS, we will conduct some testing. This section covers the steps and routes involved in testing OTP authentication, along with screenshots for better clarity.
Route: http://localhost:3000/otp
Steps:
http://localhost:3000/otp
Generate OTP
button.- Check the console for the Ethereal email preview URL to view the OTP (since we're using Ethereal for testing).
- Please copy and paste it into your browser to get the OTP code.
Verify OTP
button.- Check for a success message indicating that the OTP was verified successfully.
Route:http://localhost:3000/otp
Steps:
http://localhost:3000/otp
SMS
from the dropdown menu for OTP delivery method.
4. Generate OTP:
Click the
Generate OTP
button. Then, check your phone for the SMS containing the OTP fron the Twilio trial account.
After the OTP is generated, an OTP record is saved to the otps
collection in the MongoDB database.
Verify OTP
button. Then, check for a success message indicating that the OTP was verified successfully.You've successfully implemented an OTP-based authentication system with Next.js and Tailwind CSS.
Using OAuth for third-party authentication is a very popular and user-friendly solution. In this section, we'll explore how to integrate Google authentication into a Next.js application using NextAuth.js.
We chose NextAuth.js for Google authentication because it's easy to integrate and offers robust security features. NextAuth.js simplifies adding Google OAuth, providing a seamless and secure login experience. It handles the complex parts of authentication, so we can focus on building our app. Plus, it's highly customizable, making it a perfect fit for our needs.
Google social login interface
The following steps covers the implementation of the Google authentication:
SignInButton
Component
5.2 Creating LogoutButton
Component
5.3 Creating ClientProvider
ComponentIn this section, we'll detail how to set up Google-based authentication (Google social login) for your Next.js project. We'll break down the specific files and structure. Let's start with an overview of the relevant directory structure and the key files involved:
Key Files and Their Roles:
.env.local
: In this file will store the environment variables which are your Google client ID GOOGLE_CLIENT_ID
and secret GOOGLE_CLIENT_SECRET
src/pages/api/auth/[...nextauth].ts
: This file sets up NextAuth.js for handling authentication. It includes configuration for Google as an authentication provider.src/components/ClientProvider.tsx
: A wrapper component that provides session management using NextAuth.js. It ensures that session data is available throughout your application.src/app/layout.tsx
: The root layout for your application, which wraps all pages with the ClientProvider to manage session state globally.src/components/SignInButton.tsx
: A component that renders a button for signing in with Google. It handles the sign-in process when clicked.src/components/LogoutButton.tsx
: A component that renders a logout button. It handles signing the user out and redirecting them appropriately.src/app/googleLogin/page.tsx
: The main page for handling Google login. It displays different content based on whether the user is signed in or not.- Enter a project name and click "Create".
- After configuring the consent screen, choose "Web application" as the application type.
- Enter a name for the OAuth client and add your application's URLs in the "Authorized redirect URIs" field. Typically, this would be something like `http://localhost:3000/api/auth/callback/google` for local development.
- Click "Create" and note down your Client ID and Client Secret.
.env.local
file and add the following environment variables:GOOGLE_CLIENT_ID=<YOUR_GOOGLE_CLIENT_ID> GOOGLE_CLIENT_SECRET=<YOUR_GOOGLE_CLIENT_SECRET>
First, install the necessary dependencies:
You can install the dependencies using the following command:
npm install next-auth react-icons
In this section, we will configure NextAuth.js to handle Google authentication in our Next.js application. We will walk through the specific file used for this configuration, its location, purpose, and explain the main concepts involved. Additionally, we’ll discuss the reason behind the file naming convention [...nextauth].
Good to know: Reason for the Naming Convention [...nextauth]
The file is named [...nextauth].ts to leverage Next.js's dynamic routing feature. The square brackets [ ] denote a dynamic route segment, and the three dots ... indicate a catch-all route. This means that any API route starting with /api/auth/ (e.g., /api/auth/signin, /api/auth/signout, /api/auth/callback) will be handled by this file. This naming convention provides a flexible way to manage all authentication-related routes in a single file.
src/pages/api/auth/[...nextauth].ts
in your project directoryNextAuth
: The core module for handling authentication in Next.js.GoogleProvider
: A provider module for handling Google OAuth authentication.GoogleProvider
module. The clientId
and clientSecret
are fetched from environment variables to ensure they are not hardcoded and remain secure.session
function called during the authentication process. The session
function is called whenever a session is checked or created. It modifies the session object to include the user's name and email from the token.Here’s the complete code of the [...nextauth].ts
file:
import NextAuth from 'next-auth'; import GoogleProvider from 'next-auth/providers/google'; // Define the Session interface to type the user data export interface Session { user: { name: string | null; email: string | null; }; } export default NextAuth({ // Define the authentication providers providers: [ GoogleProvider({ // Set the Google client ID and client secret from environment variables clientId: process.env.GOOGLE_CLIENT_ID || '', clientSecret: process.env.GOOGLE_CLIENT_SECRET || '', }), ], // Define callback functions to manage session and token callbacks: { // Modify the session object before it is returned to the client async session({ session, token }) { // Ensure the session user object exists and set name and email from token if (session.user) { session.user.name = token.name || null; session.user.email = token.email || null; } return session; }, }, });
In this section, we'll create the essential components needed for handling authentication in our Next.js application. These components include a sign-in button for Google authentication and a logout button for signing out. We'll also create a client provider to manage session state across the application.
Here are the components we'll create:
SignInButton.tsx
LogoutButton.tsx
ClientProvider.tsx
These components will be placed in the src/components
directory. Each of these components serves a specific purpose in the authentication flow.
src/components/SignInButton.tsx
signIn
function: From next-auth/react, it handles the sign-in process with Google.signIn
function with Google as the provider and includes the prompt: "select_account" parameter to ensure the account chooser appears.Here’s the complete code of the SignInButton.tsx
file:
"use client"; import { signIn } from "next-auth/react"; import { FaGoogle } from "react-icons/fa"; function SignInButton() { return ( <button onClick={() => signIn("google", { prompt: "select_account" })} className="flex items-center justify-center px-4 py-2 rounded border-gray-900 border hover:bg-blue-100" > <FaGoogle className="mr-2" /> Sign in with Google </button> ); } export default SignInButton;
src/components/LogoutButton.tsx
signOut
function: From next-auth/react
, it handles the sign-out process.signOut
function and redirects the user to the /googleLogin
page after signing out.Here’s the complete code of the LogoutButton.tsx
file:
"use client"; import { signOut } from "next-auth/react"; function LogoutButton() { return ( <button onClick={() => signOut({ callbackUrl: "/googleLogin" })} className="px-4 py-2 bg-blue-300 rounded hover:bg-blue-400" > Logout </button> ); } export default LogoutButton;
src/components/ClientProvider.tsx
SessionProvider
to manage session state globally.next-auth/react
, it wraps the children components to provide session management.Here’s the complete code of the ClientProvider.tsx
file:
"use client"; import { SessionProvider } from "next-auth/react"; import { ReactNode } from "react"; // Define a type for the component's props interface Props { children: ReactNode; } const ClientProvider = ({ children }: Props) => { return ( // Wrap the children with the SessionProvider to manage session state <SessionProvider>{children}</SessionProvider> ); }; export default ClientProvider;
In this section, we'll configure the root layout of your Next.js application to ensure that session state is managed globally. This involves using the ClientProvider
component, which wraps the entire application and provides session management using NextAuth.js.
src/app/layout.tsx
ClientProvider
, enabling global session management.<ClientProvider>
: Wraps the children components with the ClientProvider
to manage session state globally. This ensures that session information is accessible across all pages and components in your application.Here’s the complete code of the layout.tsx
file:
import "./globals.css"; import ClientProvider from "@/components/ClientProvider"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> {/* Wrap the children with ClientProvider to manage session state */} <ClientProvider>{children}</ClientProvider> </body> </html> ); }
In this section, we will focus on how to handle user sign-in and sign-out actions on the main login page. We will use the previously created SignInButton
and LogoutButton
components and ensure they are integrated seamlessly with our authentication flow.
src/app/googleLogin/page.tsx
next-auth/react
that provides session information.
useSession
hook fetches the current session data.LogoutButton
.SignInButton
.Here’s the complete code of the page.tsx
file:
"use client"; import { useSession } from "next-auth/react"; import SignInButton from "../../components/SignInButton"; import LogoutButton from "../../components/LogoutButton"; function GoogleLoginPage() { const { data: session } = useSession(); if (session) { return ( <div className="flex items-center justify-center min-h-screen bg-gray-100"> <div className="bg-white p-6 rounded-lg shadow-md text-center"> <h1 className="text-2xl font-semibold mb-4"> Welcome, {session.user?.name}! </h1> <LogoutButton /> </div> </div> ); } return ( <div className="flex items-center justify-center min-h-screen bg-gray-100"> <div className="bg-white p-6 rounded-lg shadow-md text-center"> <h1 className="text-2xl font-semibold mb-4">Social Login</h1> <SignInButton /> </div> </div> ); } export default GoogleLoginPage;
By following these steps, you can test the Google authentication flow in your Next.js application. Ensure that each step works correctly:
http://localhost:3000/googleLogin
http://localhost:3000/googleLogin
. You should see the Google Sign-In button.Google social login interface
Sign in with Google
button. This action should redirect you to Google's authentication page.
4. After signing in, you should be redirected back to your application. If the sign-in was successful, you should see a welcome message along with the Logout button.
By following these steps, you will have successfully set up Google authentication in your Next.js application using NextAuth.js. This setup includes creating necessary components, configuring authentication providers, and managing session states.
TOTP, or Time-based One-Time Password, is a popular method for two-factor authentication (2FA). It enhances security by requiring users to enter a unique, time-sensitive code. This code changes every 30 seconds, making it highly secure against interception and replay attacks
In this section, we'll explore how to implement a TOTP authentication in your Next.js application.
The following steps covers the implementation of the TOTP-based authentication:
In this section, we'll explain how to set up TOTP-based authentication for your Next.js project. We'll break down the specific files and structure. Let's start with an overview of the relevant directory structure and the key files involved:
src/models/Totp.ts
: This file defines the Mongoose schema for TOTP. It includes fields for email, secret, and TOTP-based authentication status.src/pages/api/auth/totp/generate.ts
: This API endpoint generates a TOTP secret and a corresponding QR code for the user to scan with their authenticator app.src/pages/api/auth/totp/status.ts
: This API endpoint checks whether TOTP-based authentication is enabled for a given user.src/pages/api/auth/totp/verify.ts
: This API endpoint verifies the TOTP entered by the user.src/app/totp/page.tsx
: This is the frontend component that handles the user interface for TOTP-based authentication. It allows users to login, generate a QR code, and verify their TOTP.To set up TOTP-based authentication in your Next.js project, you'll need a few essential dependencies. Let's go through the installation and purpose of each one.
You can install all the dependencies using the following command:
npm install speakeasy qrcode
src/models/Totp.ts
secret
: Stores the TOTP secret key.totpEnabled
: Indicates whether TOTP is enabled for the user.Here is a high-level description of the totps
collection relevant for the TOTP-based authentication method:
Here's the Totp.ts
file:
import mongoose, { Document, Model, Schema } from "mongoose"; interface ITotp extends Document { email: string; secret: string; totpEnabled: boolean; } const TotpSchema: Schema = new Schema({ email: { type: String, required: true, unique: true }, secret: { type: String, required: true }, totpEnabled: { type: Boolean, default: false }, }); const Totp: Model<ITotp> = mongoose.models.Totp || mongoose.model<ITotp>("Totp", TotpSchema); export default Totp;
src/pages/api/auth/totp/generate.ts
connectDb
to connect to the MongoDB database.
qrcode
to generate a QR code from the TOTP secret key's URL.totpEnabled
to false for the user in the database.Here's the implementation of the generate.ts
file:
import { NextApiRequest, NextApiResponse } from "next"; import speakeasy from "speakeasy"; import qrcode from "qrcode"; import Totp from "../../../../models/Totp"; import connectDb from "../../../../lib/mongodb"; // Generate TOTP secret and QR code const generateTOTP = async (req: NextApiRequest, res: NextApiResponse) => { await connectDb(); const { email } = req.body; const secret = speakeasy.generateSecret({ length: 20, name: "Time-based One-time Password", }); const user = await Totp.findOne({ email }); if (user && user.totpEnabled) { res.status(400).json({ error: "TOTP already enabled" }); return; } if (secret.otpauth_url) { qrcode.toDataURL(secret.otpauth_url, async (err, data_url) => { if (err) { res.status(500).json({ error: "Error generating QR code" }); } else { await Totp.updateOne( { email }, { email, secret: secret.base32, totpEnabled: false }, { upsert: true } ); res.status(200).json({ secret: secret.base32, qrCode: data_url }); } }); } else { res.status(500).json({ error: "Error generating OTP auth URL" }); } }; export default generateTOTP;
src/pages/api/auth/totp/status.ts
connectDb
to connect to the MongoDB database.Totp
collection by email.totpEnabled
as a JSON response if the user is found, otherwise returns an error message.Here's the implementation of the status.ts
file:
import { NextApiRequest, NextApiResponse } from "next"; import connectDb from "../../../../lib/mongodb"; import Totp from "../../../../models/Totp"; const check2FAStatus = async (req: NextApiRequest, res: NextApiResponse) => { await connectDb(); const { email } = req.body; const user = await Totp.findOne({ email }); if (user) { res.status(200).json({ twoFactorEnabled: user.twoFactorEnabled }); } else { res.status(404).json({ error: "User not found" }); } }; export default check2FAStatus;
src/pages/api/auth/totp/verify.ts
connectDb
to connect to the MongoDB database.totpEnabled
status to true for the user in the database.Here's the implementation of the verify.ts
file:
import { NextApiRequest, NextApiResponse } from "next"; import speakeasy from "speakeasy"; import Totp from "../../../../models/Totp"; import connectDb from "../../../../lib/mongodb"; const verifyTOTP = async (req: NextApiRequest, res: NextApiResponse) => { await connectDb(); const { email, token } = req.body; const user = await Totp.findOne({ email }); if (!user || !user.secret) { res.status(400).json({ error: "TOTP not setup for this user" }); return; } const verified = speakeasy.totp.verify({ secret: user.secret, encoding: "base32", token, }); if (verified) { await Totp.updateOne({ email }, { totpEnabled: true }); } res.status(200).json({ verified }); }; export default verifyTOTP;
src/app/totp/page.tsx
useState
to manage state variables such as email, QR code, token, verification status, errors, and TOTP status.useEffect
to check the TOTP status whenever the email changes.handleLogin
function: Validates email input and sets the logged-in state.generateQrCode
function: Fetches the QR code from the backend when the user opts to set up TOTP.verifyToken
function: Verifies the entered TOTP token by calling the backend API.Here’s the complete code for the TOTP component:
"use client"; import Image from "next/image"; import { useState, useEffect } from "react"; export default function TOTP() { const [email, setEmail] = useState(""); const [qrCode, setQrCode] = useState(""); const [token, setToken] = useState(""); const [verified, setVerified] = useState(false); const [error, setError] = useState(""); const [totpEnabled, setTotpEnabled] = useState(false); const [loggedIn, setLoggedIn] = useState(false); const [emailError, setEmailError] = useState(""); // Check the TOTP status when the email changes useEffect(() => { const checkTOTPStatus = async () => { if (email) { const res = await fetch("/api/auth/totp/status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }), }); const data = await res.json(); setTotpEnabled(data.totpEnabled); } }; checkTOTPStatus(); }, [email]); // Handle login process const handleLogin = async () => { if (!email) { setEmailError("Email is required"); return; } setEmailError(""); setLoggedIn(true); }; // Generate QR code for TOTP setup const generateQrCode = async () => { const res = await fetch("/api/auth/totp/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }), }); const data = await res.json(); setQrCode(data.qrCode); setToken(""); setVerified(false); setError(""); }; // Verify the token entered by the user const verifyToken = async () => { const res = await fetch("/api/auth/totp/verify", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, token }), }); const data = await res.json(); if (data.verified) { setVerified(true); setError(""); setTotpEnabled(true); } else { setVerified(false); setError("Invalid Token. Please try again."); } }; // Handle logout process const handleLogout = () => { window.location.href = "http://localhost:3000/totp"; }; return ( <div className="flex items-center justify-center min-h-screen bg-gray-100"> <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full"> <h1 className="text-xl font-bold mb-4 text-center"> Time-based One-Time Passwords Login </h1> {/* Render login form if the user is not logged in */} {!loggedIn && ( <> {emailError && ( <p className="text-red-500 text-center mb-1">{emailError}</p> )} <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter your email" className="border rounded py-2 px-3 text-gray-700 w-full mb-4" /> <button onClick={handleLogin} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 w-full" > Login with TOTP </button> </> )} {/* Show the generate QR code button if the user is logged in but TOTP is not enabled */} {loggedIn && !totpEnabled && !qrCode && ( <button onClick={generateQrCode} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 w-full" > Generate QR Code </button> )} {/* Show the token input and verify button if TOTP is enabled but not yet verified */} {loggedIn && totpEnabled && !verified && !qrCode && ( <> <input type="text" value={token} onChange={(e) => setToken(e.target.value)} placeholder="Enter the code from the app" className="border rounded py-2 px-3 text-gray-700 w-full mb-4" /> <button onClick={verifyToken} className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mb-4 w-full" > Verify Code </button> {error && <p className="text-red-500 text-center">{error}</p>} </> )} {/* Show the QR code and token input fields for verification if not yet verified */} {qrCode && !verified && ( <> <div className="mb-4 text-center"> <Image src={qrCode} alt="QR Code" width={200} height={200} className="mx-auto" /> <p className="mt-2"> 1. Scan this QR code with your authenticator app. </p> <p className="mt-2">2. Enter the code from the app.</p> </div> <div className="mb-4"> <input type="text" value={token} onChange={(e) => setToken(e.target.value)} placeholder="Enter the code from the app" className="border rounded py-2 px-3 text-gray-700 w-full" /> <button onClick={verifyToken} className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-4 w-full" > Verify code </button> </div> {error && <p className="text-red-500 text-center">{error}</p>} </> )} {/* Show the TOTP enabled card and logout button if verification is successful */} {verified && totpEnabled && ( <> <div className="border border-green-500 bg-green-100 p-4 rounded-lg text-center mt-8 mb-4"> <h5 className="font-bold text-green-700">Your TOTP is enabled</h5> </div> <button onClick={handleLogout} className="bg-blue-200 hover:bg-blue-400 font-bold py-2 px-4 rounded mt-4 w-full" > Logout </button> </> )} </div> </div> ); }
In this section, we will walk through the process of testing the TOTP-based authentication flow in your Next.js application. We'll specify the routes, outline the steps involved, and provide detailed descriptions for each step along with relevant screenshots.
http://localhost:3000/totp
http://localhost:3000/totp
- You should see the login page with an email input field and a Login with TOTP
button.Enter Your Email and Log In
Login with TOTP
button.Generate QR Code for TOTP Setup
Generate QR Code
button.
Scan the QR Code with an Authenticator App
Verify Code
button.Verification and Enabling TOTP
Logout
button will be displayed.Navigate to the TOTP Page
Enter the TOTP Code from the Authenticator App
Logout
button will be displayed.You have successfully set up TOTP-based authentication in your Next.js application.
In this section, we will explore the concept of passkeys, a form of passwordless authentication. Passkeys are the new standard for consumer authentication as they are more secure and user-friendly compared to other authentication alternatives.
We have covered the detailed implementation of passkey in Next.js apps already in various other blogs. Therefore, we won’t explain their implementation here but refer to our detailed guide in this blog post. To see the finished code, look at our Next.js passkey example repository on GitHub.
Building a secure and user-friendly authentication system is crucial to protect user data and provide a great first impression of your app. Authentication is often the first interaction a user has with your product and the first thing they will complain about if something goes wrong. Besides the detailed steps laid out above, we also have some additional best practices for Next.js authentication and login pages:
By following these practices, you'll keep your application robust against common threats and ensure a safe environment for your users. Secure authentication not only protects your users but also builds trust and credibility for your application.
In this Next.js login page guide, we explored various authentication methods to secure your Next.js applications. Here’s a recap of what we covered:
Choosing the right authentication method for your application depends on various factors, including security requirements, user convenience, and the nature of your application. Each method we covered has its strengths and can be used alone or in combination to provide a robust authentication system. Experiment with different methods, gather user feedback, and iterate on your implementation to achieve the best balance for your specific needs.
Table of Contents
Enjoyed this read?
🤝 Join our Passkeys Community
Share passkeys implementation tips and get support to free the world from passwords.
🚀 Subscribe to Substack
Get the latest news, strategies, and insights about passkeys sent straight to your inbox.
Related Articles
WebAuthn Signal API: Update & Delete Passkeys on Client-Side
Vincent - July 16, 2024
How to Build a JavaScript UI Component-First DevTool Startup in 2024
Vincent - July 6, 2024
Vercel Passkeys: Deploying Passkeys in Next.js App on Vercel
Nicolai - September 19, 2023