fix(react): support importing "next-auth/react" in Server Component environment

[zenflow]

☕️ Reasoning

Currently, importing "next-auth/react" in a Server Component module (or in a module imported by a Server Component module) will fail with Uncaught TypeError: React.createContext is not a function.

This is because React Context is unavailable in Server Components.

With this change, "next-auth/react" can be imported without error, and an informative error is thrown if there's an attempt to actually use React Context.

🧢 Checklist

• Documentation
• Tests
• Ready to be merged

🎫 Affected issues

Related issue: #5647 (this PR doesn't add complete support, but improves support)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
next-auth	⬜️ Ignored (Inspect)		Nov 4, 2022 at 2:32AM (UTC)

[balazsorban44]

Thanks, we plan to design a better API for the Next.js app directory, but as for now, the recommendation is to add the 'use client' directive to the file where you wrap your components with SessionProvider.

[zenflow]

as for now, the recommendation is to add the 'use client' directive to the file where you wrap your components with SessionProvider.

That's basically what I'm doing...

"use client";
// This module exists for the sole purpose of cloning SessionProvider & adding the compiler directive above

import React from "react";
import { SessionProvider } from "next-auth/react";

export const ClientSessionProvider: typeof SessionProvider = (props) => {
  return <SessionProvider {...props} />;
};

... but it doesn't solve this separate problem (described under Reasoning above).

we plan to design a better API for the Next.js app directory

@balazsorban44 Since that will probably take some time, would you consider merging this small change as a stop-gap?

[balazsorban44]

Upon revisiting, I think this is a good solution for now and does not introduce problems, even if we want to change APIs in the future. Given app/ is experimental in Next.js, we are also free to do breaking changes if needed.