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:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 ⋅ 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 ⋅ 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 ⋅ 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 ⋅ 19 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