2024-03-22
3450
#nextjs
Ejiro Asiuwhu
30990
Mar 22, 2024 ⋅ 12 min read

How to use NextAuth.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:

Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 min read
Superglue Vs. Hotwire For Modern Frontend Development

Superglue vs. Hotwire for modern frontend development

Explore how Superglue and Hotwire revolutionize frontend development with HTML over the wire, enhancing performance, flexibility, and ease of use.

Frank Joseph
Jun 12, 2024 ⋅ 7 min read
Using Pocketbase To Build A Full Stack Application

Using PocketBase to build a full-stack application

PocketBase is a performant Go-based tool that comes with essential features like user auth, file uploads, access control rules, and more.

Rahul Padalkar
Jun 11, 2024 ⋅ 18 min read
The Top Tools For Implementing E-Commerce Search In React

The top tools for implementing e-commerce search in React

Explore top frontend tools for implementing e-commerce search functionality with React demo implementations.

Saleh Mubashar
Jun 10, 2024 ⋅ 7 min read
View all posts

13 Replies to "How to use NextAuth.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

Leave a Reply