Authentication

JWTs let two parties securely send information as a JSON object. A token has a header, payload, and signature, and is commonly sent in an Authorization header using the Bearer scheme. After login, the token can accompany requests to resources the user is allowed to access.

Learn Next.js walks through a Next.js Auth0 example that uses API routes and a hook to fetch and store user information. The module uses Firebase for Day Drink, citing prior familiarity, its broader platform features, user management dashboard, and simpler setup for this example. Firebase creates signed ID tokens for users in a project.

The Firebase integration is organized in a custom `useAuth` hook that exposes the current user and methods for signing in, signing up, and signing out. A context shares user state across the app, while an auth state listener updates that state and returns an unsubscribe function. The example uses email and password, with password reset mentioned as another possible method.

The sign-in page combines `useAuth`, Chakra UI toast messages, and the Next.js router to show Firebase errors or redirect successful users to the deals page. React Hook Form manages required email and password fields, submission state, and validation errors. The form logic lives in a reusable component that can appear in a full-screen page or a modal when someone tries to vote or add a deal while logged out.

Learn Next.js closes by noting that Firebase and Auth0 can provide prebuilt or hosted login interfaces, reducing the amount of form code to maintain. Custom forms take more work but give the team control over branding and behavior. The Day Drink example uses custom flows built from Firebase, a hook, and reusable components.