4.ログイン
src/pages/login.js
import { useState } from "react";
import { useRouter } from "next/router";
import { supabase } from "../lib/supabaseClient";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [message, setMessage] = useState("");
const router = useRouter();
const handleLogin = async(e) => {
e.preventDefault();
const { error } = await supabase.auth.signInWithPassword({ email, password });
if (error) {
setMessage(error.message);
} else {
router.push("/mypage");
}
};
return (
<>
<p>{message}</p>
<form onSubmit={handleLogin}>
<input
type="email"
placeholder="メールアドレス"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="パスワード"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">ログイン</button>
</form>
</>
);
}
useRouterを使ってrouter.push(“/mypage”)をすればフルページリロードが起こりません
useRouterを使わずに window.location.href = “/mypage” とするとフルページリロードが起こります
BACK