英文:
How to fix Hydration with supabase auth
问题
我开始使用NextJS，并且遇到了这个水合错误：
错误：水合失败，因为初始UI与服务器上呈现的内容不匹配。
组件：
"use client";
import { useState, useEffect } from "react";
import { supabase } from "@/lib/supabaseClient";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { Session } from "@supabase/supabase-js";
export default function Login() {
const [session, setSession] = useState<Session | null>(null);
useEffect(() => {
supabase.auth.getSession().then(({ data: { session } }) => {
setSession(session);
});
if (typeof window !== "undefined") {
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((_event, session) => {
setSession(session);
});
return () => subscription.unsubscribe();
}
}, []);
if (!session) {
return (
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<Auth
supabaseClient={supabase}
appearance={{
theme: ThemeSupa,
}}
providers={[]}
/>
</div>
</div>
);
}
}
感谢您的帮助！ 
我想了解为什么会出现水合问题以及如何解决它。
英文:
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 :
"use client";
import { useState, useEffect } from "react";
import { supabase } from "@/lib/supabaseClient";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { Session } from "@supabase/supabase-js";
export default function Login() {
const [session, setSession] = useState<Session | null>(null);
useEffect(() => {
supabase.auth.getSession().then(({ data: { session } }) => {
setSession(session);
});
if (typeof window !== "undefined") {
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((_event, session) => {
setSession(session);
});
return () => subscription.unsubscribe();
}
}, []);
if (!session) {
return (
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<Auth
supabaseClient={supabase}
appearance={{
theme: ThemeSupa,
}}
providers={[]}
/>
</div>
</div>
);
}
}
Thanks for your helping !
I want to understand why is hydration and how fix it
答案1
得分: 1
可能需要等待组件挂载。这个简单的老技巧可能会解决它。
```jsx
"use client";
import { useState, useEffect } from "react";
import { supabase } from "@/lib/supabaseClient";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { Session } from "@supabase/supabase-js";
export default function Login() {
const [session, setSession] = useState<Session | null>(null);
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
supabase.auth.getSession().then(({ data: { session } }) => {
setSession(session);
});
if (typeof window !== "undefined") {
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((_event, session) => {
setSession(session);
});
return () => subscription.unsubscribe();
}
}, []);
if (!isMounted) {
return null;
}
if (!session) {
return (
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<Auth
supabaseClient={supabase}
appearance={{
theme: ThemeSupa,
}}
providers={[]}
/>
</div>
</div>
);
}
}
英文:
You might probable have to wait until the component mounts. This simple old trick could fix it.
"use client";
import { useState, useEffect } from "react";
import { supabase } from "@/lib/supabaseClient";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { Session } from "@supabase/supabase-js";
export default function Login() {
const [session, setSession] = useState<Session | null>(null);
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
supabase.auth.getSession().then(({ data: { session } }) => {
setSession(session);
});
if (typeof window !== "undefined") {
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((_event, session) => {
setSession(session);
});
return () => subscription.unsubscribe();
}
}, []);
if (!isMounted) {
return null;
}
if (!session) {
return (
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<Auth
supabaseClient={supabase}
appearance={{
theme: ThemeSupa,
}}
providers={[]}
/>
</div>
</div>
);
}
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论