Implementing Third-Party OAuth Authentication with NextAuth in Frontend-Only Next.js Setup

Frontend
1

My Current Setup

I’m working with:

  • Next.js purely for frontend (no backend routes)
  • Custom Java backend API
  • External OAuth provider for authentication
  • NextAuth for session management

Main Question: How do I properly handle OAuth flow when Next.js is frontend-only?

Important notes:

  • Next.js should NOT handle backend logic
  • I already have username/password auth working with CredentialsProvider
  • This is specifically about external OAuth provider integration

Approach Option 1:

  1. Frontend redirects user to OAuth provider URL

    • Question: What’s the proper URL construction method?

  2. OAuth provider redirects back with authorization code

  3. Frontend sends code to Java backend

    • Should I use useEffect to automatically send the code when redirect page loads?

  4. Java backend returns JWT tokens

  5. Store JWT and user data in NextAuth session

    • How exactly do I integrate this into NextAuth? Which file handles this logic?

Approach Option 2:

  1. Frontend redirects to Java backend endpoint
  2. Backend handles OAuth flow completely
  3. Backend redirects back to frontend with some data
    • What data should be passed here?
  4. Frontend retrieves JWT from backend somehow
    • Problem: How does frontend get tokens after all these redirects?
  5. Setup NextAuth session

Why I need help: Online tutorials assume Next.js handles both frontend and backend, but I need the Java backend to manage all security operations.

// Current NextAuth config
const authOptions = {
  providers: [
    // Need custom OAuth provider here
  ],
  callbacks: {
    // How to handle custom backend JWT?
  }
}

Versions: Next.js 15.1.6, NextAuth 4.24.11, React 19.0.0

2

You need a custom OAuth provider in NextAuth that points to your Java backend, not the OAuth service directly. Set up the provider to redirect to your backend’s OAuth endpoint first. After your backend handles the OAuth flow, have it redirect back to NextAuth’s callback URL with a temp token or session ID. Use NextAuth’s jwt callback to swap that temp token for your real JWT from the backend. Then use the session callback to format your session data. This way you keep NextAuth’s session handling but let your Java backend do all the OAuth work. Basically, treat your backend as the OAuth provider instead of going straight to the external service.

3

Wait, why not have your Java backend return a custom auth code instead of the JWT directly? When the OAuth provider hits your backend, generate a temp code and redirect to Next.js with that code. Then exchange it for the actual JWT in NextAuth’s authorize callback. It’s basically mimicking standard OAuth flow while keeping your backend in control. Which OAuth provider are you using?

4

Go with option 1, but ditch the useEffect - it’s a nightmare with redirect loops. Make a /auth/callback page that pulls the code from URL params and hits your Java backend. Then manually redirect to home with your tokens stored. Way cleaner than forcing everything through NextAuth.