如何修复使用Supabase身份验证时的水合作用

huangapple go评论97阅读模式
英文:

How to fix Hydration with supabase auth

问题

我开始使用NextJS,并且遇到了这个水合错误:
错误:水合失败,因为初始UI与服务器上呈现的内容不匹配。

组件:

  1. "use client";
  2. import { useState, useEffect } from "react";
  3. import { supabase } from "@/lib/supabaseClient";
  4. import { Auth } from "@supabase/auth-ui-react";
  5. import { ThemeSupa } from "@supabase/auth-ui-shared";
  6. import { Session } from "@supabase/supabase-js";
  7. export default function Login() {
  8. const [session, setSession] = useState<Session | null>(null);
  9. useEffect(() => {
  10. supabase.auth.getSession().then(({ data: { session } }) => {
  11. setSession(session);
  12. });
  13. if (typeof window !== "undefined") {
  14. const {
  15. data: { subscription },
  16. } = supabase.auth.onAuthStateChange((_event, session) => {
  17. setSession(session);
  18. });
  19. return () => subscription.unsubscribe();
  20. }
  21. }, []);
  22. if (!session) {
  23. return (
  24. <div className="min-h-screen flex flex-col items-center justify-center">
  25. <div className="w-full max-w-md">
  26. <Auth
  27. supabaseClient={supabase}
  28. appearance={{
  29. theme: ThemeSupa,
  30. }}
  31. providers={[]}
  32. />
  33. </div>
  34. </div>
  35. );
  36. }
  37. }

感谢您的帮助! 如何修复使用Supabase身份验证时的水合作用
我想了解为什么会出现水合问题以及如何解决它。

英文:

I started to work with NextJS, and I have this hydration error :
Error: Hydration failed because the initial UI does not match what was rendered on the server.

The Component :

  1. &quot;use client&quot;;
  2. import { useState, useEffect } from &quot;react&quot;;
  3. import { supabase } from &quot;@/lib/supabaseClient&quot;;
  4. import { Auth } from &quot;@supabase/auth-ui-react&quot;;
  5. import { ThemeSupa } from &quot;@supabase/auth-ui-shared&quot;;
  6. import { Session } from &quot;@supabase/supabase-js&quot;;
  7. export default function Login() {
  8. const [session, setSession] = useState&lt;Session | null&gt;(null);
  9. useEffect(() =&gt; {
  10. supabase.auth.getSession().then(({ data: { session } }) =&gt; {
  11. setSession(session);
  12. });
  13. if (typeof window !== &quot;undefined&quot;) {
  14. const {
  15. data: { subscription },
  16. } = supabase.auth.onAuthStateChange((_event, session) =&gt; {
  17. setSession(session);
  18. });
  19. return () =&gt; subscription.unsubscribe();
  20. }
  21. }, []);
  22. if (!session) {
  23. return (
  24. &lt;div className=&quot;min-h-screen flex flex-col items-center justify-center&quot;&gt;
  25. &lt;div className=&quot;w-full max-w-md&quot;&gt;
  26. &lt;Auth
  27. supabaseClient={supabase}
  28. appearance={{
  29. theme: ThemeSupa,
  30. }}
  31. providers={[]}
  32. /&gt;
  33. &lt;/div&gt;
  34. &lt;/div&gt;
  35. );
  36. }
  37. }

Thanks for your helping ! 如何修复使用Supabase身份验证时的水合作用

I want to understand why is hydration and how fix it

答案1

得分: 1

  1. 可能需要等待组件挂载这个简单的老技巧可能会解决它
  2. ```jsx
  3. "use client";
  4. import { useState, useEffect } from "react";
  5. import { supabase } from "@/lib/supabaseClient";
  6. import { Auth } from "@supabase/auth-ui-react";
  7. import { ThemeSupa } from "@supabase/auth-ui-shared";
  8. import { Session } from "@supabase/supabase-js";
  9. export default function Login() {
  10. const [session, setSession] = useState<Session | null>(null);
  11. const [isMounted, setIsMounted] = useState(false);
  12. useEffect(() => {
  13. setIsMounted(true);
  14. supabase.auth.getSession().then(({ data: { session } }) => {
  15. setSession(session);
  16. });
  17. if (typeof window !== "undefined") {
  18. const {
  19. data: { subscription },
  20. } = supabase.auth.onAuthStateChange((_event, session) => {
  21. setSession(session);
  22. });
  23. return () => subscription.unsubscribe();
  24. }
  25. }, []);
  26. if (!isMounted) {
  27. return null;
  28. }
  29. if (!session) {
  30. return (
  31. <div className="min-h-screen flex flex-col items-center justify-center">
  32. <div className="w-full max-w-md">
  33. <Auth
  34. supabaseClient={supabase}
  35. appearance={{
  36. theme: ThemeSupa,
  37. }}
  38. providers={[]}
  39. />
  40. </div>
  41. </div>
  42. );
  43. }
  44. }
英文:

You might probable have to wait until the component mounts. This simple old trick could fix it.

  1. &quot;use client&quot;;
  2. import { useState, useEffect } from &quot;react&quot;;
  3. import { supabase } from &quot;@/lib/supabaseClient&quot;;
  4. import { Auth } from &quot;@supabase/auth-ui-react&quot;;
  5. import { ThemeSupa } from &quot;@supabase/auth-ui-shared&quot;;
  6. import { Session } from &quot;@supabase/supabase-js&quot;;
  7. export default function Login() {
  8. const [session, setSession] = useState&lt;Session | null&gt;(null);
  9. const [isMounted, setIsMounted] = useState(false);
  10. useEffect(() =&gt; {
  11. setIsMounted(true);
  12. supabase.auth.getSession().then(({ data: { session } }) =&gt; {
  13. setSession(session);
  14. });
  15. if (typeof window !== &quot;undefined&quot;) {
  16. const {
  17. data: { subscription },
  18. } = supabase.auth.onAuthStateChange((_event, session) =&gt; {
  19. setSession(session);
  20. });
  21. return () =&gt; subscription.unsubscribe();
  22. }
  23. }, []);
  24. if (!isMounted) {
  25. return null;
  26. }
  27. if (!session) {
  28. return (
  29. &lt;div className=&quot;min-h-screen flex flex-col items-center justify-center&quot;&gt;
  30. &lt;div className=&quot;w-full max-w-md&quot;&gt;
  31. &lt;Auth
  32. supabaseClient={supabase}
  33. appearance={{
  34. theme: ThemeSupa,
  35. }}
  36. providers={[]}
  37. /&gt;
  38. &lt;/div&gt;
  39. &lt;/div&gt;
  40. );
  41. }
  42. }
  43. </details>

huangapple
  • 本文由 发表于 2023年6月15日 04:45:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/76477413.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定