Explain how will you implement authentication in a react/nextjs app.

Question

Accepted Answer

Users: Table or collection for storing user information Sessions/Tokens: Table or collection to store session /token infromation Store a SHA-256 hash of the refresh token, never the token itself. The actual token is only given to the client in the cookie. // app/auth/actions.ts 'use server' import { cookies } from 'next/headers' import { SignJWT, jwtVerify } from 'jose' import bcrypt from 'bcryptjs' import { db } from '@/lib/db' const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET) const ACCESS_TOKEN_EXP = '15m' const REFRESH_TOKEN_EXP_DAYS = 7 export async function login(email: string, password: string) { const user = await db.user.findUnique({ where: { email } }) if (!user || !bcrypt.compareSync(password, user.password_hash)) { throw new Error('Invalid credentials') } // Create access token (short-lived JWT) const accessToken = await new SignJWT({ sub: user.id, role: user.role }) .setProtectedHeader({ alg: 'HS256' }) .setExpirationTime(ACCESS_TOKEN_EXP) .sign(JWT_SECRET) // Create refresh token (opaque, stored in DB) const refreshToken = crypto.randomUUID() const tokenHash = crypto.createHash('sha256').update(refreshToken).digest('hex') await db.refreshToken.create({ data: { user_id: user.id, token_hash: tokenHash, expires_at: new Date(Date.now() + REFRESH_TOKEN_EXP_DAYS * 86400000) } }) // Set cookies cookies().set('access_token', accessToken, { httpOnly: true, secure: process.env.NODE_ENV === 'production', sameSite: 'lax', maxAge: 15 * 60, // 15 minutes path: '/' }) cookies().set('refresh_token', refreshToken, { httpOnly: true, secure: process.env.NODE_ENV === 'production', sameSite: 'lax', maxAge: REFRESH_TOKEN_EXP_DAYS * 86400, path: '/' }) return { success: true } } // middleware.ts import { NextResponse } from 'next/server' import { jwtVerify, SignJWT } from 'jose' import { cookies } from 'next/headers' const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET) export async function middleware(request: NextRequest) { const accessToken = request.cookies.get('access_token')?.value const refreshToken = request.cookies.get('refresh_token')?.value // 1. If access token is valid, continue. if (accessToken) { try { await jwtVerify(accessToken, JWT_SECRET) return NextResponse.next() } catch { /* expired or invalid */ } } // 2. Access token missing/expired, try refresh. if (refreshToken) { try { // Verify refresh token against DB const tokenHash = crypto.createHash('sha256').update(refreshToken).digest('hex') const stored = await db.refreshToken.findFirst({ where: { token_hash: tokenHash, expires_at: { gt: new Date() } } }) if (stored) { // Issue new access token const user = await db.user.findUnique({ where: { id: stored.user_id } }) const newAccessToken = await new SignJWT({ sub: user.id, role: user.role }) .setProtectedHeader({ alg: 'HS256' }) .setExpirationTime('15m') .sign(JWT_SECRET) const response = NextResponse.next() response.cookies.set('access_token', newAccessToken, { httpOnly: true, secure: true, sameSite: 'lax', maxAge: 15 * 60, path: '/' }) // Optionally rotate refresh token (for extra security) return response } } catch { /* fall through to redirect */ } } // 3. No valid tokens – redirect to login for protected routes. if (request.nextUrl.pathname.startsWith('/account')) { return NextResponse.redirect(new URL('/login', request.url)) } return NextResponse.next() } export const config = { matcher: ['/account/:path*', '/checkout/:path*'] // protected paths } export async function logout() { const refreshToken = cookies().get('refresh_token')?.value if (refreshToken) { const tokenHash = crypto.createHash('sha256').update(refreshToken).digest('hex') await db.refreshToken.deleteMany({ where: { token_hash: tokenHash } }) } cookies().delete('access_token') cookies().delete('refresh_token') } // app/account/layout.tsx import { jwtVerify } from 'jose' import { cookies } from 'next/headers' async function getCurrentUser() { const token = cookies().get('access_token')?.value if (!token) return null try { const { payload } = await jwtVerify(token, JWT_SECRET) return { id: payload.sub, role: payload.role } } catch { return null } } export default async function AccountLayout({ children }) { const user = await getCurrentUser() if (!user) redirect('/login') return

{children}

} // providers/AuthProvider.tsx 'use client' import { createContext, useContext, useState, useEffect } from 'react' const AuthContext = createContext(null) export function AuthProvider({ children }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true)

Explain how will you implement authentication in a react/nextjs app.

We can either use JWT or opaque tokens. We prefer JWT for horizontally scaled systems or distributed systems or if we want to avoid database lookups, and chose opaque tokens if instant logout, instant revocation, session tracking, device management

Explain how will you implement authentication in a react/nextjs app.

We can either use JWT or opaque tokens. We prefer JWT for horizontally scaled systems or distributed systems or if we want to avoid database lookups, and chose opaque tokens if instant logout, instant revocation, session tracking, device management

Scenario Questions

Follow-up Questions