Hydration errors in NextJS User Auth guide

[aleciavogel]

Improve documentation

Link

https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs

(Here's a link to the markdown file to edit for your convenience)

Describe the problem

Following the tutorial exactly results in hydration errors where supabase/auth-helpers-nextjs is used on the client. This may actually require an improvement in that particular library, but there is a pretty easy workaround in the meanwhile.

You also get an error in your terminal if you don't run npm install encoding (again, might have to do with a different library that needs improvement, but it's a simple fix).

Describe the improvement

Add something about running npm install encoding.

In app/auth-form.tsx:

import { useState, useEffect } from 'react';

export default function AuthForm() {
  const supabase = createClientComponentClient<Database>()
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  // ...
}

And then follow the same pattern for app/account/account-form.tsx.

Additional context

Screenshots of the issues after following the tutorial in a fresh project where I'm using the latest version of NextJS (13.4.6)

[gregnr]

Thanks for reporting @aleciavogel!

I found a related Firebase SDK issue firebase/firebase-js-sdk#7280 which mentions that node-fetch v3 might fix the problem. For @supabase/supabase-js, node-fetch comes from cross-fetch, which is still using node-fetch v2 unfortunately.

I agree that an update to the docs is the best short-term solution. Update to install encoding, probably here:

supabase/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx

Lines 53 to 55 in 114fd72

	```bash
	npm install @supabase/supabase-js
	```

@aleciavogel would you be interested in opening a small PR for this?

[aleciavogel]

Certainly! I'll get it done after work tonight.

[saltcod]

Addressed on the library side. Marking this one as closed.