2024-06-14
5399
#nextjs
Ejiro Asiuwhu
30990
Jun 14, 2024 ⋅ 19 min read

How to use Auth.js for client-side authentication in Next.js

Ejiro Asiuwhu Software engineer with a drive for building highly scalable and performant web applications. Heavily interested in module federation, micro frontends, state machines, TDD, and system designs. Big on web performance and optimization, advanced component design patterns, a11y, SSR, SSG, ISR, and state management. Expert at crafting highly reusable TypeScript-heavy component libraries.

Recent posts:

RAG vs. Fine Tuning, A LogRocket Article

Fine-tuning vs. RAG: Which AI strategy fits your frontend project?

Compare fine-tuning vs. RAG to design faster, smarter, and more responsive AI-powered frontend experiences.

Ikeh Akinyemi
Jun 16, 2025 ⋅ 8 min read
7 Common CSS Navigation Menu Mistakes And How To Fix Them

7 common CSS navigation menu mistakes and how to fix them

Navigation menu errors are common, even for seasoned developers. Learn seven common navigation menu errors and how to solve them using CSS.

Temitope Oyedele
Jun 13, 2025 ⋅ 6 min read
Comparing the top 5 React toast libraries

Comparing the top React toast libraries [2025 update]

Compare the top React toast libraries for when it’s more trouble than it’s worth to create your own custom toast components.

Nefe Emadamerho-Atori
Jun 13, 2025 ⋅ 16 min read
Comparison between TanStack Start and Next.js — two modern full-stack React frameworks with different architectural approaches.

TanStack Start vs. Next.js: Choosing the right full-stack React framework

TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.

Abiola Farounbi
Jun 12, 2025 ⋅ 8 min read
View all posts

14 Replies to "How to use Auth.js for client-side authentication in Next.js"

  1. Really great article 😊 I really enjoyed reading it and it makes me want to switch to Next.js. I was wondering why you called this client-side rather than severless? Is the authentication not done server side by SSR? I really apologize if I’m wrong, I’m just trying to understand the authentication flow.

  2. website: next-auth.js
    Example code : next-auth-example
    npm package : next-auth

    But it is called NextAuth.js and not next-auth.js as one could guess from all your urls.

    Am I missing something here ?

  3. Unhandled Runtime Error
    Error: React Context is unavailable in Server Components

    Call Stack
    SessionProvider

    can you please resolve this error

    1. Use the “use client” flag at the top of the file.
      That error is showing up because “SessionProvider” is using react context which is a client component and for it to work, you must mark the file as a client component with the flag above.

      You are using react 13.+.+ I believe

  4. You are using next-auth v5. However, using app router in next 15, `useSession` cannot be used. I’ve been forced to use `auth()` exported from the @/auth.tsx file. SessionProvider is also not usable any more.

Leave a Reply