When will you use this?

Use when you are ready to put LearnHub online for users or employers to try.

• Publishing means pushing LearnHub to Vercel, Docker, or Azure so students can access it online.
• CI/CD runs npm test and npm run build automatically on every git push.

Real-world: LearnHub LMS

The EdTech / LMS team building LearnHub LMS uses NextAuth.js to apply NextAuth.js when building course catalog, lesson player, and progress tracking. students and instructors never see the TypeScript files — they just get a fast, reliable course catalog, lesson player, and progress tracking.

Production-style code

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    })
  ],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub;
      return session;
    }
  }
});

export { handler as GET, handler as POST };

What happens in production: In LearnHub LMS, getting NextAuth.js right means students and instructors trust the course catalog, lesson player, and progress tracking every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    })
  ],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub;
      return session;
    }
  }
});

export { handler as GET, handler as POST };

Line-by-line walkthrough

How it works (big picture)

• Providers define how users sign in.
• The catch-all route handles OAuth callbacks.
• Session callback attaches user id for dashboard pages.

Do this on your computer

1. Install next-auth and add Google OAuth credentials in .env.local.
2. Create the [...nextauth] route handler.
3. Wrap the app with SessionProvider in a Client layout wrapper.
4. Protect /dashboard with middleware or getServerSession.
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Use npm run dev while editing NextAuth.js — the page hot-reloads on save.

Remember

NextAuth handles OAuth and sessions. Store secrets in environment variables. Use middleware or server session checks for protected routes.

Common questions