OAuth 2.0 and JWT Authentication Explained for Web Developers

1. User clicks "Login with Google"
2. App redirects to Google's auth page
3. User signs in and grants permission
4. Google redirects back with an authorization code
5. App exchanges the code for an access token (server-to-server)
6. App uses the access token to fetch user data from Google

header.payload.signature

eyJhbGciOiJIUzI1NiJ9.          ← Header (algorithm)
eyJ1c2VySWQiOiIxMjMifQ.       ← Payload (data)
SflKxwRJSMeKKF2QT4fwpMeJf36POk ← Signature (verification)

typescript
import jwt from 'jsonwebtoken';

const token = jwt.sign(
  { userId: '123', role: 'admin' },  // Payload
  process.env.JWT_SECRET,             // Secret key
  { expiresIn: '15m' }               // Options
);

typescript
try {
  const decoded = jwt.verify(token, process.env.JWT_SECRET);
  console.log(decoded.userId);  // "123"
} catch (error) {
  console.log('Invalid or expired token');
}

User → "Login with Google" → OAuth 2.0 Flow → Get user info
App → Create JWT with user info → Send to client
Client → Sends JWT in every request → Server verifies JWT

typescript
// 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: {
    async jwt({ token, user }) {
      if (user) token.role = user.role;
      return token;
    },
    async session({ session, token }) {
      session.user.role = token.role;
      return session;
    }
  }
});

export { handler as GET, handler as POST };